我要啦免费统计

微蓝领域

我的学习档案馆
posts - 19, comments - 57, trackbacks - 0, articles - 57
  BlogJava :: 首页 :: 新随笔 :: 联系 :: 聚合  :: 管理

图片的无缝滚动

Posted on 2008-08-05 14:03 hilor 阅读(323) 评论(0)  编辑  收藏 所属分类: common
一则很不错的图片滚动代码:

向右滚动:
 <div id=demo style=overflow:hidden;height:35;width:200;background:#214984;color:#ffffff>
 <table align=left cellpadding=0 cellspace=0 border=0><tr><td id=demo1 valign=top>
 <img src="http://www.songzi.org/blog/styles/default/sz_blog.gif">
 <img src="http://www.songzi.org/forum/images/powered.gif">
 <img src="http://iedoo.net/logo/mylogo.gif"></td>
<td id=demo2 valign=top></td></tr></table></div>
 <script>
 var speed=30
 demo2.innerHTML=demo1.innerHTML
 demo.scrollLeft=demo.scrollWidth
 function Marquee(){
 if(demo.scrollLeft<=0)
 demo.scrollLeft+=demo2.offsetWidth
 else{
 demo.scrollLeft--
 }
 }
 var MyMar=setInterval(Marquee,speed)
 demo.onmouseover=function() {clearInterval(MyMar)}
 demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
 </script>

向左滚动:
 <div id=demo style=overflow:hidden;height:35;width:200;background:#214984;color:#ffffff>
 <table align=left cellpadding=0 cellspace=0 border=0><tr><td id=demo1 valign=top>
 <img src="http://www.songzi.org/blog/styles/default/sz_blog.gif">
 <img src="http://www.songzi.org/forum/images/powered.gif">
 <img src="http://iedoo.net/logo/mylogo.gif"></td>
<td id=demo2 valign=top></td></tr></table></div>
  <script>
var speed=30
demo2.innerHTML=demo1.innerHTML
function Marquee(){
if(demo2.offsetWidth-demo.scrollLeft<=0)
demo.scrollLeft-=demo1.offsetWidth
else{
demo.scrollLeft++
}
}
var MyMar=setInterval(Marquee,speed)
demo.onmouseover=function() {clearInterval(MyMar)}
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
</script>

向上滚动:
 <div id=demo style=overflow:hidden;height:100;width:90;background:#214984;color:#ffffff>
 <div id=demo1>
 <img src="http://www.songzi.org/forum/images/powered.gif">
 <img src="http://www.songzi.org/blog/styles/default/sz_blog.gif">
 <img src="http://iedoo.net/logo/mylogo.gif">
 </div>
 <div id=demo2></div>
 </div>
<script>
 var speed=30
 demo2.innerHTML=demo1.innerHTML
 function Marquee(){
 if(demo2.offsetTop-demo.scrollTop<=0)
 demo.scrollTop-=demo1.offsetHeight
 else{
 demo.scrollTop++
 }
 }
 var MyMar=setInterval(Marquee,speed)
 demo.onmouseover=function() {clearInterval(MyMar)}
 demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
 </script>

向下滚动:
<div id=demo style=overflow:hidden;height:100;width:90;background:#214984;color:#ffffff>
 <div id=demo1>
 <img src="http://www.songzi.org/forum/images/powered.gif">
 <img src="http://www.songzi.org/blog/styles/default/sz_blog.gif">
 <img src="http://iedoo.net/logo/mylogo.gif">
 </div>
 <div id=demo2></div>
 </div>
 <script>
 var speed=30
 demo2.innerHTML=demo1.innerHTML
 demo.scrollTop=demo.scrollHeight
 function Marquee(){
 if(demo1.offsetTop-demo.scrollTop>=0)
 demo.scrollTop+=demo2.offsetHeight
 else{
 demo.scrollTop--
 }
 }
 var MyMar=setInterval(Marquee,speed)
 demo.onmouseover=function() {clearInterval(MyMar)}
 demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
 </script>

只有注册用户登录后才能发表评论。


网站导航: