像新闻类的版块经常要求一条条的新闻滚动出现，要实现这种效果，可以使用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. windows下安装Linux虚拟机

    一.下载ios 下载网址:https://wwww.centos.org 选择一个.iso下载 二.安装一个vmware workstation或者Hyper-v的虚拟机 2.1.Hyper-v 2. ...

  2. 逗塔战争TD新人入门图文攻略

    逗塔战争TD新人入门图文攻略   <逗塔战争TD>是一张基于DOTA改编的塔防TD,很多玩家都很喜欢这张图,新手玩家怎么快速上手这张图呢?这张图的玩法和基本规则并不难,下面就为大家带来新人 ...

  3. SAP 各模块常用的BAPI

    MM模块 1. BAPI_MATERIAL_SAVEDATA 创建物料主数据 注意参数EXTENSIONIN的使用,可以创建自定义字段 例如:WA_BAPI_TE_MARA-MATERIAL = IT ...

  4. JS - OOP-继承的最佳实现方式

    如上图,使用第三种方式实现继承最好,也就是加了下划线的. 但是Object.create方法是ES6才支持的,所以,右边就写了一个实现其同样功能的函数.

  5. MultipartFile 动态决定是否上传文件,解决不上传文件报错

    controller 接收参数   用 HttpServletRequest 代替 @RequestParam()  接收参数 picFile 前台 传文件的参数名字  ,   这样 前段 传 nul ...

  6. pycahrm git配置笔记

    1. 在file - setting - plugins 中查看是否有github插件, 此处是用于处理插件位置

  7. vs对某些网络错误的拦截

    在编写代码的过程中发现如果在写好网页中的文本框内写入js代码(以<script>1</script>输入为例) vs会自动拦截并报错,如图(密码中我也输入了<script ...

  8. 7- vue django restful framework 打造生鲜超市 -商品类别数据展示(上)

    Vue+Django REST framework实战 搭建一个前后端分离的生鲜超市网站 Django rtf 完成 商品列表页 并没有将列表页的数据json 与前端的页面展示结合起来 讲解如果将dr ...

  9. 最全的PHP函数详解

    usleep() 函数延迟代码执行若干微秒. unpack() 函数从二进制字符串对数据进行解包. uniqid() 函数基于以微秒计的当前时间,生成一个唯一的 ID. time_sleep_unti ...

  10. python-字符串数据类型内置方法

    字符串类型内置方法 (str) 用途:描述性质的东西,如人的名字.单个爱好.地址.国家等 定义:使用单引号(' ').双引号(" ").三单引号(''' ''').三双引号(&qu ...