当前位置：Gxlcms > JavaScript > 图片从右至左滚动JS

图片从右至左滚动JS

时间：2021-07-01 10:21:17 帮助过：6人阅读

前几天工作时遇到的一问题，不会写JS，请大猪来帮我写的，谢谢大猪了。
图片从右至左滚动JS代码：
1、直线滚动

<img src="https://img.gxlcms.com/https://img.gxlcms.com//Uploads-s//Uploads-s/new/2019-09-17-201917/holiday06_2.gif" border="0" />  
  <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>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

2、波浪滚动

[X]  
<img width=150px src="https://img.gxlcms.com/https://img.gxlcms.com//Uploads-s//Uploads-s/new/2019-09-17-201917/holiday06_2.gif" border="0" />

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>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

图片从右至左滚动JS

人气教程排行