利用jQuery无缝滚动插件liMarquee实现图片，链接和文字
像新闻类的版块经常要求一条条的新闻滚动出现，要实现这种效果，可以使用jQuery无缝滚动插件liMarquee。
注意：
1. 它的兼容性是IE7+，及现代浏览器。
2. 引用的jquery的版本最好是在1.9以上。
问题：
在实现突破链接滚动时，经常会遇到ul的部分li元素会换行
原因：
原因是li元素设置了margin-left或margin-right，或者是li里面的a标签设置了margin-left或margin-right，导致ul的宽度小于其所有子元素的宽度、margin、padding的和。
解决方法：
在js中手动设置ul的width即可。
下面代码包括文字和图片链接的滚动：
<!doctype html>
<html >
<head>
<meta charset="UTF-8">
<title>利用jQuery无缝滚动插件liMarquee实现图片(链接)和文字(链接)向右无缝滚动(兼容ie7+)</title>
<style>
*{
margin: 0;
padding: 0;
}
/*Plugin CSS*/
.str_wrap {
overflow:hidden;
*zoom:1;
width:100%;
font-size:12px;
line-height:16px;
position:relative;
-moz-user-select: none;
-khtml-user-select: none;
user-select: none;
background:#f4f4f4;
white-space:nowrap;
}
.str_move {
white-space:nowrap;
position:absolute;
top:0;
left:0;
cursor:move;
}
.str_move_clone {
display:inline-block;
*display:inline;
*zoom:1;
vertical-align:top;
position:absolute;
left:100%;
top:0;
}
.str_vertical .str_move_clone {
left:0;
top:100%;
}
.str_down .str_move_clone {
left:0;
bottom:100%;
}
.str_vertical .str_move,
.str_down .str_move {
white-space:normal;
width:100%;
}
.str_static .str_move,
.no_drag .str_move,
.noStop .str_move{
cursor:inherit;
}
.str_wrap img {
max-width:none !important;
}
/*图片*/
.img-main{
width: 1000px;
height: 168px;
margin: 30px auto 0;
font-size: 0;
padding: 20px 0;
background-color: #f7f7f7;
}
.img-list{
width: 1000px !important;
height: 166px;
margin: 0 auto;
background-color: #f7f7f7;
}
.img-list a{
display: inline-block;
width: 120px;
height: 164px;
margin-left: 24px;
border: 1px solid #d7d6d6;
}
/*文字*/
.news-list{
width: 488px;
height: 210px;
margin: 30px auto 0;
border: 1px solid #e7e6e6;
}
.news-list ul{
line-height: 40px;
padding-left: 5px;
background-color: #f4f4f4;
}
.news-list li a{
display: block;
overflow: hidden;
width: 448px;
padding-left: 24px;
font-size: 14px;
color: #595858;
text-decoration: none;
}
.news-list li a:hover{
text-decoration: underline;
}
</style>
</head>
<body>
<!--图片链接-->
<div class="img-main">
<div class="img-list">
<a href=""><img src="./img/photo-1.png" alt=""></a>
<a href=""><img src="./img/photo-2.png" alt=""></a>
<a href=""><img src="./img/photo-3.png" alt=""></a>
<a href=""><img src="./img/photo-4.png" alt=""></a>
<a href=""><img src="./img/photo-5.png" alt=""></a>
<a href=""><img src="./img/photo-2.png" alt=""></a>
<a href=""><img src="./img/photo-1.png" alt=""></a>
<a href=""><img src="./img/photo-2.png" alt=""></a>
<a href=""><img src="./img/photo-3.png" alt=""></a>
</div>
</div>
<!--文字链接-->
<div class="news-list">
<ul>
<li><a href="" title=""><span class="text">网站内容添加的教学视频</span><span class="date">[07-23]</span></a></li>
<li><a href="" title="国家级精品资源共享课建设要求"><span class="text">国家级精品资源共享课建设要求</span><span class="date">[07-21]</span></a></li>
<li><a href="" title="2012年国家级精品资源共享课评审"><span class="text">2012年国家级精品资源共享课评审</span><span class="date">[07-21]</span></a></li>
<li><a href=""><span class="text">关于制订课程标准的原则及管理办</span><span class="date">[07-21]</span></a></li>
<li><a href=""><span class="text">河北旅游职业学院课程建设规划及</span><span class="date">[07-21]</span></a></li>
<li><a href=""><span class="text">网站内容添加的教学视频</span><span class="date">[07-20]</span></a></li>
<li><a href=""><span class="text">网站内容添加的教学视频</span><span class="date">[07-20]</span></a></li>
<li><a href=""><span class="text">网站内容添加的教学视频</span><span class="date">[07-20]</span></a></li>
<li><a href="" title=""><span class="text">网站内容添加的教学视频</span><span class="date">[07-23]</span></a></li>
</ul>
</div>
<script src="./js/jquery-1.11.3.min.js"></script>
<script src="./js/jquery.liMarquee.js"></script>
<script>
$(function(){
//图片向右滚动
$(".img-list").liMarquee({
direction:'right',
scrollamount:30
});
//文字向上滚动
$(".news-list").liMarquee({
direction:'up',
scrollamount:30
})
})
</script>
</body>
</html>- 上一篇 »图片无缝滚动，div+css
- 下一篇 »vue 无缝滚动文字