网页特效:文字成行向上滚动,鼠标放2停止滚动!--好空间网络!

正文 /News

网页特效:文字成行向上滚动,鼠标放2停止滚动

2013/3/15 14:6:52 \| 阅3084	来源：好空间网络 [打印] [关闭]

最近在写个项目,需要实现文字成行的向上滚动,有停留时间,当鼠标放上去的时候停止滚动!!

其实这些应该是javascript做的....

看我实际案例!

这里的黄色的小字就是成行向上翻滚,总共可以显示20行

具体请见:http://www.jspkongjian.net/jsp-host-b.htm

好了下面我说下如何实现的

第一步在<head>和 </head>中间增加

<style type="text/css">
<!--
/*顶部滚动秀*/
#scrolllayer {float:left;overflow:hidden;height:36px;padding:0px;width:580px; margin-top:3px;}
#scrollmessage {float:left;text-align:left;width:580px;font-size:12px;font-family: "宋体";}
#scrollmessage ul {list-style:none; padding:0; margin:0;}
#scrollmessage li {line-height:18px;color:#FFFF00;}
#scrollmessage li a{color:#FF6600; text-decoration:none;}
-->
</style>

一行css,,在<body>和</body>中间增加

<div id="scrolllayer">
<div id="scrollmessage">
<ul>
<li><a href="http://www.jspkongjian.net" target="_blank" title="用着不错">用户:zcdnsz 哈哈空间不错,用着很稳定我的域名www.jspkongjian.net大家看看</a></li>
<li>20款简约北欧风格经典样板房</li>
<li><a href="http://www.jspkongjian.net" target="_blank" title="空间很稳定,很喜欢">空间很稳定,很喜欢</a></li>
<li><a href="http://www.jspkongjian.net" target="_blank" title="管理后台很好用,一次就发布成功了">管理后台很好用,一次就发布成功了</a></li>
<li><a href="http://www.jspkongjian.net" target="_blank" title="速度不错,访问飞快,好空间不错!">速度不错,访问飞快,好空间不错!</a></li>
</ul>
</div>
</div>

在 </html>后面增加一段代码,我直接把注释写代码里了,就不用我在一个一个解释了

<script type="text/javascript" language="javascript">
<!--
//以下参数请勿修改
try{
var marqueesHeight = 18; //高度
var stopscroll     = false;
var scrollElem =   document.getElementById("scrolllayer");
with(scrollElem){
style.width     = 580;//宽度
style.height    = marqueesHeight;
style.overflow  = 'hidden';
noWrap          = true;
}
scrollElem.onmouseover = new   Function('stopscroll = true');
scrollElem.onmouseout  = new   Function('stopscroll = false');
var preTop     = 0;
var currentTop = 0;
var stoptime   = 0;
var leftElem =   document.getElementById("scrollmessage");
scrollElem.appendChild(leftElem.cloneNode(true));
init_srolltext();
}catch(e) {}
function init_srolltext(){
scrollElem.scrollTop = 0;
setInterval('scrollUp()', 15); //滚动速度
}
function scrollUp(){
if(stopscroll) return;
currentTop += 1;
if(currentTop == 19) { //滚动距离
stoptime += 1;
currentTop -= 1;
if(stoptime == 220) { //停顿时间
currentTop = 0;
stoptime = 0;
}
}else{
preTop = scrollElem.scrollTop;
scrollElem.scrollTop += 1;
if(preTop == scrollElem.scrollTop){
scrollElem.scrollTop = 0;
scrollElem.scrollTop += 1;
}
}
}
//-->
</script>

把这个保存为a.htm,上传到您的空间访问看看!!是不是有我说的这个效果了...

您的姓名：	(*)
验证码：	(*) 点击更换
您的评论：