新闻列表单行多行简洁向上滚动js效果

代码2015-06-244,923 人已阅来源:网络

常用的新闻列表单行滚动js效果,也可用作多行滚动js效果,超简洁的Js特效。

在本例中如果需要单行滚动,只需要把css中#div1的值改为18即可。

注:经测试兼容Ie6、7、8,FF以及谷歌浏览器!

运行代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>新闻列表单行滚动js效果和多行滚动js效果,超简洁</title>
<style>
a{display:block;line-height:18px;text-decoration:none;color:#f00;font-family:Arial;font-size:12px;}
a:hover{text-decoration:underline;}
.shell{width:500px; }
#div1{height:72px;overflow:hidden;}
</style>
</head>
<body>
<div class="shell">
	<div id="div1">
	  <a href="https://aihongxin.com">新闻列表单行滚动js效果和多行滚动js效果</a>
	  <a href="https://aihongxin.com">新闻列表单行滚动js效果和多行滚动js效果</a>
	  <a href="https://aihongxin.com">新闻列表单行滚动js效果和多行滚动js效果</a>
	  <a href="https://aihongxin.com">新闻列表单行滚动js效果和多行滚动js效果</a>
	  <a href="https://aihongxin.com">新闻列表单行滚动js效果和多行滚动js效果</a>
	  <a href="https://aihongxin.com">新闻列表单行滚动js效果和多行滚动js效果</a>
	  <a href="https://aihongxin.com">新闻列表单行滚动js效果和多行滚动js效果</a>
	  <a href="https://aihongxin.com">新闻列表单行滚动js效果和多行滚动js效果</a>
	  <a href="https://aihongxin.com">新闻列表单行滚动js效果和多行滚动js效果</a>
	</div>
<div>
<p>修改说明:#div1里的高度(72px)即是你需要显示的行数<br/>
js里的18即是要滚动的行高;1500即是每次滚动所需要的时间,越大则速度越慢!
<a href="http://www.tongjunjie.com/js">web前端资源网</a>注!<p/>
</body>
<script>
var c,_=Function;
with(o=document.getElementById("div1")){ innerHTML+=innerHTML; onmouseover=_("c=1"); onmouseout=_("c=0");}
(F=_("if(#%18||!c)#++,#%=o.scrollHeight>>1;setTimeout(F,#%18?10:1500);".replace(/#/g,"o.scrollTop")))();
</script>
</html>