最近的微信大行其道。各个网站上都给出的微信验证码,进行手机扫描加入。
怎么创建类似与点击鼠标弹出一个浮动的div显示二维码的这种效果。
1.首先制作好这样的图片,写css样式
<style type="text/css"> #tip { position: absolute; border: 1px solid #ccc; display: none; } </style>
2.写javascript
<script type="text/javascript"> $(function () { $(function () { var x = 10; var y = 20; $("#weixin").mouseover(function (e) { var tip = "<div id='tip'><img src='images/0.jpg'/></div>"; $("body").append(tip); $("#tip").css({ "top": (e.pageY + y) + "px", "left": (e.pageX + x) + "px" }).show("fast"); }).mouseout(function () { $("#tip").remove(); }).mousemove(function (e) { $("#tip").css({ "top": (e.pageY + y) + "px", "left": (e.pageX + x) + "px" }); }); }) }) </script>
3.写上标签,把标签的名字Id为weixin。
<span id="weixin" style="cursor:pointer">点击此处查看</span>