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

<!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. [solr] - Facet - autocomplete

    Solr的facet可以用于一般性的前缀式自动完成功能,当然,它的主要功能是用于做统计.分类.区间等. 统计.分类.区间功能,可参考下文: http://hongweiyi.com/2013/03/a ...

  2. IEA For PCS7

    1. IEA简介 PCS7中的Import/Export Assistant (IEA) 软件是对大量数据进行合理工程组态的有效工具,它以过程标签类型的多重使用和实例解决方案为基础.该软件特别适用于具 ...

  3. 如何把项目部署到OSChina上

    1. 在苹果电脑终端   ls -la  查看当前目录所有的隐藏文件 2. 删除 .ssh文件  rm -rf .ssh 3.创建一个隐藏的文件  mkdir .ssh   在查看 4.进入 .ssh ...

  4. 文件_ _android从资源文件中读取文件流并显示的方法

    ======== 1   android从资源文件中读取文件流并显示的方法. 在android中,假如有的文本文件,比如TXT放在raw下,要直接读取出来,放到屏幕中显示,可以这样: private ...

  5. youtube不显示其他人头像

    我用的是ss , 右键ss选择pac->编辑本地pac 把ggpht.com加入pac列表即可

  6. 根据 MySQL 状态优化 ---- 1. 慢查询

    查看 MySQL 服务器运行的各种状态值: mysql> show global status: 1. 慢查询 mysql> show variables like '%slow%'; + ...

  7. [CF245H] Queries for Number of Palindromes (容斥原理dp计数)

    题目链接:http://codeforces.com/problemset/problem/245/H 题目大意:给你一个字符串s,对于每次查询,输入为一个数对(i,j),输出s[i..j]之间回文串 ...

  8. (DP)3.Longest Substring Without Repeating Characters

    Given a string, find the length of the longest substring without repeating characters. For example, ...

  9. Python函数中的参数（一）

    函数传递参数时的简要关键点: 1.参数的传递是通过自动将对象赋值给本地变量名来实现的.函数参数在实际中只是Python赋值的一个实例.因为引用是以指针的形式实现的,所有的参数实际上都是通过指针进行传递 ...

  10. sql case when 操作

    ,(CASE WHEN (SELECT COUNT(1) FROM BookAuthorizeObject WHERE BookAuthorizeObject.BookNo=T.BookNo)=8 T ...