ホームページ >ウェブフロントエンド >jsチュートリアル >图片从右至左滚动JS_图象特效
前几天工作时遇到的一问题,不会写JS,请大猪来帮我写的,谢谢大猪了。
图片从右至左滚动JS代码:
1、直线滚动
<div id="ad" style="position:absolute;width:150px;left:800;top:300"><a href=" " target="_blank" style="width:100%;height:100%;"><img src="http://www.google.com/intl/zh-CN/logos/holiday06_2.gif" border="0" /></a></div> <script defer="defer"> var x =800 var y=300 var yp=35 var yn=0 var yin=true var xin = true var step = 1 var delay = 30 var obj=document.getElementById("ad") function floatAD() { var L=-obj.offsetWidth; var R= document.body.clientWidth-obj.offsetWidth obj.style.left = x + document.body.scrollLeft x = x + step*(xin?1:-1) if (x < L) { xin = true; x = R} if (x > R){ xin = false; x = R} var T=0 var B = document.body.clientHeight-obj.offsetHeight obj.style.top =y+ yn+ document.body.scrollTop if (yin){ yn=yn+1/Math.sin(1);} else{yn=yn-1/Math.sin(1);} if (yn >yp) { yin = false } if (yn <-yp) { yin = true } } var itl= setInterval("floatAD()", delay) obj.onmouseover=function(){clearInterval(itl)} obj.onmouseout=function(){itl=setInterval("floatAD()", delay)} </script>
2、波浪滚动
<div id="ad" style="position:absolute;width:150px;left:800;top:300"> <div style="position:relative;red;right:0px;top:0px;text-align:right;cursor:pointer" onClick=CloseAD()>[X]</div> <a href="" target="_blank" style="position:relative;left:0px;top:0px"><img width=150px src="http://www.google.com/intl/zh-CN/logos/holiday06_2.gif" border="0" /></a> </div> <script defer="defer"> var x = 800 var y=300 var yp=35 var yn=0 var yin=true var xin = true var step = 1 var delay =20 var obj=document.getElementById("ad") var itl function CloseAD(){ clearInterval(itl); obj.style.display="none"; } function floatAD() { var L=-obj.offsetWidth; var R= document.body.clientWidth-obj.offsetWidth obj.style.left = x + document.body.scrollLeft x = x + step*(xin?1:-1) if (x < L) { xin = true; x = R} if (x > R){ xin = false; x = R} var T=0 obj.style.top =y+ yn+ document.body.scrollTop if (x%2==0){ if (yin){ yn=yn+1/Math.sin(1);} else{yn=yn-1/Math.sin(1);} if (yn >yp) { yin = false } if (yn <-yp) { yin = true } } } itl= setInterval("floatAD()", delay) obj.onmouseover=function(){clearInterval(itl)} obj.onmouseout=function(){itl=setInterval("floatAD()", delay)} </script>