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

<!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. [网络] 用 OpenVPN 实现站对站 VPN 服务

    一.简介 一般情况下站对站 VPN 是用 cisco.juniper.h3c等品牌的专业设备实现的,这些设备性能可靠,价格较贵. 如果现有设备不支持,而且不能用新设备替换,或者部门预算有限,那么只能用 ...

  2. Redis应用场景

    Redis开创了一种新的数据存储思路,使用Redis,我们不用在面对功能单调的数据库时,把精力放在如何把大象放进冰箱这样的问题上,而是利用Redis灵活多变的数据结构和数据操作,为不同的大象构建不同的 ...

  3. 安装Yii框架时init.bat闪退的处理方法

    已经开启了php_openssl扩展还是会闪退 1.右击'计算机'-'属性'-'高级系统属性'-'环境变量(最下边)': 2.在'系统变量'里找到'path',双击,出现'编辑系统变量',在'变量值' ...

  4. sql创建表格 转载

    http://blog.csdn.net/wuxiaokaixinguo/article/details/8293048 检查数据库中是否存在某个表,不存在则生成该表方法一:IF NOT EXISTS ...

  5. css学习笔记（6）

    +++++++++++++++++ CSS HACK+++++++++++++++++IE6.0 能识别 _background:#ff00ff; *background:#ff00ff; +back ...

  6. 排列 && 组合

    最近编程经常遇到需要 排列&&组合(求子集) 的问题:遂整理一下. 1. 数字的排列与组合(递归):O(n!),O(nC(n,k)) * O(n) #include <stdio ...

  7. ubuntu 清除缓存

    2013-03-31 10:20 sudo apt-get autoremove //自动卸载不使用的内容 sudo apt-get autoclean //自动清理,但不会删除用于安装而下载的临时文 ...

  8. sql 2008 R2添加对MySql的远程服务器链接

    (1).我的sql 2008 R2所在的系统为Windows server 2008 *64 (2).MySQL所在的系统为Windows server 2003 *86 我想要实现的是在sql 20 ...

  9. dedecms代码研究三

    上次,我们从dedecms的index.PHP文件中了解到了很多信息,也提出了一些问题: 1)加载了/include/common.inc.php,里面做了哪些工作? 2)/include/arc.p ...

  10. [js] js和C# 时间日期格式转换

    下午在搞MVC和EXTJS的日期格式互相转换遇到了问题,我们从.NET服务器端序列化一个DateTime对象的结果是一个字符串格式,如 '/Date(1335258540000)/' 这样的字串. 整 ...