利用jQuery无缝滚动插件liMarquee实现图片(链接)和文字(链接)向右无缝滚动(兼容ie7+)
像新闻类的版块经常要求一条条的新闻滚动出现，要实现这种效果，可以使用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 lang="en">
<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>
利用jQuery无缝滚动插件liMarquee实现图片(链接)和文字(链接)向右无缝滚动(兼容ie7+)的更多相关文章
- 基于MVC4+EasyUI的Web开发框架经验总结（1）-利用jQuery Tags Input 插件显示选择记录
最近花了不少时间在重构和进一步提炼我的Web开发框架上,力求在用户体验和界面设计方面,和Winform开发框架保持一致,而在Web上,我主要采用EasyUI的前端界面处理技术,走MVC的技术路线,在重 ...
- （转）基于MVC4+EasyUI的Web开发框架经验总结（1）-利用jQuery Tags Input 插件显示选择记录
http://www.cnblogs.com/wuhuacong/p/3667703.html 最近花了不少时间在重构和进一步提炼我的Web开发框架上,力求在用户体验和界面设计方面,和Winform开 ...
- 利用jquery的imgAreaSelect插件实现图片裁剪示例
http://www.cnblogs.com/mizzle/archive/2011/10/13/2209891.html 将用户上传的图片进行裁剪再保存是现在web2.0应用中常常处理的工作,现在借 ...
- jQuery 人脸识别插件，支持图片和视频
jQuery Face Detection 是一款人脸检测插件,能够检测到图片,视频和画布中的人脸坐标.它跟踪人脸并输出人脸模型的坐标位置为一个数组.我们相信,面部识别技术能够给我们的 Web 应用带 ...
- jQuery hover事件鼠标滑过图片半透明标题文字滑动显示隐藏
1.效果及功能说明 hover事件制作产品图片鼠标滑过图片半透明,标题文字从左到右滑动动画移动显示隐藏 2.实现原理 首先把效果都隐藏,然后定义一个伪类来触发所有的效果,接下来当触发伪类后会有一个遍历 ...
- 利用DOM的方式点击切换图片及修改文字
本案例主要学习理解,用到的几个DOM方法 01.getAttribute()方法,获取元素的属性值 02.setAttribute('src',source) 方法,用后边的值修改前边这个元素的属性值 ...
- liMarquee – jQuery无缝滚动插件（制作跑马灯效果）
liMarquee 是一款基于 jQuery 的无缝滚动插件,类似于 HTML 的 marquee 标签,但比 marquee 更强大.它可以应用于任何 Web 元素,包括文字.图像.表格.表单等元素 ...
- jquery.fullPage.js全屏滚动插件教程演示
css部分(此处需要导入jquery.fullPage.css) <style> .section { text-align: center; font: 50px "Micro ...
- 分享10款常用的jQuery焦点图插件
爱编程一直在收集整理编程相关的知识和解决方案,今天小编为大家带来10款非常常用的jquery焦点图插件. 1.jQuery可自动播放动画的焦点图插件 之前我们已经分享过很多非常实用的jQuery焦点图 ...
随机推荐
- 【BZOJ1060】[ZJOI2007] 时态同步（树形DP）
点此看题面 大致题意: 给你一棵带权树,每次使用道具可以将某条边的边权加\(1\),问你至少需要使用多少次道具,才能使每个叶子节点到根节点的距离相等. 贪心的思想 首先,我们应该先有一个贪心的思想. ...
- 2018.5.14 XML文档类型定义----DTD
1.DTD概述 一个完全意义上的XML文件不仅仅是Well-fromed(格式良好的),而且还应该是使用了一些自定义的标记ValidatingXMl(有效的)文档也就是说他必须遵守文档类型的定义中已声 ...
- 分布式版本控制系统git
最近看到这篇文章,简洁易懂,特摘抄至https://www.cnblogs.com/bgwhite/p/9403233.html 供大家提供参考. git可以说是世界上最先进的版本控制系统,大多语句的 ...
- python_53_函数补充
def test1(x,y=2): print(x,y) test1(1) test1(1,3) test1(1,y=4) #默认参数特点:调用函数的时候,默认参数非必须传递,默认参数放在后边 #用途 ...
- TensorFlow 内置重要函数解析
概要 本部分介绍一些在 TensorFlow 中内置的重要函数,了解这些函数有时候更加方便我们进行数据的处理或者构建神经网络. 这些函数如下: tf.one_hot() tf.ra ...
- 最近面试前端岗位，汇总了一下前端面试题（JS+CSS）
JavaScript 运行机制 1. 单线程(用途决定,需要与用户互动以及操作DOM) 2. 分同步任务(主线程)与异步任务(任务队列),只有任务队列通知主线程某个任务可以执行了,该 任务才会进入主线 ...
- Oracle小技巧_不同表空间不同用户导入导出数据dmp
[博主注:数据库方面 ITPUB网站及博客内容非常丰富] 转载来源ITPUB 博客 经常有人会问:原来的数据在USERS表空间里面,我想把它IMP进APP表空间,我已经修改了目的用户的默认表空间, ...
- 通过Jquery获取RadioButtonList选中值
推荐 使用第二种,第一种有时候不起作用 第一种:通过find方法 获取RadioButtonList所选中的值 <script type="text/javascript"& ...
- Tomcat：javax.management.InstanceNotFoundException: com.alibaba.druid:type=DruidDataSourceStat异常
问题: 在关闭tomcat时: Tomat报出一下异常:ERROR [com.alibaba.druid.stat.DruidDataSourceStatManager] – unregister m ...
- Python 正则表达式 search vs match
search()和match()函数都是正则表达式中的匹配函数,二者有何区别呢? 1.match()从string的开始位置进行正则匹配,即从0位置开始匹配,若匹配上则返回一个match对象,否则返回 ...