Heim >Web-Frontend >js-Tutorial >图片从右至左滚动JS_图象特效

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

PHP中文网
PHP中文网Original
2016-05-16 19:21:511084Durchsuche

前几天工作时遇到的一问题,不会写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>
Stellungnahme:
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