很多时候只看别人的代码时很难看懂。有很多原因，有时候可能是没有耐心，这时候看一下实现的原理就很快明白代码的内容，所以要加些注释，让自己让别人都能看明白；有的时候就是因为知识有限就是不懂，哪怕代码很简单，这就需要多学习了

<!DOCTYPE html>

<html>

<head>

    <title>滚动公告</title>

    <meta charset="utf-8"/>

    <style type="text/css">

        *{

            padding: 0px;

            margin:0px;

        }

        #container{

            border: 1px yellow solid;

            width: 500px;

            height: 30px;

            line-height:30px;

            overflow: hidden;

        }

        .content{

            width:500px;

        }

    </style>

</head>

<body>

<div id="container">

    <div id="content" class="content">

        <a href=#  id="f12red1" class="f12red">1111111111111111111111111111111111111111</a><br/>

        <a href=# class="f12red">222222222222222222222222222222222222222222</a><br/>

        <a href=# class="f12red">33333333333333333333333333333333333333333333</a><br/>

    </div>

    <div id="content1" class="content"></div>

</div>

<script type="text/javascript" src="js/jquery-1.12.0.min.js"></script>

<script type="text/javascript">

    //将content的内容复制到content1

    $("#content1").html($("#content").html());

    //实现的无缝滚动主函数

    var marquee=function(){

        if ($("#container").scrollTop() >= $("#content").height()) { //当滚动条隐藏的长度大于div1的宽度

            $("#container").scrollTop(0);

        }

        else{

            $("#container").scrollTop($("#container").scrollTop()+1);   //每次滚动条往右移动1px；

        }

    }

    //主函数做循环

    var mar=setInterval(marquee,100);

    $(".f12red").mouseenter(function(){

        clearInterval(mar);

    }).mouseleave(function(){

        mar=setInterval(marquee,100);

    })

</script>

</body>

</html>

这段代码其实有一些缺陷，含需要认真打磨，希望高手指点。

1.滚动到第一个a标签有明显的延迟

2.当鼠标移动到上面时a标签无法移动到中间

3.在滚动是如果有延迟就更好了，方便用户观看相关内容

。

jQuery实现无缝滚动条的更多相关文章

  1. jquery两个滚动条样式

    jquery两个滚动条样式 点击下载

  2. jquery判断div滚动条到底部

    jQuery 里和滚动条有关的概念很多,但是有三个属性和滚动条的拖动有关,就是:scrollTop.scrollLeft.scrollHeight.其中 scrollHeight 属性,互联网上几乎搜 ...

  3. jQuery图片无缝滚动JS代码ul/li结构

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. jQuery实现模拟滚动条效果；

    滚动条在web开发中,很常见,原生的HTML滚动条很难看,因此很多网站借助JS来模拟实现滚动条效果: 滚动条的实现原理其实比较简单,拿垂直滚动条来说: 1),最外层容器需要设置overflow:hid ...

  5. Jquery图片随滚动条加载

    很久以前的写的Jquery图片随滚动条加载,现在不是什么新技术,应用也很广泛,大大提高图片多的页面打开速度! 有需要的朋友看看吧!有什么意见或建议欢迎留言交流! Demo.html  源码: < ...

  6. 一款jQuery打造的滚动条在底部滑出信息提示层

    一款jQuery打造的滚动条在底部滑出信息提示层, 当滚动鼠标滚轮,或者滚动条往下拉的时候,在右下角,弹出一个信息提示框. 有一点仿的是一个插件工具,就是网页中大家都长用到的友荐. 这款特效算一款简单 ...

  7. jQuery图片无缝滚动

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. jquery图片无缝滚动代码左右 上下无缝滚动图片

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. jQuery粘性跟随滚动条滚动的导航栏源代码下载

    jQuery粘性跟随滚动条滚动的导航栏源代码下载 作者:网页模板 大小:0.005MB 点击次数:3494 发布时间:2014-03-07 12:55 分享到:0 特效介绍 jQuery粘性跟随滚动条 ...

随机推荐

  1. nokogiri如何使用

    直接来个简单的代码实例就明白啦! require 'nokogiri' xml_data=<<XML <library> <NAME><![CDATA[Fav ...

  2. Android总结篇系列：Activity生命周期

    Android官方文档和其他不少资料都对Activity生命周期进行了详细介绍,在结合资料和项目开发过程中遇到的问题,本文将对Activity生命周期进行一次总结. Activity是由Activit ...

  3. Unity5版本的AssetBundle打包方案之打包Scene场景

    using UnityEngine; using System.Collections; using UnityEditor; /// <summary> /// 脚本位置:Editor文 ...

  4. Oracle游标示例

    -- 声明游标:CURSOR cursor_name IS select_statement --For 循环游标 --(1)定义游标 --(2)定义游标变量 --(3)使用for循环来使用这个游标 ...

  5. VG vs SS WE vs IM [20160815]

    上单:慎,纳尔,艾克,艾瑞莉娅,普朗克 中单:弗拉基米尔,玛尔扎哈,卡尔玛,丽桑卓,索尔,崔斯特,辛德拉 打野:雷克赛,奈德丽,古拉加斯,伊莉丝,赫卡里姆,玛尔扎哈 下路:艾希,克格莫,烬,希维尔,布 ...

  6. onmouseover和onmouseout的那些事

    这篇文章来自一个偶然...以前刚开始学习javascript事件的时候就被一个东西搞得晕头撞向的.就是一对名字很相近的事件.一组是onmouseover()和onmouseout().另一组就是onm ...

  7. 【知识点】安全存储服务（SSS）目标应用程序类型

    存在若干种类型的目标应用程序.它们分为两大类:单独的目标应用程序和组目标应用程序.目标应用程序的类型与用于映射用户凭据的帐户类型对应.如果每个用户都在目标应用程序中具有一个帐户,则选择单独的类型.如果 ...

  8. ios开发 iphone中获取网卡地址和ip地址

    这是获取网卡的硬件地址的代码,如果无法编译通过,记得把下面的这几个头文件加上把. #include <sys/socket.h> // Per msqr#include <sys/s ...

  9. 36. Construct Binary Tree from Inorder and Postorder Traversal && Construct Binary Tree from Preorder and Inorder Traversal

    Construct Binary Tree from Inorder and Postorder Traversal OJ: https://oj.leetcode.com/problems/cons ...

  10. IE请求访问的设置

    1:问题 目前有个项目采用AngularJs发送Restful风格的请求的方式来实现前后端的通信,测试人员在使用IE浏览器进行测试的时候发现,有时候请求发送不到后台,后来经查找发现是由于IE浏览器的默 ...