像新闻类的版块经常要求一条条的新闻滚动出现，要实现这种效果，可以使用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. 解决session过期跳转到登录页并跳出iframe框架（或者layui弹出层）

    当用户长时间停留在管理界面没有操作,等到session过期后,进行了操作,那么只是iframe跳转到login页面,这不是我们想要的结果.解决方法:在login页面加一个逻辑判断: <scrip ...

  2. phalcon中find 最常用

    1 官网:http://docs.iphalcon.cn/reference/models.html#finding-records 2 具体操作实例 数据: mysql> select * f ...

  3. css代码

    #footr { background: #3e434a } #header #blogTitle { background: url("http://images.cnblogs.com/ ...

  4. Oracle数据库学习（二）

    2.用SQL进行多表查询 (1)无条件多表查询 笛卡尔集:总记录数＝table1记录数×table2记录数 select * from table1, table2 (2)等值连接 内连接:selec ...

  5. 51nod——1402最大值、2479小b分糖果 （套路）

    1402最大值:正向从1到n,如果没有限制,就依次递增1,如果有限制,就取那个限制和递增到这的最小值.这样保证1和每个限制点后面都是符合题意的递增,但是限制点前面这个位置可能会有落差(之前递增多了). ...

  6. python 实现简单语音聊天机器人

    '''思路:使用百度的文本转音频API,将结果保存成mp3格式,并用mp3play库播放该文件.''' 1 # -*- coding:utf-8 -*- import sys import reque ...

  7. 二、MySQL 管理

    MySQL 管理 启动及关闭 MySQL 服务器 Windows 系统下 在 Windows 系统下,打开命令窗口(cmd),进入 MySQL 安装目录的 bin 目录. 启动: cd c:/mysq ...

  8. 前段ztree 树状插件

    效果展示

  9. 浅谈MapReduce工作机制

    1.MapTask工作机制 整个map阶段流程大体如上图所示.简单概述:input File通过getSplits被逻辑切分为多个split文件,通通过RecordReader(默认使用lineRec ...

  10. 《鸟哥的Linux私房菜》学习笔记（8）——bash脚本编程之变量

    一.变量命名                                                             1.只能包含字母.数字和下划线,并且不能以数字开头,    2.不 ...