伊人国际自留地
欢迎来到伊人国际自留地，这里将收集我们在工作过程中发现的网页素材 特效代码 工作经验等
Index
Search
TagCloud
GuestBook
Admin
武汉网站建设
Jul
28
无缝滚动
网页特效
0 comments
<html> <head> <title>无缝滚动！</title> <style type="text/css"> img{ border:0; height:100px; width:150px; } td img{ margin:0 10px; } </style> </head> <body> <!-- 纵向向无缝滚动--> <div id="demo" style="overflow:hidden;height:350px;width:200px"> <div id="demo1"> <a href="#" target="_blank"><img src="picture/gundong_01.jpg"></a><p> <a href="#" target="_blank"><img src="picture/gundong_02.jpg"></a><p> <a href="#" target="_blank"><img src="picture/gundong_01.jpg"></a><p> <a href="#" target="_blank"><img src="picture/gundong_02.jpg"></a><p> <a href="#" target="_blank"><img src="picture/gundong_01.jpg"></a><p> <a href="#" target="_blank"><img src="picture/gundong_02.jpg"></a><p> <a href="#" target="_blank"><img src="picture/gundong_01.jpg"></a><p> <a href="#" target="_blank"><img src="picture/gundong_02.jpg"></a><p> <a href="#" target="_blank"><img src="picture/gundong_01.jpg"></a><p> <a href="#" target="_blank"><img src="picture/gundong_02.jpg"></a><p> </div> <div id="demo2"> </div> </div> <script> var speed=40; var demo2=document.getElementById("demo2"); var demo1=document.getElementById("demo1"); var demo=document.getElementById("demo"); 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 style="margin-top:20px;"> <div id="scroll_div" style="overflow: hidden; WIDTH: 778px;" align=center> <table border="0" cellpadding="0" cellspacing="0"> <tr> <td id="scroll_begin"> <a href="#"><img src="picture/gundong_01.jpg" border=0></a><a href="#"><img src="picture/gundong_02.jpg" border=0></a><a href="#"><img src="picture/gundong_01.jpg" border=0></a><a href="#"><img src="picture/gundong_02.jpg" border=0></a><a href="#"><img src="picture/gundong_01.jpg" border=0></a><a href="#"><img src="picture/gundong_02.jpg" border=0></a><a href="#"><img src="picture/gundong_01.jpg" border=0></a><a href="#"><img src="picture/gundong_02.jpg" border=0></a></td> <td id="scroll_end"></td> </tr> </table> </div></div> <script> var speed1=40 var scroll_end = document.getElementById("scroll_end"); var scroll_div = document.getElementById("scroll_div"); scroll_end.innerHTML=scroll_begin.innerHTML function Marquee1(){ if(scroll_end.offsetWidth-scroll_div.scrollLeft<=0) scroll_div.scrollLeft-=scroll_begin.offsetWidth else{ scroll_div.scrollLeft++ } } var MyMar1=setInterval(Marquee1,speed1) scroll_div.onmouseover=function() {clearInterval(MyMar1)} scroll_div.onmouseout=function() {MyMar1=setInterval(Marquee1,speed1)} </script> </body> </html>
提示：您可以先修改部分代码再运行
to "无缝滚动"
Leave a Reply
名称(*)
邮箱
网站链接
正文(*)(留言最长字数:1000)
记住我,下次回复时不用重新输入个人信息
网站分类
文章归档
友情链接
Powered By
Z-Blog
,
Theme
&
Icons
by
N.Design Studio
.
Entries RSS
Comments RSS
Login
Copyright 伊人国际自留地 Your blog.35lady.net Some Rights Reserved.
Recent Comments