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

简介:

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

相关文章
|
4月前
|
前端开发 程序员
HTML+CSS+JavaScript制作动态七夕表白网页(含音乐+自定义文字)
一年一度的520情人节/七夕情人节/女朋友生日/程序员表白,是不是要给女朋友或者正在追求的妹子一点小惊喜呢,今天这篇博客就分享下前端代码如何实现HTML+CSS+JavaScript制作七夕表白网页(含音乐+自定义文字)。赶紧学会了,来制作属于我们程序员的浪漫吧!
128 0
|
4月前
|
移动开发 前端开发 JavaScript
惊爆!一键解锁HTML父页面神秘技能,子页面Dialog华丽登场,让你的网页交互瞬间高大上,用户体验飙升!
【8月更文挑战第4天】在Web开发中,常需从父页面弹出子页面或对话框(Dialog)进行互动。HTML5虽引入了&lt;dialog&gt;元素,但许多开发者偏好使用自定义方案以获得更好的兼容性和样式控制。本示例利用HTML、CSS及JavaScript创建一个可弹出子页面的模态框:首先,在父页面中定义一个按钮触发弹出效果;接着,设置隐藏的模态框容器,内含一个iframe用于加载子页面;然后,通过CSS设定模态框样式;最后,借助JavaScript控制模态框的显示与隐藏。此方案灵活且易于定制,适用于多种应用场景。
126 12
|
4月前
|
前端开发 容器
是你想要的CSS动画效果吗!附源码
是你想要的CSS动画效果吗!附源码
|
7月前
|
前端开发 移动开发 JavaScript
跨年动态炫酷烟花网页代码
利用Html5的Canvas技术,模拟出逼真的烟花效果,让用户在网页上欣赏到绚丽多彩的烟花盛宴。同时,通过交互式设计,让用户能够与烟花互动,增加趣味性。
89 0
跨年动态炫酷烟花网页代码
|
7月前
(星星)跟随鼠标移动的效果.html(网上收集3)
(星星)跟随鼠标移动的效果.html(网上收集3)
|
7月前
|
前端开发 JavaScript API
|
7月前
|
前端开发 JavaScript 算法
成为CSS选择器大师,让你的网页瞬间提升品味!
欢迎来到前端入门之旅!这个专栏是为那些对Web开发感兴趣、刚刚开始学习前端的读者们打造的。无论你是初学者还是有一些基础的开发者,我们都会在这里为你提供一个系统而又亲切的学习平台。我们以问答形式更新,为大家呈现精选的前端知识点和最佳实践。通过深入浅出的解释概念,并提供实际案例和练习,让你逐步建立起一个扎实的基础。无论是HTML、CSS、JavaScript还是最新的前端框架和工具,我们都将为你提供丰富的内容和实用技巧,帮助你更好地理解并运用前端开发中的各种技术。
|
前端开发
清明节,如何用代码让网页变灰
清明节,如何用代码让网页变灰
|
前端开发
前端知识案例-网页文档流
前端知识案例-网页文档流
67 0
前端知识案例-网页文档流
|
前端开发
整活系列(二)——整一个好看的毛玻璃登陆页面
昨天刷某站下饭的时候,看见了一个好看的登陆页面,于是昨天晚上用代码实现了一下,今天就拿出来分享给大家。

热门文章

最新文章