利用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焦点图 ...
随机推荐
- 在RichTextBox控件中添加超链接文本
实现效果: 知识运用: RichTextBox控件的AppendText方法 public void AppendText{string textData} //向控件中添加文本内容 和Process ...
- 优化通过redis实现的一个抢红包流程【下】
上一篇文章通过redis实现的抢红包通过测试发现有严重的阻塞的问题,抢到红包的用户很快就能得到反馈,不能抢到红包的用户很久(10秒以上)都无法获得抢红包结果,起主要原因是: 1.用了分布式锁,导致所有 ...
- 干净的架构The Clean Architecture_软件架构系列
本文转载自:https://www.jdon.com/artichect/the-clean-architecture.html ,这个博客站很有历史了,博主经常翻译Github大牛的文章,值得墙裂推 ...
- 升级win10后电脑经常自动重启的问题
升级win10后用户体验度确实比win7强了很多,但是电脑无故的重启,让人无法接受,下面就介绍win10电脑自动重启问题的解决方案 问题分析: 遇到这种情况主要是硬件与系统不兼容所致 解决方案: 1, ...
- js实现全选,反选,全不选
思路:1.获取元素.2.用for循环历遍数组,把checkbox的checked设置为true即实现全选,把checkbox的checked设置为false即实现不选.3.通过if判断,如果check ...
- 三十三、MySQL 导入数据
MySQL 导入数据 本章节我们为大家介绍几种简单的 MySQL 导出的数据的命令. 1.mysql 命令导入 使用 mysql 命令导入语法格式为: mysql -u用户名 -p密码 < 要导 ...
- Python_常用模块
一.内置模块 定义:其实模块简单说就是一堆代码实现某个功能,它们是已经写好的.py文件.只需要用import应用即可. 分类: 1. 自定义模块,就是自己写的.py文件为了实现某个功能. 2. 内置标 ...
- Vue插槽
插槽内容 Vue实现一套内容分发的API, 这套API基于当前的web组件规范草案,将元素作为承载分发内容的出口. <navigation-link url="/profile&quo ...
- 课时5.什么是URL（理解）
其实浏览器的地址栏中输入的地址就是一个URL. http://127.0.0.1/index.html(浏览器会自动添加:80) http://127.0.0.1:80/index.html(这是浏览 ...
- emwin如何在windows10下vs2015或2017进行仿真。
Make sure the selected Windows SDK is installed:Properties -> Configuration Properties -> Gene ...