Home > Web Front-end > JS Tutorial > Image scrolling from right to left JS_Image special effects

Image scrolling from right to left JS_Image special effects

PHP中文网
Release: 2016-05-16 19:21:51
Original
1108 people have browsed it

I encountered a problem at work a few days ago. I can’t write JS. I asked Dazhu to help me write it. Thank you Dazhu.
JS code for scrolling pictures from right to left:
1. Straight line scrolling

<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>
Copy after login

2. Wave scrolling

<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>
Copy after login
Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template