JS解决鼠标移动到微信图标上显示二维码
最近在重新做论坛导航栏,想把论坛的微信公众号放上去。看到很多网站都有那种鼠标一移动到微信图标上,然后就会出现二维码的效果。然后网上查了下资料。找到了这么一段代码。完美解决了我的困扰。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | <!DOCTYPE HTML> <html> <head> <meta charset="UTF-8" /> <title>last.html</title> <style> </style> <script type="text/javascript"> function show (obj) { var img = document.getElementById ("showimg"); if (img.src = obj.src) { img.src = "qrcode.jpg"; } img.style.display = ""; img.style.position = "absolute"; img.style.left = obj.offsetleft + obj.width; } function hide () { document.getElementById ("showimg").style.display = "none"; } </script> </head> <body> <img src="wechat.jpg" onmouseover="show(this)" onmouseout="hide()" width=18 height=18> <br> <img src="qrcode.jpg" id="showimg" style="display: none" height=88> </body> </html> |
试用了一下,效果不行啊!你这不是浮层。二维码图片会占用网页上的空间。
相当不错,代码这么简洁。我用的一段JS文件,足有5KB,有空就换成你这个