《2022年漂浮广告代码分析源码精华教程.docx》由会员分享，可在线阅读，更多相关《2022年漂浮广告代码分析源码精华教程.docx（5页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、2022年漂浮广告代码分析源码精华教程<div id=ad style=position:absolute><a href= target=_blank><img src= border=0></a></div> <script> var x = 50,y = 60 var xin = true, yin = true var step = 1 var delay = 10 var obj=document.getElementById(ad) function floatAD() { var L=T=0 var
2、 R= document.body.clientWidth-obj.offsetWidth var B = document.body.clientHeight-obj.offsetHeight obj.style.left = x + document.body.scrollLeft obj.style.top = y + document.body.scrollTop x = x + step*(xin?1:-1) if (x < L) { xin = true; x = L} if (x > R){ xin = false; x = R}
3、; y = y + step*(yin?1:-1) if (y < T) { yin = true; y = T } if (y > B) { yin = false; y = B } } var itl= setInterval(floatAD(), delay) obj.onmouseover=function(){clearInterval(itl)} obj.onmouseout=function(){itl=setInterval(floatAD(), delay)} </sc
4、ript> 代码分析：<div id=ad style=position:absolute><a href= target=_blank><img src= border=0></a></div><script>var x = 50,y = 60 /浮动层的初始位置，分别对应层的初始X坐标和Y坐标var xin = true, yin = true /推断层的X坐标和Y坐标是否在在限制范围之内，xin为真是层向右移动，否则向左；yin为真是层向下移动，否则向上var step = 1 /层移动的步长，值越大移动速度越
5、快var delay = 10 /层移动的时间间隔,单位为毫秒，值越小移动速度越快var obj=document.getElementById(ad) /捕获id为ad的层作为漂移目标function floatAD() {var L=T=0 /层移动范围的左边界(L)和上边界(T)坐标var R= document.body.clientWidth-obj.offsetWidth /层移动的右边界var B = document.body.clientHeight-obj.offsetHeight /层移动的下边界obj.style.left = x + document.bod
6、y.scrollLeft /更新层的X坐标，实现X轴方向上的运动；document.body.scrollLeft为文档区域的滚动条向右拉的距离，以保证在滚动条右拉时层仍在可见范围内obj.style.top = y + document.body.scrollTop /更新层的Y坐标，实现Y轴方向上的运动；document.body.scrollTop为文档区域的滚动条向下拉的距离，以保证在滚动条下拉时层仍在可见范围内x = x + step*(xin?1:-1) /通过推断层的范围确定层在X轴上的运动方向if (x < L) { xin = true; x = L}
7、; /层超出左边界时的处理if (x > R){ xin = false; x = R} /层超出右边界时的处理y = y + step*(yin?1:-1) /通过推断层的范围确定层在Y轴上的运动方向if (y < T) { yin = true; y = T } /层超出上边界时的处理if (y > B) { yin = false; y = B } /层超出下边界时的处理}var itl= setInterval(floatAD(), delay) /每delay秒执行一次floatAD函数obj.onmouseover=function(){clearInterval(itl)} /层在鼠标移上时清除上面的间隔事务，实现层在的鼠标移上时停止运动的效果obj.onmouseout=function(){itl=setInterval(floatAD(), delay)} /层在鼠标移开时起先间隔事务，实现层在的鼠标移开时接着运动的效果</script>（出处：