创建一个鼠标停留显示悬浮二维码效果

来源：互联网发布：sql 2005 64位个人版编辑：程序博客网时间：2024/06/05 00:42

创建二维码这个比较简单，可以直接用jquery生成

然后想实现二维码悬浮效果，可以用鼠标事件来完成，具体的代码如下：

<script type="text/javascript"> $(function(){  var x=10;  var y=20;  $(".test").mouseover(function(e){  var code="<div id='code' style='position:absolute;border:1px solid #999; background:#ffffff;padding:10px;'></div>";//定义一个div为绝对布局  $("body").append(code);//将上面定义的div添加到body里，因为是绝对布局，需要设置坐标位置     $("#code").css(//设置css样式并显示  {   "top": (e.pageY-y) + "px",//e.page就是鼠标停留点的坐标，这样就可以确定code的具体位置   "left": (e.pageX+x) + "px"   }  ).show("fast");//设置成快速出现     }).mouseout(function(){     $("#code").remove(); //鼠标移出时间，remove掉该div  }).mousemove(function(e){//鼠标移动事件，设置具体坐标，这里设置成向上，向下top改成e.pageY+y，如果想向左可以改left    $("#code").css({  "top": (e.pageY-2*y-200) + "px",  "left": (e.pageX+x) + "px"  }).empty().qrcode({ //empty清除二维码后qrcode重新显示，不然会出现很多二维码            render: "canvas",//这里用table难以识别比较长的网址产生的二维码            width: 200,             height:200,             text: this.title//this.title是.test中的属性title的值        });   });  });</script>

上面使用的正是通过鼠标坐标的绝对定位方式动态生成div层的效果，而在div层上添加想要的二维码就可以了，然后鼠标停留会显示二维码的div层，鼠标移出就会先清除原有的div创建一个新的二维码div层，另外别忘了在自己链接上添加class=”test"的class就可以了

最后在body里在加上一个链接，里面添加title属性和class="test"就可以动态显示了，例如：

1

<a href="#" class="btn btn-link test" title="http://baidu.com">百度</a>

0 0