Prototype插件之无限循环滚动新闻

最新推荐文章于 2022-04-09 00:00:00 发布

原创最新推荐文章于 2022-04-09 00:00:00 发布 · 1k 阅读

·

0

·

CC 4.0 BY-SA版权

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

文章标签：

这是一个使用 Prototype.js 实现的新闻滚动效果示例。该效果能够自动循环滚动文本，并且当鼠标悬停在滚动区域上时会暂停滚动。示例中包含了完整的 HTML 和 JavaScript 代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<script type="text/javascript" src="prototype.js"></script>

<title>Prototype.js news scroller</title>

</head>

<body>

<style>

h1 {

font-family:Arial, Helvetica, sans-serif;

font-size:14pt;

color:#000000

}

h2 {

font-family:Arial, Helvetica, sans-serif;

font-size:12pt;

color:#000000

}

body {

font-family:Arial, Helvetica, sans-serif;

font-size:10pt;

color:#000000

}

.highlights {

width:400px;

font-family:Arial, Helvetica, sans-serif;

font-size:9pt;

color:#49176e;

background-color:#ffffff;

overflow-x:hidden;

overflow:hidden;

margin:0px;

border:1px solid #000000;

}

</style>

<h1>Prototype.js news scroller</h1>

<h2>by James MacFarlane</h2>

Wraps automaticaly. Stops on mouseover. View source to grab the example.

<div style="height:250px" onmouseover='stopScroll=1' onmouseout='stopScroll=0;scrollMe()' id="highlights" class="highlights">

• start<br />

• Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

<br />• Suspendisse at felis.

<br />• Etiam ullamcorper.

<br />• Aenean fringilla, eros eu dapibus tristique, erat lacus vestibulum metus, nec pharetra leo ante et quam.

<br />• Nunc ac mi molestie justo placerat laoreet.

<br />• Morbi eget dolor.

<br />• Curabitur pretium, mi quis iaculis molestie, dolor ligula sagittis orci, at sodales quam dolor quis sem. Suspendisse vitae risus.

<br />• Maecenas vestibulum dolor vel augue.

<br />• Sed purus. Ut nisi massa, vestibulum id, lobortis eget, aliquet eu, enim.

<br />• Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos.

<br />• Suspendisse scelerisque dui.

<br />• Donec viverra, nisl eget fringilla rutrum,

<br />• lorem odio nonummy enim, quis pellentesque mauris ante et diam.

<br />• Suspendisse potenti. Donec aliquet.

<br />• Maecenas accumsan mattis nibh.

<br />• end<br />

</div>

<script language=javascript>

//var boxHeight = $('highlights').style.height.replace('px','')

var repeatHeight = $('highlights').scrollHeight //get the current height so we know when to wrap

$('highlights').innerHTML = $('highlights').innerHTML + $('highlights').innerHTML //add a second copy so we can scroll down to the wrap point

var stopScroll = 0

var x

function scrollMe() {

clearTimeout(x)

if(stopScroll==1) {

return

}

$('highlights').scrollTop=$('highlights').scrollTop+1

if($('highlights').scrollTop<=repeatHeight) {

// keep on scrolin'

x = setTimeout("scrollMe()",40)

}

else { //we have hit the wrap point

$('highlights').scrollTop=0

x = setTimeout("scrollMe()",40)

}

}

x = setTimeout("scrollMe()",1000)

// start scrolling after one second

</script>

</body>

</html>

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。