像新闻类的版块经常要求一条条的新闻滚动出现,要实现这种效果,可以使用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+)的更多相关文章

  1. 基于MVC4+EasyUI的Web开发框架经验总结(1)-利用jQuery Tags Input 插件显示选择记录

    最近花了不少时间在重构和进一步提炼我的Web开发框架上,力求在用户体验和界面设计方面,和Winform开发框架保持一致,而在Web上,我主要采用EasyUI的前端界面处理技术,走MVC的技术路线,在重 ...

  2. (转)基于MVC4+EasyUI的Web开发框架经验总结(1)-利用jQuery Tags Input 插件显示选择记录

    http://www.cnblogs.com/wuhuacong/p/3667703.html 最近花了不少时间在重构和进一步提炼我的Web开发框架上,力求在用户体验和界面设计方面,和Winform开 ...

  3. 利用jquery的imgAreaSelect插件实现图片裁剪示例

    http://www.cnblogs.com/mizzle/archive/2011/10/13/2209891.html 将用户上传的图片进行裁剪再保存是现在web2.0应用中常常处理的工作,现在借 ...

  4. jQuery 人脸识别插件,支持图片和视频

    jQuery Face Detection 是一款人脸检测插件,能够检测到图片,视频和画布中的人脸坐标.它跟踪人脸并输出人脸模型的坐标位置为一个数组.我们相信,面部识别技术能够给我们的 Web 应用带 ...

  5. jQuery hover事件鼠标滑过图片半透明标题文字滑动显示隐藏

    1.效果及功能说明 hover事件制作产品图片鼠标滑过图片半透明,标题文字从左到右滑动动画移动显示隐藏 2.实现原理 首先把效果都隐藏,然后定义一个伪类来触发所有的效果,接下来当触发伪类后会有一个遍历 ...

  6. 利用DOM的方式点击切换图片及修改文字

    本案例主要学习理解,用到的几个DOM方法 01.getAttribute()方法,获取元素的属性值 02.setAttribute('src',source) 方法,用后边的值修改前边这个元素的属性值 ...

  7. liMarquee – jQuery无缝滚动插件(制作跑马灯效果)

    liMarquee 是一款基于 jQuery 的无缝滚动插件,类似于 HTML 的 marquee 标签,但比 marquee 更强大.它可以应用于任何 Web 元素,包括文字.图像.表格.表单等元素 ...

  8. jquery.fullPage.js全屏滚动插件教程演示

    css部分(此处需要导入jquery.fullPage.css) <style> .section { text-align: center; font: 50px "Micro ...

  9. 分享10款常用的jQuery焦点图插件

    爱编程一直在收集整理编程相关的知识和解决方案,今天小编为大家带来10款非常常用的jquery焦点图插件. 1.jQuery可自动播放动画的焦点图插件 之前我们已经分享过很多非常实用的jQuery焦点图 ...

随机推荐

  1. 项目开发中dev、test和prod是什么意思

    开发环境(dev):开发环境是程序猿们专门用于开发的服务器,配置可以比较随意,为了开发调试方便,一般打开全部错误报告. 测试环境(test):一般是克隆一份生产环境的配置,一个程序在测试环境工作不正常 ...

  2. Java代码工具箱之解析单行单列简单Excel

    1. 使用开源工具 jxl.jar 2. 功能:解析常规Excel.xls格式测试可行,xlsx未测试.Excel测试格式为常规类似table这种简单布局文件.第一行为标题,后面行为内容.代码 可正确 ...

  3. Websocket教程SpringBoot+Maven整合(详情)

    1.大话websocket及课程介绍 简介: websocket介绍.使用场景分享.学习课程需要什么基础 笔记: websocket介绍: WebSocket协议是基于TCP的一种新的网络协议.它实现 ...

  4. 驾考试题的json代码

    { "statusCode": "000000", "desc": "请求成功", "result" ...

  5. 【luogu题解】P1546 最短网络 Agri-Net

    题目 约翰已经给他的农场安排了一条高速的网络线路,他想把这条线路共享给其他农场.为了用最小的消费,他想铺设最短的光纤去连接所有的农场. 你将得到一份各农场之间连接费用的列表,你必须找出能连接所有农场并 ...

  6. DevOps - 监控告警 - Zabbix

    官网3.4版本中文文档 Zabbix documentation in Chinese [Zabbix Documentation 3.4] https://www.zabbix.com/docume ...

  7. Linux 系统性能

    Linux:PS命令详解与使用   要对进程进行监测和控制,首先必须要了解当前进程的情况,也就是需要查看当前进程,ps命令就是最基本进程查看命令.使用该命令可以确定有哪些进程正在运行和运行的状态.进程 ...

  8. js浮点数加减乘除

    浮点数精确计算 /** ** 加法函数,用来得到精确的加法结果 ** 说明:javascript的加法结果会有误差,在两个浮点数相加的时候会比较明显.这个函数返回较为精确的加法结果. ** 调用:ac ...

  9. ZendFramework-2.4 源代码 - ViewManager类图

  10. selenium中webdriver跳转新页面后定位置新页面的两种方式

    刚刚在写Python爬虫的时候用到了selenium , 在跳转新页面时发现无法定位新页面 , 查找不到新页面的元素 一番查询后得到了解决方法 , 便记录下来备忘 , 也与大家分享 # 页面跳转代码. ...