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第五天
			
    # 今日内容 1. JavaScript基础 ## JavaScript: * 概念: 一门客户端脚本语言 * 运行在客户端浏览器中的.每一个浏览器都有JavaScript的解析引擎 * 脚本语言:不 ...
    
			
    2. 
						
  2. Windows安装软件出现 2502  2503的错误？
			
    1 输入这个命令 2 3 msiexec /package +"需要安装文件的路径" 4 5 //注意路径的问题 斜杆要保持一致. 6 //注意要有空格. 我的安装路径 7 msi ...
    
			
    3. 
						
  3. 论新手该如何学习java？
			
    由于我国高等教育制度教材陈旧,加上java自身发展不过十年左右的时间,还有一个很重要的原因就是java这门语言更适合商业应用,所以高校里大部分博士老师们对此语言的了解甚至不比本科生多. 在这种环境下, ...
    
			
    4. 
						
  4. 标签显示模式（display）
			
    非洲黑人: 皮肤内黑色素含量高,以吸收阳光中的紫外线,保护皮肤内部结构免遭损害,头发象羊毛一样卷曲,使每根卷发周围都有许多空隙,空隙充满空气,卷发有隔热作用. 欧洲白人: 生活寒带或着是说常年温度较低 ...
    
			
    5. 
						
  5. Yarn命令列表
			
    常用命令: 创建项目:yarn init 安装依赖包:yarn == yarn install 添加依赖包:yarn add Yarn命令列表 命令 操作 参数 标签 yarn add 添加依赖包 包 ...
    
			
    6. 
						
  6. 怎么实时同步java虚拟机与操作系统时区 及JVM启动后再更改操作系统时区或时间也能保持其同步？ new date() 时差8个小时的解决方案
			
    第一种(亲测可以) 在代码当中的Application启动类当中加入代码 @PostConstruct void started() { //时区设置:中国上海 //time.zone: " ...
    
			
    7. 
						
  7. 对于Web性能优化， 了解和经验
			
    我们在发布项目之前压缩CSS和JavaScript源代码,这样文件体积就变小了,用户加载必要资源所花的时间也就更短了. 压缩源码和图片 JavaScript文件源代码可以采用混淆压缩的方式,CSS文件 ...
    
			
    8. 
						
  8. python篇第6天【数据类型】
			
    Python有五个标准的数据类型: Numbers(数字) String(字符串) List(列表) Tuple(元组) Dictionary(字典) Python数字 数字数据类型用于存储数值. 他 ...
    
			
    9. 
						
  9. Rock Pi开发笔记（二）：入手Rock Pi 4B plus（基于瑞星微RK3399）板子并制作系统运行
			
    前言   入手rock pi 4b plus板子,查看具体的实物,然后制作系统,刷系统,让摇滚派的ubuntu系统运行起来.   Rock Pi 4B plus 介绍   ROCK Pi 4 是 Ra ...
    
			
    10. 
						
  10. netty系列之:让TCP连接快一点,再快一点
			
    简介 经典的TCP三次握手大家应该很熟悉了,三次握手按道理说应该是最优的方案了,当然这是对于通用的情况来说的.那么在某些特殊的情况下是不是可以提升TCP建立连接的速度呢? 答案是肯定的,这就是今天我们 ...
    
			
    11.