JavaScript实现图片上下飘动可设置浮动速度

发布时间：2018-08-16 05:40:25 所属栏目：Asp教程来源：站长网

导读：Java Script实现的图片上下飘动效果，有点类似于网页飘浮广告，但是与之不同的是，此图片只能上下移动，在下边出现慢慢向上浮动，到顶部后自动向下移动，在代码中可设置图片的浮动速度，希望对您有所帮助。演示： htmlheadmeta http-equiv=Content-Type c

　　JavaScript实现的图片上下飘动效果，有点类似于网页飘浮广告，但是与之不同的是，此图片只能上下移动，在下边出现慢慢向上浮动，到顶部后自动向下移动，在代码中可设置图片的浮动速度，希望对您有所帮助。

　　演示：

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>JavaScript实现图片上下飘动可设置浮动速度</title> </head> <body> <div id="point1" STYLE="position:absolute;visibility:visible;"> <table border="0" cellspacing="0" cellpadding="0"> <tr><td><a href="http://www.veryhuo.com"><img src="http://www.veryhuo.com/images/logo.gif" alt="" border="0"></a> </td></tr><tr><td><center><a href="http://www.veryhuo.com"> <font face="Arial" size="2" color="#0000FF">网络编程站</font> </a></center></td></tr></table> </div> <script LANGUAGE="JavaScript"> var XX=20; // X position of the scrolling objects var xstep=1; var delay_time=30; // 设置飘动的速度，数字越大则越慢。 //Begin of the unchangable area, please do not modify this area var YY=0; var ch=0; var oh=0; var yon=0; var ns4=document.layers?1:0 var ie=document.all?1:0 var ns6=document.getElementById&&!document.all?1:0 if(ie){ YY=document.body.clientHeight; point1.style.top=YY; } else if (ns4){ YY=window.innerHeight; document.point1.pageY=YY; document.point1.visibility="hidden"; } else if (ns6){ YY=window.innerHeight document.getElementById('point1').style.top=YY } function reloc1() { if(yon==0){YY=YY-xstep;} else{YY=YY+xstep;} if (ie){ ch=document.body.clientHeight; oh=point1.offsetHeight; } else if (ns4){ ch=window.innerHeight; oh=document.point1.clip.height; } else if (ns6){ ch=window.innerHeight oh=document.getElementById("point1").offsetHeight } if(YY<0){yon=1;YY=0;} if(YY>=(ch-oh)){yon=0;YY=(ch-oh);} if(ie){ point1.style.left=XX; point1.style.top=YY+document.body.scrollTop; } else if (ns4){ document.point1.pageX=XX; document.point1.pageY=YY+window.pageYOffset; } else if (ns6){ document.getElementById("point1").style.left=XX document.getElementById("point1").style.top=YY+window.pageYOffset } } function onad() { if(ns4) document.point1.visibility="visible"; loopfunc(); } function loopfunc() { reloc1(); setTimeout('loopfunc()',delay_time); } if (ie||ns4||ns6) window.onload=onad </script> </body> </html><div style="text-align:center;margin:30px 0 0 0;"><hr style="color:#999;height:1px;">如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></div>
提示：可修改后代码再运行!　

（编辑：许昌站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

JavaScript实现图片上下飘动 可设置浮动速度

JavaScript实现图片上下飘动可设置浮动速度