实用资源文字列表向上平滑滚动效果实现方法

文字列表向上平滑滚动效果实现方法

这个文字列表向上滚动的效果可用于企业网站的新闻或公告栏,具有无缝平滑滚动自动循环的特点,当鼠标指向列表时自动暂停滚动,使用方法如下:

head部分引入相应的CSS和JS文件(需要jquery库):

<style>
ul,li {margin:0;padding:0;}
.myscroll {background-color:#fff;width:350px;height:260px;margin:40px;border:5px solid #444;line-height:30px;font-size:14px;overflow:hidden;}
.myscroll li {width:300px;height:30px;margin-left:25px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.myscroll a {color:#333;text-decoration:none;}
</style>
<script src="https://cdn.bootcss.com/jquery/1.8.3/jquery.min.js"></script>
<script src="js/scroll.js"></script>
<script>
$(function(){
 $('.myscroll').myScroll({
  speed:45, //数值越大,速度越慢
  rowHeight:30 //li的高度,与CSS中设置为一致
 });
});
</script>

实际应用中可以根据项目实际需要更改CSS中关于尺寸或边距的定义,在上面引入的js部分代码中可以通过speed修改滚动的速度,rowheight表示列表项的高度,注意设置为CSS中li的高度值。

body部分很简单,只需将列表ul放在class为myscroll的容器中即可:

<div class="myscroll">
<ul>
 <li><a href="#">CSS3给元素框添加阴影box-shadow属性</a></li>
 <li><a href="#">CSS制作情人节爱心图案的简单步骤</a></li>
 <li><a href="#">手机版网站移动适配经验技巧总结</a></li>
 <li>……</li>
</ul>
</div>

预览效果 下载地址

站长Colin Gao,85后自由职业者,爱钻研,爱学习网页设计。建立本站的目的是整理学习笔记,分享学习经验,认识更多的朋友。感谢您阅读本站的文章,部分内容参考了网上的一些教程,但我会尽量根据自己的理解写更多原创的东西,本站网址如下,欢迎转载:
如果方便的话,转载请注明来自:http://www.cssaaa.com/down/132.html