分享好友教程首页教程搜索频道列表

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

2018-09-02 18:508920
+关注32
核心提示:常用的新闻列表单行滚动js效果,也可用作多行滚动js效果,超简洁的Js特效。在本例...

常用的新闻列表单行滚动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="http://www.tonjay.com">新闻列表单行滚动js效果和多行滚动js效果</a>
	  <a href="http://www.tonjay.com">新闻列表单行滚动js效果和多行滚动js效果</a>
	  <a href="http://www.tonjay.com">新闻列表单行滚动js效果和多行滚动js效果</a>
	  <a href="http://www.tonjay.com">新闻列表单行滚动js效果和多行滚动js效果</a>
	  <a href="http://www.tonjay.com">新闻列表单行滚动js效果和多行滚动js效果</a>
	  <a href="http://www.tonjay.com">新闻列表单行滚动js效果和多行滚动js效果</a>
	  <a href="http://www.tonjay.com">新闻列表单行滚动js效果和多行滚动js效果</a>
	  <a href="http://www.tonjay.com">新闻列表单行滚动js效果和多行滚动js效果</a>
	  <a href="http://www.tonjay.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;_("c=1");_("c=0");}
(F=_("if(#%18||!c)#++,#%=o.scrollHeight>>1;setTimeout(F,#%18?10:1500);".replace(/#/g,"o.scrollTop")))();
</script>
</html>


整理员:小黑
免责声明:凡注明来源本网的所有作品,均为本网合法拥有版权或有权使用的作品,欢迎转载,注明出处。非本网作品均来自互联网,转载目的在于传递更多信息,并不代表本网赞同其观点和对其真实性负责。
生成海报
最新其他更多

纯CSS实现多标签自动显示超出数量的思路详解

    有多个宽度不同的标签水平排列,当外层宽度不足时,会自动提示超出的数量,这篇文章主要介绍了纯 CSS 实现多标签自动显示超出数量的思路详解,需要的朋友可以参考下

小黑 CSS相关2026-07-20

使用CSS实现渐变圆角边框的效果

    这篇文章给大家介绍了如何使用CSS实现渐变圆角边框的效果,有没有发现在现如今的网站应用中,我们大量的使用到这类场景,在解决这类问题时,我们利用了css的mask与mask-composite属性

小黑 CSS相关2026-07-20

css3收货地址平行四边形的线条样式示例代码

    这篇文章主要介绍了css 收货地址平行四边形的线条样式示例代码,代码简单易懂,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

小黑 CSS相关2026-07-20

CSS实现空心尖角的示例代码

网络 CSS相关2026-07-20

CSS3用border写 空心三角箭头 (两种写法)

    之前一直在寻找这种空心三角箭头, 终于知道了原理! 自己记录一下,顺便分享给之前跟我一样想要的撸友们~

小黑 CSS相关2026-07-20

下一篇
我来说两句
抢沙发