您当前的位置:首页 > 网站建设 > 前端

鼠标经过显示微信二维码的办法

时间:2016-04-29 16:55:43  来源:  作者:

我们先看一下效果

 
 
 
是不是很酷呢?很多网站也在用,今天分享一下了,代码也很少。
 
首页是JS代码
 
function showwx()
{
document.getElementById('qqgroup').style.display='block';
}
function hidwx()
{
document.getElementById('qqgroup').style.display='none';
}
 
然后是HTML代码
 
<a href="javascript:void(0)" class="qqgroup" onmouseover="showwx()" onmouseout="hidwx()"></a>
 
在需要出现二维码的地方加上下面代码
 
<div id="qcode" class="center"><div id="qqgroup"></div></div>
 
最后就是定义样式啦!下面的仅供参考!
 
#qcode { position:relative; margin:0 auto; }
#qqgroup { display:none; position:absolute; overflow:hidden; background:url(templates/images/qqgroup.png) no-repeat; width:150px; height:150px; z-index: 2000000; left:-50px; top:30px; }
 
完整代码如下
 
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>创想技术网</title>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<style>
#qcode { position:relative; margin:0 auto; }
#qqgroup { display:none; position:absolute; overflow:hidden; background:url(templates/images/qqgroup.png) no-repeat; width:150px; height:150px; z-index: 2000000; left:-50px; top:30px; }
</style>
<script type="text/javascript">
function showwx()
{
document.getElementById('qqgroup').style.display='block';
}
function hidwx()
{
document.getElementById('qqgroup').style.display='none';
}
</script>
</head>
<body>
<div id="header">
<div class="top">
    <div class="wrapper">
        <div class="left"><a href="http://www.22ba.com/">创想工作室首页</a></div>
        <div class="right">
            <div id="qcode" class="center"><div id="qqgroup"></div></div>
            <a href="javascript:void(0)" class="qqgroup" onmouseover="showwx()" onmouseout="hidwx()"></a><a class="mobile" href="http://m.22ba.com/"></a>
            </div>
        </div>
    </div>
</div>
</body>
</html>
来顶一下
返回首页
返回首页
发表评论
用户名: 密码:
验证码: 匿名发表
推荐资讯
相关文章
    无相关信息
栏目更新
栏目热门