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

<!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. VS Copy Files after build

    <Import Project="$(MSBuildToolsPath)\Microsoft.CSharp.targets" /> <ItemGroup> ...

  2. overload, override和overwrite之间的区别

    Overload.Overwrite和Override的概念比较容易混淆,而且Overwrite和Override的中文翻译五花八门,让人很Confuse,顾保持英文原意: Overload  重载 ...

  3. OAF_文件系列1_实现OAF文件上传和下载MessageFileUpload/MessageDownload（案例）

    20150707 Created By BaoXinjian

  4. NDK SO 库开发与使用中的 ABI 构架选择

    Bugtags V1.2.7 引入了 NDK SO 库,在集成的时候,遇到不同的 SO 库打包到 APK 时,安装在某些机器上,出现 java.lang.UnsatisfiedLinkError 加载 ...

  5. springboot教程

    http://www.cnblogs.com/java-zhao/tag/spring-boot/ http://blog.csdn.net/liaokailin/article/category/5 ...

  6. jQuery - 疑惑

    设置内容和属性:http://www.runoob.com/jquery/jquery-dom-set.html

  7. C/C++ 右值引用 及 函数调用栈剖析

    参考: [1]. C/C++堆栈指引: http://www.cnblogs.com/Binhua-Liu/archive/2010/08/24/1803095.html [2]. C++临时变量的生 ...

  8. jquery 选择器汇总

    jQueryAPI_1.7.1_CN.chm下载地址http://download.csdn.net/detail/zhai123_/6459563 jquery 选择器大体上可分为4 类: 1.基本 ...

  9. Inside The C++ Object Model - 04 C++对象模型的一个简单示例

    首先定义一个类X class X { public: X(); X(const X& x); virtual ~X(); virtual foo(); } 再来一段代码: X foobar() ...

  10. DataSanp的控制老大-DSServer

    DSServer作用:管理DataSnap服务器生命周期.(启动,停止) 一.方法: 1.BroadcastMessage 向所以客户端发送消息,客户端必须已注册通道. 2.BroadcastObje ...