Heim > Web-Frontend > js-Tutorial > Hauptteil

JS随机漂浮广告代码具体实例_javascript技巧

WBOY
Freigeben: 2016-05-16 17:14:19
Original
1702 Leute haben es durchsucht

复制代码 代码如下:



      JS随机漂浮广告代码具体实例_javascript技巧




 
复制代码 代码如下:

<script><BR>var x = 50,y = 60 //浮动层的初始位置,分别对应层的初始X坐标和Y坐标<BR>var xin = true, yin = true //判断层的X坐标和Y坐标是否在在控制范围之内,xin为真是层向右移动,否则向左;yin为真是层向下移动,否则向上<BR>var step = 1 //层移动的步长,值越大移动速度越快<BR>var delay = 10 //层移动的时间间隔,单位为毫秒,值越小移动速度越快<BR>var obj=document.getElementByIdx_x("float") //捕获id为ad的层作为漂浮目标<BR>function floatAD() {<BR>var L=T=0 //层移动范围的左边界(L)和上边界(T)坐标<BR>var R= document.body.clientWidth-obj.offsetWidth //层移动的右边界<BR>var B = document.body.clientHeight-obj.offsetHeight //层移动的下边界<BR>obj.style.left = x + document.body.scrollLeft //更新层的X坐标,实现X轴方向上的运动;document.body.scrollLeft为文档区域的滚动条向右拉的距离,以保证在滚动条右拉时层仍在可见范围内<BR>obj.style.top = y + document.body.scrollTop //更新层的Y坐标,实现Y轴方向上的运动;document.body.scrollTop为文档区域的滚动条向下拉的距离,以保证在滚动条下拉时层仍在可见范围内<BR>x = x + step*(xin?1:-1) //通过判断层的范围决定层在X轴上的运动方向<BR>if (x < L) { xin = true; x = L} //层超出左边界时的处理<BR>if (x > R){ xin = false; x = R} //层超出右边界时的处理<BR>y = y + step*(yin?1:-1) //通过判断层的范围决定层在Y轴上的运动方向<BR>if (y < T) { yin = true; y = T } //层超出上边界时的处理<BR>if (y > B) { yin = false; y = B } //层超出下边界时的处理<BR>}<BR>var itl= setInterval("floatAD()", delay) //每delay秒执行一次floatAD函数<BR>obj.onmouseover=function(){clearInterval(itl)} //层在鼠标移上时清除上面的间隔事件,实现层在的鼠标移上时停止运动的效果<BR>obj.onmouseout=function(){itl=setInterval("floatAD()", delay)} //层在鼠标移开时开始间隔事件,实现层在的鼠标移开时继续运动的效果<BR></script>

注意:
在网页中插入Flash和浮动广告,你会发现在浮动广告浮到Flash处时会在下面,
我们如何解决这个问题呢,
其它很简单
在flash代码的位置加入下面语句就可以了

例:
如果下面是flash所在位置的代码:

复制代码 代码如下:








Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage