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

<!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. LAMP平台搭建菜鸟入门级实验

    LAMP平台搭建(菜鸟入门级) mysql 安装: (1)二进制安装  二进制安装 ,执行解压配置即可.无须执行三布安装. (2)源码编译安装 安装准备工作: (1)查看系统配置:#uname -a/ ...

  2. 深入浅出WPF开发下载

    ​为什么要学习WPF? 许多朋友也许会问:既然表示层技术那么多,为什么还要推出WPF作为表示层技术呢?我们话精力学习WPF有什么收益和好处呢,这个问题我们从两个方面进行回答. 首先,只要开发表示层程序 ...

  3. python 实现二分法查找

    二分查找图 二叉树: 代码 #!/usr/bin/python #-*-coding:utf-8-*- #----------------------------------------------- ...

  4. ADF_Data Binding系列1_使用Bean Data Control

    2015-02-16 Created By BaoXinjian

  5. Codeforces Round #378 (Div. 2) D - Kostya the Sculptor

    Kostya the Sculptor 这次cf打的又是心累啊,果然我太菜,真的该认真学习,不要随便的浪费时间啦 [题目链接]Kostya the Sculptor &题意: 给你n个长方体, ...

  6. linux 文档处理命令

    1. 将用户信息数据库文件和组信息数据纵向合并为一个文件/1.txt(覆盖) 2.将用户信息数据库文件和用户密码数据库文件纵向合并为一个文件/2.txt(追加 3.将/1.txt./2.txt两个文件 ...

  7. linux下安装jdk的几种方式

    1.rpm方式安装: rpm -qa | grep jdk 查看是否安装了jdk,或者用java -version查看java版本 rpm -e --nodeps java-1.7.0-openjdk ...

  8. 什么是BOM头，及PHP解决办法

    类似WINDOWS自带的记事本等软件,在保存一个以UTF-8编码的文件时,会在文件开始的地方插入三个不可见的字符(0xEF 0xBB 0xBF,即BOM).它是一串隐藏的字符,用于让记事本等编辑器识别 ...

  9. onmouseover和onmouseout的那些事

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

  10. WPF绑定数据源

    using System;using System.Collections.Generic;using System.Collections.ObjectModel;using System.Comp ...