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

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>