JS代码实现鼠标滑过弹出图片 微信二维码关注图片

admin

一段简单的代码可以鼠标滑过微信图标或者文字实现弹出微信二维码关注图片，以下代码为实例代码：

1. <span class="mobile"><a href="m/index.php" target="_blank">手机版</a></span>
   
2.           <span class="wechat"><a href="javascript:void(0)">关注微信</a></span>
   
3.           <div id="wxImg" style="display: none; height: 50px; position: absolute;"><img src="/templets/default/images/wechat.png"></div>
   
4.           <script type="text/javascript">
   
5.                         function showImg() {
   
6.                                 document.getElementById("wxImg").style.display = 'block';
   
7.                         }
   
8. 
   
9.                         function hideImg() {
   
10.                                 document.getElementById("wxImg").style.display = 'none';
    
11.                         }
    
12.            </script>

复制代码

如果您只需要微信二维码弹出，那么这里的手机版内容可以去掉，CSS样式代码如下：

1. /*顶部TOP样式*/
   
2. #toptb {
   
3.     height: 35px;
   
4.     line-height: 35px;
   
5.     background: #fafafa;
   
6.     border-bottom: 1px solid #e6e6e6;
   
7. }
   
8. #toptb span {
   
9.     margin-left: 10px;
   
10. }
    
11. .mobile {
    
12.     padding-left: 15px;
    
13.     background: url(/template/default/images/mobile.png) no-repeat;
    
14.     position: relative;
    
15. }
    
16. .wechat {
    
17.     padding-left: 25px;
    
18.     background: url(/template/default/images/weixin.png) no-repeat;
    
19.     position: relative;
    
20. }

复制代码

根据自己的具体情况修改路径或者相关样式，可自行调试。

最终效果如下图所示：
1、鼠标移入前

2、鼠标移入后

是不是很简单啊，有疑问可以下方留言讨论。