JQuery实现 新闻无缝滚动

一.使用"首尾追加"实现无缝滚动

<head lang="en">

    <meta charset="UTF-8">

    <title>一.使用"首尾追加"实现无缝滚动</title>


    <style>

        #scroll{

            height: 100px;

            overflow: hidden;

        }

    </style>
　　


    <script src="js/jquery-1.12.4.js"></script>

    <script>

        $(function () {

            setInterval(function () {

                var $scroll=$("#scroll"); //获取要设置scrollTop()属性的元素

                var $top =$scroll.scrollTop(); //获取当前scrollTop值

                $scroll.scrollTop(++$top); //增加元素的scrollTop值
　　　　　　　　　　//如果元素的scrollTop值大于,它的父级容器的高度,则将第一个元素追加到最后

                if($top>=$scroll.height()){

                    var $first = $(".content li:first").clone(true);//获取并复制第一个元素

                    $(".content>ul").append($first);//追加到最后

                    $(".content li:first").remove();//删除第一个元素

                }

            },20);

        });

    </script>

</head>

<body>

<div id="scroll">

    <div class="content">

        <ul>

            <li><a href="#">新闻1111</a></li>

            <li><a href="#">新闻2222</a></li>

            <li><a href="#">新闻3333</a></li>

            <li><a href="#">新闻4444</a></li>

            <li><a href="#">新闻5555</a></li>

            <li><a href="#">新闻6666</a></li>

            <li><a href="#">新闻7777</a></li>

            <li><a href="#">新闻8888</a></li>

            <li><a href="#">新闻9999</a></li>

            <li><a href="#">新闻1010</a></li>

        </ul>

    </div>

</div>

</body>

</html>




效果如图:




运行原理:


因为本人比较小白,不知道怎么更专业的描述,所以都把知识浓缩到图片里了,看图:


PS:第一次发博,如果有什么解释不清楚的,或不明白的欢迎回复提问!
												


											
基于JQuery打造无缝滚动新闻的更多相关文章
	

    
								
  1. 利用JQuery一步步打造无缝滚动新闻
		
    首先,我们这里有这么一段html代码,很简洁,如下所示: 1 <div id="tag">2 <ul>3 <li>你说我是好人吗,我是好人啊&l ...
    
		
    2. 
						
  2. jQuery图片无缝滚动
		
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
    
		
    3. 
						
  3. jQuery图片无缝滚动JS代码ul/li结构
		
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
    
		
    4. 
						
  4. 基于jQuery打造的选项卡向上弹出jquery焦点图切换特效
		
    基于jQuery打造的选项卡向上弹出jquery焦点图切换特效 鼠标经过标题栏,会出现层特效向上滑动,并且在同时进行幻灯片切换,效果十分不错. 有兴趣的童鞋可以下载看看,在IE6方面兼容性也不错,只有 ...
    
		
    5. 
						
  5. 基于jquery打造的网页右侧自动收缩浮动在线客服代码
		
    基于jquery打造的网页右侧自动收缩浮动在线QQ客服代码, 当前比较流行的一款QQ在线jquery特效代码, 代码中还带有IE6下PNG图片透明的特效,如果想研究IE6下PNG透明的同学也可以下载研 ...
    
		
    6. 
						
  6. jquery图片无缝滚动代码左右  上下无缝滚动图片
		
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
    
		
    7. 
						
  7. JQuery的无缝滚动
		
    图片无缝向左滚动的代码如下:   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "h ...
    
		
    8. 
						
  8. 一款经典的jQuery kxbdMarquee 无缝滚动插件
		
    <marquee> 曾是 IE 下独有的一个走马灯效果的标签,其他浏览器并不兼容,于是出现了使用 JavaScript 来模拟该效果的插件. 版本: jQuery v1.3.2+ 在线实例 ...
    
		
    9. 
						
  9. 基于jQuery左侧小图滚动右侧大图显示代码
		
    今天给大家分享一款 jQuery左侧小图滚动右侧大图显示代码是一款基于jQuery实现的左侧滚动图片点击大图查看效果代码.该实例适用浏览器:IE8.360.FireFox.Chrome.Safari. ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. 学习JAVAWEB第一天
			
    第一天:单元测试(junit)黑盒测试:不需要写代码,给输入值,看程序能否给出期望值白盒测试:需要写代码,关注程序的具体执行流程junit使用步骤:步骤1:定义一个测试类建议类名,被测试类名后面加一个 ...
    
			
    2. 
						
  2. 学习MyBatis必知必会（6）~Mapper基础的拓展
			
    一.typeAlias 类型别名[自定义别名.系统自带别名] 1.类型别名:为 Java 类型设置一个缩写名字. 它仅用于 XML 配置,意在降低冗余的全限定类名书写 2.配置自定义别名: (1)方式 ...
    
			
    3. 
						
  3. 微信 CLI 工具正式发布 v1.0
			
    前言 为了让开发者可以更加方便舒适地获取到微信开发的资源,今天我们基于 Senparc.Weixin SDK 正式发布了基于 .NET 的微信 CLI 工具:Weixin.CLI(v1.0). 通过  ...
    
			
    4. 
						
  4. 海康NVR设备上传人脸图片到人脸库
			
    海康开放平台--海康文档链接--海康开发包和文档下载链接 硬件:海康超脑NVR(全称Network Video Recorder,即网络视频录像机).人脸摄像机. 环境:JDK_1.8 Windows ...
    
			
    5. 
						
  5. Velero：备份、迁移Kubernetes集群资源和PV
			
    Velero基本介绍 官方文档:https://velero.io/docs/v1.4/ 基本工作原理: 不管需求是实现什么,比如:集群迁移.恢复.备份,其核心都是通过velero client CL ...
    
			
    6. 
						
  6. 掌握这些常用Linux命令，一起提升工作效率
			
    开始上班了,新一年的奋斗的之路启程了,要继续[奔赴山海,奔赴热爱]. 汪国真在<热爱生命>这首诗中写到:既然选择了远方,便只顾风雨兼程.技术上还是持续精进和学习,远方虽远,要迈开脚步,一步 ...
    
			
    7. 
						
  7. Nginx实现跨域配置详解
			
    主要给大家介绍了关于Nginx跨域使用字体文件的相关内容,分享出来供大家参考学习,下面来一起看看详细的介绍: 问题描述 今天在使用子域名访问根域名的CSS时,发现字体无法显示,在确保CSS和Font字 ...
    
			
    8. 
						
  8. VC 为程序创建唯一标识
			
    转载请注明来源:https://www.cnblogs.com/hookjc/ 应用: 一台机器上只许运行一个客户端 同一个账号只允许登陆一个客户端 BOOl m_IsRun=false; HANDL ...
    
			
    9. 
						
  9. shell编程之免交互  （不要再让你的双手过度劳累了）
			
    shell编程之免交互 1.Here Document免交互 2.Expect免交互 3.免交互磁盘创建 1.Here Document免交互 概述: Here Document使用I/O重定向的方式 ...
    
			
    10. 
						
  10. HTML基础笔记整理
			
    「学习笔记」HTML基础 前言 勤做笔记不仅可以让自己学的扎实,更重要的是可以让自己少走弯路.有人说:"再次翻开笔记是什么感觉",我的回答是:"初恋般的感觉". ...
    
			
    11.