首页 > 代码库 > JS水平移动图片
JS水平移动图片
横向:
<div id=demo style=
"overflow:hidden;width:200px;border:2px solid #e0e0e0;padding:2px;"
onmouseover=
"stopscroll();"
onmouseout=
"doscroll()"
>
<div id=
"demo1"
style=
"white-space:nowrap;padding:0;"
>
<a href=http://www.mamicode.com/
"javascript:alert(‘发表新贴‘);"
><img src=http://www.mamicode.com/
"图片URL"
height=20 width=104
border=0></a>
<a href=http://www.mamicode.com/
"javascript:alert(‘发表回复‘);"
><img src=http://www.mamicode.com/
"图片URL"
height=20 width=104
border=0></a>
</div>
</div>
<!--滚动的javascript-->
<script>
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>
<!--滚动的javascript结束-->
纵向:
<div id=
"demo"
style=
"height:110px; overflow:hidden "
>
<div id=
"demo1"
>
<a href=http://www.mamicode.com/
"javascript:alert(‘发表新贴‘);"
><img src=http://www.mamicode.com/
"图片URL"
height=20 width=104
border=0></a>
<a href=http://www.mamicode.com/
"javascript:alert(‘发表回复‘);"
><img src=http://www.mamicode.com/
"图片URL"
height=20 width=104
border=0></a>
</div><div id=
"demo2"
></div>
<!--滚动的javascript-->
<script>
var
speed=100
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>
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。