页面导航：首页 → 网络编程 → JavaScript → 网页特效 → 图象特效 → 正文内容

图片从右至左滚动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>

[Ctrl+A 全选提示:你可先修改部分代码,再按运行]

2、波浪滚动

点击运行可以看到效果:

</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>

[Ctrl+A 全选提示:你可先修改部分代码,再按运行]

Tags：图片从右至左滚动JS

浏览次数：载入中... 打印本文关闭本文返回首页

0

顶一下

上一篇文章：JS实现全景图效果360度旋转
下一篇文章：Javascript+CSS实现Flash动态新闻效果（pp原创）

·在百度中搜索关于“图片从右至左滚动JS相关内容

文章评论

共有位脚本之家网友发表了评论我来说两句

图片从右至左滚动JS

文章评论

同类文章

最近更新

热点排行

图片从右至左滚动JS

文章评论

同 类 文 章

最 近 更 新

热 点 排 行

同类文章

最近更新

热点排行