超好用的网页浮动广告代码

简介:

Html代码  收藏代码

  1. <div id='your_id' style='z-index: 100; left: 2px; width: 108px; position: absolute; top: 43px; height: 108px; visibility: visible;'>  

  2.     <a href='http://codingstandards.iteye.com/' target='_blank'>  

  3.         <img src='http://124.232.156.170/nxsyzx/zhaosheng/baoming.gif' width='108' height='108' border='0'/>  

  4.     </a>  

  5. </div>  

 

 

用于控制图片运动的JS代码

 

Js代码  收藏代码

  1. (function(id){  

  2. var xPos = 2;  

  3. var yPos = 43;   

  4. var step = 1;  

  5. var delay = 30;   

  6. var height = 0;  

  7. var Hoffset = 0;  

  8. var Woffset = 0;  

  9. var yon = 0;  

  10. var xon = 0;  

  11. var pause = true;  

  12. var interval;  

  13. var img1 = document.getElementById(id);  

  14. img1.style.top = yPos;  

  15. function changePos() {  

  16.     width = document.body.clientWidth;  

  17.     height = document.body.clientHeight;  

  18.     Hoffset = img1.offsetHeight;  

  19.     Woffset = img1.offsetWidth;  

  20.     img1.style.left = xPos + document.body.scrollLeft;  

  21.     img1.style.top = yPos + document.body.scrollTop;  

  22.     if (yon)   

  23.         {yPos = yPos + step;}  

  24.     else   

  25.         {yPos = yPos - step;}  

  26.     if (yPos < 0)   

  27.         {yon = 1;yPos = 0;}  

  28.     if (yPos >= (height - Hoffset))   

  29.         {yon = 0;yPos = (height - Hoffset);}  

  30.     if (xon)   

  31.         {xPos = xPos + step;}  

  32.     else   

  33.         {xPos = xPos - step;}  

  34.     if (xPos < 0)   

  35.         {xon = 1;xPos = 0;}  

  36.     if (xPos >= (width - Woffset))   

  37.         {xon = 0;xPos = (width - Woffset);   }  

  38.     }  

  39.       

  40.     function start() {  

  41.         img1.visibility = 'visible';  

  42.         interval = setInterval(changePos, delay);  

  43.     }  

  44.     function pause_resume() {  

  45.         if(pause) {  

  46.             clearInterval(interval);  

  47.             pause = false;  

  48.         } else {  

  49.             interval = setInterval(changePos,delay);  

  50.             pause = true;   

  51.         }  

  52.     }  

  53.     start();  

  54. })('your_id');  

 

 

PS:本文中的代码参考了网络上常用的浮动广告代码,但做了一些修改,更加实用。它限制了变量的作用域,能够直接嵌入到某些门户CMS系统中。



本文转自 IT阿飞 51CTO博客,原文链接:http://blog.51cto.com/itafei/1791859

相关文章
|
6天前
跳动的文字(文字渲染).html( 网上收集的1)
跳动的文字(文字渲染).html( 网上收集的1)
|
6天前
(星星)跟随鼠标移动的效果.html(网上收集3)
(星星)跟随鼠标移动的效果.html(网上收集3)
|
2月前
|
前端开发 JavaScript API
|
3月前
为您的网站添加通用网站底部美化代码
为您的网站添加通用网站底部美化代码
43 1
为您的网站添加通用网站底部美化代码
|
4月前
微信小游戏制作工具中文字设置的粗体不显示,怎么解决?
微信小游戏制作工具中文字设置的粗体不显示,怎么解决?
37 1
|
5月前
|
前端开发
清明节,如何用代码让网页变灰
清明节,如何用代码让网页变灰
非常漂亮的纯css3实现多彩侧边导航(非常流畅),附效果演示
非常漂亮的纯css3实现多彩侧边导航(非常流畅),附效果演示
|
10月前
|
Web App开发 前端开发 JavaScript
css黏性定位-实现商城的分类滚动的标题吸附
css黏性定位-实现商城的分类滚动的标题吸附
88 0
|
前端开发
前端知识案例-网页文档流
前端知识案例-网页文档流
47 0
前端知识案例-网页文档流
|
Web App开发 前端开发 JavaScript
Amazing!巧用 CSS 视差实现酷炫交互动效
Amazing!巧用 CSS 视差实现酷炫交互动效
201 0
Amazing!巧用 CSS 视差实现酷炫交互动效