像新闻类的版块经常要求一条条的新闻滚动出现，要实现这种效果，可以使用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. 初学树套树：线段树套Treap

    前言 树套树是一个十分神奇的算法,种类也有很多:像什么树状数组套主席树.树状数组套值域线段树.\(zkw\)线段树套\(vector\)等等. 不过,像我这么弱,当然只会最经典的 线段树套\(Trea ...

  2. 3205: 数组做函数参数--数组元素求和1--C语言

    3205: 数组做函数参数--数组元素求和1--C语言 时间限制: 1 Sec  内存限制: 128 MB提交: 178  解决: 139[提交][状态][讨论版][命题人:smallgyy] 题目描 ...

  3. 前端小记3——iOS与Android问题

    1.消除transition闪屏 (1)-webkit-transform-style:preserve-3d;  /*设置内嵌的元素在 3D 空间如何呈现:保留 3D*/ (2)-webkit-ba ...

  4. IOS后台执行

    大多数应用程序进入后台状态不久后转入暂停状态.在这种状态下,应用程序不执行任何代码,并有可能在任意时候从内存中删除.应用程序提供特定的服务,用户可以请求后台执行时间,以提供这些服务. 判断是否支持多线 ...

  5. 【计数】cf223C. Partial Sums

    考试时候遇到这种题只会找规律 You've got an array a, consisting of n integers. The array elements are indexed from ...

  6. python 写 组合两两组合

    紧挨着 组合  a b c d  ----> ab ,bc ,cd portList = ['a', 'b', 'c', 'd'] for i, p in enumerate(portList) ...

  7. 五 python并发编程之IO模型

    一 IO模型介绍 同步(synchronous) IO和异步(asynchronous) IO,阻塞(blocking) IO和非阻塞(non-blocking)IO分别是什么,到底有什么区别?这个问 ...

  8. nuxt.js express模板项目虚拟目录部署问题汇总

    声明环境 反向代理:nginx或者iis的ARR 模板项目:nuxt-express 部署环境:windows 经过了一段时间在windows环境部署项目来看,关于虚拟目录的问题汇总如下, 发布场景假 ...

  9. hibernate的get() load() 和find()区别

    如果找不到符合条件的纪录,get()方法将返回null．如果找不到符合条件的纪录,find()方法将返回null．如果找不到符合 条件的纪录,load()将会报出ObjectNotFoundEccep ...

  10. linux-最最最最最常用的操作

    去除两个文件中相同的内容 比如我想把file1中不含文件file2的内容保留下来:(这个在抠一些内容的时候挺好用的) awk '{print $0}' file1 file2 |sort|uniq - ...