请选择 进入手机版 | 继续访问电脑版

爱Q粉丝网

搜索
查看: 455|回复: 0
收起左侧

[JS特效] JS漂浮广告代码,图片飘动,响应鼠标停止

[复制链接]

197

主题

202

帖子

777

积分

管理员

Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9

积分
777

灌水之王优秀版主荣誉管理论坛元老

发表于 2020-5-18 03:40:14 | 显示全部楼层 |阅读模式

分享一款JS漂浮广告代码,图片飘动,响应鼠标停止,以前可能用的比较多吧!
现在都是用的右下角的广告和对联的广告可能看着更美观一点,不过漂浮的广告也有它的优点比如:点击量高!

  1. <html>
  2. <head>
  3. <title>www.iqfsw.com</title>
  4. </head>
  5. <body>
  6. <div id="img" style="position:absolute;z-index=99;">
  7. <a href="http://www.iqfsw.com"><img src="http://www.iqfsw.com/template/lewei_hd/images/logo.png" border="0"  alt='img'></a>
  8. </div>
  9. <SCRIPT LANGUAGE="JavaScript">
  10. <!-- Begin
  11. var xPos = document.body.clientWidth-20;
  12. var yPos = document.body.clientHeight/2;
  13. var step = 1;
  14. var delay = 5;
  15. var height = 0;
  16. var Hoffset = 0;
  17. var Woffset = 0;
  18. var yon = 0;
  19. var xon = 0;
  20. var pause = true;
  21. var interval;
  22. img.style.top = yPos;
  23. function changePos() {
  24. width = document.body.clientWidth;
  25. height = document.body.clientHeight;
  26. Hoffset = img.offsetHeight;
  27. Woffset = img.offsetWidth;
  28. img.style.left = xPos + document.body.scrollLeft;
  29. img.style.top = yPos + document.body.scrollTop;
  30. if (yon) {
  31. yPos = yPos + step;
  32. }else {
  33. yPos = yPos - step;
  34. }
  35. if (yPos < 0) {
  36. yon = 1;
  37. yPos = 0;
  38. }
  39. if (yPos >= (height - Hoffset)) {
  40. yon = 0;
  41. yPos = (height - Hoffset);
  42. }
  43. if (xon) {
  44. xPos = xPos + step;
  45. }else {
  46. xPos = xPos - step;
  47. }
  48. if (xPos < 0) {
  49. xon = 1;
  50. xPos = 0;
  51. }
  52. if (xPos >= (width - Woffset)) {
  53. xon = 0;
  54. xPos = (width - Woffset);
  55. }
  56. }
  57. function start() {
  58. img.visibility = "visible";
  59. interval = setInterval('changePos()', delay);
  60. }
  61. start();
  62. img.onmouseover = function() {
  63. clearInterval(interval);
  64. interval = null;
  65. }
  66. img.onmouseout = function() {
  67. interval = setInterval('changePos()', delay);
  68. }
  69. //  End -->
  70. </script>
  71. </body>
  72. </html><div style="text-align:center;margin:30px 0 0 0;"><hr style="color:#999;height:1px;">如不能显示效果,请按Ctrl+F5刷新本页,更多网页代码:<a href='http://www.iqfsw.com' target='_blank'>http://www.iqfsw.com</a></div>
复制代码


回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

快速回复 返回顶部 返回列表