首頁 >web前端 >js教程 >图片从右至左滚动JS_图象特效

图片从右至左滚动JS_图象特效

PHP中文网
PHP中文网原創
2016-05-16 19:21:511084瀏覽

前几天工作时遇到的一问题,不会写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>
陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn