像新闻类的版块经常要求一条条的新闻滚动出现，要实现这种效果，可以使用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. 如何从github上拉取项目中的指定目录

    2010开始,对于GitHub上的每一个Git版本库,现在都可以用SVN命令进行操作,而svn命令则是支持部分检出的. 方法如下: 例如我想下载我的nginxinc/kubernetes-ingres ...

  2. 2018.6.7. 云服务器Centos系统使用yum或者rpm安装包时出现问题，安装时报出错误：

    当我向终端输入 sudo yum groupinstall chinese-support 语言安装包的时候显示下面的错误 error: rpmdb: BDB0113 Thread/process 3 ...

  3. CUDA && GPU中dim3介绍

  4. vue项目跨域问题

    跨域 了解同源政策:所谓"同源"指的是"三个相同". 协议相同 域名相同 端口相同 解决跨域 jsonp 缺点:只能get请求 ,需要修改B网站的代码 cors ...

  5. Hotkeys.js 2.0.2 发布，JS 网页快捷键设置，捕获键盘输入和输入的组合键快捷键，它没有依赖

    这是一个强健的 Javascript 库用于捕获键盘输入和输入的组合键,它没有依赖,压缩只有只有(~3kb),gzip:1.9k. 更新内容: 添加测试用例: 添加更多特殊键支持: 修复bug. __ ...

  6. package.json字段分析

    分析1.必须在包的顶层目录下2.二进制文件应该在bin目录下3.javascipt在lib目录下4.文档在doc目录下 package.json字段分析 name:包的名称,必须是唯一的,由小写英文字 ...

  7. Java 获取Web项目相对webapp地址

    例如, import java.io.File; import java.io.FileInputStream; import javax.servlet.http.HttpServletReques ...

  8. 2017 ACM-ICPC网络赛 H.Skiing 有向图最长路

    H.Skiing In this winter holiday, Bob has a plan for skiing at the mountain resort. This ski resort h ...

  9. 对二维数组使用指针进行操作的探索（C语言）

    /* Name: 对二维数组使用指针进行操作的探索 Copyright: Author: lingr7 Date: 01/12/18 11:55 Description: */ #include< ...

  10. 动态规划：HDU1712-ACboy needs your help（分组背包问题）

    ACboy needs your help Time Limit : 1000/1000ms (Java/Other)   Memory Limit : 32768/32768K (Java/Othe ...