图片滑动代码

最新推荐文章于 2024-04-27 15:07:47 发布

转载最新推荐文章于 2024-04-27 15:07:47 发布 · 1.5k 阅读

标签

#javascript #function #border #div

收录于

asp 专栏收录该内容

81 篇文章

订阅专栏

本文介绍了一种使用JavaScript实现的网页元素滚动效果的方法。通过设置元素的滚动速度和触发条件，使得网页上的特定元素能够在固定区域内平滑滚动，增强用户体验。文章提供了完整的HTML和JavaScript代码示例。

<body>
<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="javascript:alert('发表新贴');"><img src="http://www.baidu.com/img/logo-yy.gif" height=20 width=104

border=0></a>
<a href="javascript:alert('发表回复');"><img src="http://www.google.cn/intl/zh-CN/images/logo_cn.gif" height=20 width=104

border=0></a>
</div>
</div>

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