像新闻类的版块经常要求一条条的新闻滚动出现，要实现这种效果，可以使用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. 响应式网站布局要适应的当下主流手机屏幕的各个版本的分辨率有哪些（media query）

    CSS宽有14种: 320.360.375.384.400.414.533.600.768.800.853.1024.1280.1366 CSS高有16种: 360.480.533.568.569.6 ...

  2. 问题 B: Curriculum Vitae

    问题 B: Curriculum Vitae 时间限制: 1 Sec  内存限制: 128 MB提交: 109  解决: 25[提交][状态][讨论版][命题人:acm4302] 题目描述 Hideo ...

  3. python_68_迭代器

    ''' 我们已经知道,可以直接作用于for循环的数据类型有以下几种: 一类是集合数据类型,如list.tuple.dict.set.str等: 一类是generator,包括生成器和带yield的ge ...

  4. 5-15 笔记 jtopo使用

    Jtopo的核心对象有6个,分别是Stage(舞台对象),Scene(场景对象),Node(节点对象),Link(连线对象),Container(容器对象),Effect.Animate(动画效果) ...

  5. Java后台工程师的3次面试

    第一次面试 我面的是一个中小公司,在BOSS直聘上面找的,去之前看了看关于Java的一些基础知识,在牛客网上面看的,也做了一下牛客网的题目.然后跟HR约了一个时间就去面试了.因为第一次面试,一点经验都 ...

  6. Python——函数入门（三）

    一.变量作用域 当程序定义一个变量时,这个变量是有它的作用范围的,变量的作用范围称为变量的作用域.根据变量的位置,分为两种: 局部变量:局部变量就是在函数中定义的变量,包括参数,都是局部变量,局部离开 ...

  7. PAT (Advanced Level) Practise - 1093. Count PAT's (25)

    http://www.patest.cn/contests/pat-a-practise/1093 The string APPAPT contains two PAT's as substrings ...

  8. APCInject

    #include <iostream> #include <Windows.h> #include <TlHelp32.h> using namespace std ...

  9. PHP操作redis的常用例子

    Redis常用的例子 1,connect 描述:实例连接到一个Redis. 参数:host: string,port: int 返回值:BOOL 成功返回:TRUE;失败返回:FALSE 示例: &l ...

  10. Python知识点入门笔记——特色数据类型(元组)

    元组(tuple)是Python的另一种特色数据类型,元组和列表是相似的,可以存储不同类型的数据,但是元组是不可改变的,创建后就不能做任何修改操作. 创建元组 用逗号隔开的就是元组,但是为了美观和代码 ...