无缝滚动效果 js可以实现
来源：互联网 发布：淘宝客服是在家上班吗 编辑：程序博客网 时间：2024/05/06 05:59
这是代码 横向和纵向都有
纵向
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title><a href="http://www.tmxhx.com/default.asp?cateID=6" mce_href="http://www.tmxhx.com/default.asp?cateID=6" target="_blank">JS</a>多张图片纵向无缝滚动</title>
</head>
<body>
<div id="demo" style="height:600px; width:260px;overflow:hidden ">
<div id="demo1">
<a href="default.asp" mce_href="default.asp"><img src="work2007/images/1_222.jpg" mce_src="work2007/images/1_222.jpg" height=368 width=256
border=0></a>
<a href="default.asp" mce_href="default.asp"><img src="work2007/images/1_222.jpg" mce_src="work2007/images/1_222.jpg" height=368 width=256
border=0></a>
</div><div id="demo2"></div>
<!--滚动的javascript-->
<script type="text/javascript"><!--
var speed=50
demo2.innerHTML=demo1.innerHTML
function Marquees(){
if(demo2.offsetTop-demo.scrollTop<=0)
demo.scrollTop-=demo1.offsetHeight
else{
demo.scrollTop++
}
}
var MyMars=setInterval(Marquees,speed)
demo.onmouseover=function() { clearInterval(MyMars) }
demo.onmouseout=function() { MyMars=setInterval(Marquees,speed) }
zlselect('6');
// --></script><!--滚动的javascript结束-->
</div>
</body>
</html>
横向
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title><a href="http://www.tmxhx.com/default.asp?cateID=6" mce_href="http://www.tmxhx.com/default.asp?cateID=6" target="_blank">JS</a>多张图片横向无缝滚动</title>
</head>
<body>
<div id=demo style="overflow:hidden;width:800px;border:2px solid #e0e0e0;padding:2px;" onmouseover="stopscroll();"
onmouseout="doscroll()">
<div id="demo1" style="white-space:nowrap;padding:0;" mce_style="white-space:nowrap;padding:0;">
<a href="default.asp" mce_href="default.asp"><img src="work2007/images/1_222.jpg" mce_src="work2007/images/1_222.jpg" height=368 width=256
border=0></a>
<a href="default.asp" mce_href="default.asp"><img src="work2007/images/1_222.jpg" mce_src="work2007/images/1_222.jpg" height=368 width=256
border=0></a>
</div>
</div>
<!--滚动的javascript-->
<script type="text/javascript"><!--
var t=demo.scrollWidth
demo1.innerHTML+=demo1.innerHTML
function doMarquee()
{
demo.scrollLeft=demo.scrollLeft<demo.scrollWidth-demo.offsetWidth?demo.scrollLeft+1:t-demo.offsetWidth
}
function doscroll()
{
sc=setInterval(doMarquee,20)
}
function stopscroll()
{
clearInterval(sc)
}
doscroll()
// --></script>
</body>
</html>
纵向
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title><a href="http://www.tmxhx.com/default.asp?cateID=6" mce_href="http://www.tmxhx.com/default.asp?cateID=6" target="_blank">JS</a>多张图片纵向无缝滚动</title>
</head>
<body>
<div id="demo" style="height:600px; width:260px;overflow:hidden ">
<div id="demo1">
<a href="default.asp" mce_href="default.asp"><img src="work2007/images/1_222.jpg" mce_src="work2007/images/1_222.jpg" height=368 width=256
border=0></a>
<a href="default.asp" mce_href="default.asp"><img src="work2007/images/1_222.jpg" mce_src="work2007/images/1_222.jpg" height=368 width=256
border=0></a>
</div><div id="demo2"></div>
<!--滚动的javascript-->
<script type="text/javascript"><!--
var speed=50
demo2.innerHTML=demo1.innerHTML
function Marquees(){
if(demo2.offsetTop-demo.scrollTop<=0)
demo.scrollTop-=demo1.offsetHeight
else{
demo.scrollTop++
}
}
var MyMars=setInterval(Marquees,speed)
demo.onmouseover=function() { clearInterval(MyMars) }
demo.onmouseout=function() { MyMars=setInterval(Marquees,speed) }
zlselect('6');
// --></script><!--滚动的javascript结束-->
</div>
</body>
</html>
横向
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title><a href="http://www.tmxhx.com/default.asp?cateID=6" mce_href="http://www.tmxhx.com/default.asp?cateID=6" target="_blank">JS</a>多张图片横向无缝滚动</title>
</head>
<body>
<div id=demo style="overflow:hidden;width:800px;border:2px solid #e0e0e0;padding:2px;" onmouseover="stopscroll();"
onmouseout="doscroll()">
<div id="demo1" style="white-space:nowrap;padding:0;" mce_style="white-space:nowrap;padding:0;">
<a href="default.asp" mce_href="default.asp"><img src="work2007/images/1_222.jpg" mce_src="work2007/images/1_222.jpg" height=368 width=256
border=0></a>
<a href="default.asp" mce_href="default.asp"><img src="work2007/images/1_222.jpg" mce_src="work2007/images/1_222.jpg" height=368 width=256
border=0></a>
</div>
</div>
<!--滚动的javascript-->
<script type="text/javascript"><!--
var t=demo.scrollWidth
demo1.innerHTML+=demo1.innerHTML
function doMarquee()
{
demo.scrollLeft=demo.scrollLeft<demo.scrollWidth-demo.offsetWidth?demo.scrollLeft+1:t-demo.offsetWidth
}
function doscroll()
{
sc=setInterval(doMarquee,20)
}
function stopscroll()
{
clearInterval(sc)
}
doscroll()
// --></script>
</body>
</html>
- 无缝滚动效果 js可以实现
- js实现无缝滚动效果
- JS实现图片无缝滚动效果
- JS实现图片滚动（无缝、平滑、上下左右滚动）效果
- js实现无缝滚动
- JS实现无缝滚动
- js实现无缝滚动
- js图片无缝滚动效果
- JS横向无缝滚动效果
- 原生Js无缝滚动效果的简单实现
- JS效果 - 无缝滚动/滚动加停顿
- JS实现图片无缝滚动
- 通过js实现无缝滚动
- js 实现图片无缝滚动
- js实现标准无缝滚动
- 原生js实现无缝滚动
- JS实现文字无缝滚动
- 原声js实现无缝滚动
- UNIX环境高级编程 勘误表
- dm365工作笔记20130731
- SQL 截取字符串
- 对指定的表设置只读属性
- python string、dic互转
- 无缝滚动效果 js可以实现
- AWK-BEGIN and END Special Patterns【每日一译】--2013-1-31
- 2013-07-31 UISegment UISlider UIImageView
- android开机自启动
- NSNotificationCenter 通知
- 通过设置注册表使得启动ZWCAD时自动加载.net程序
- 求第一个只出现一次的字符（来源于剑指名企offer）
- Android.mk and Application.mk
- MFC-报磁盘已满错误
