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. ApacheCN 机器学习译文集 20211111 更新
			
    台湾大学林轩田机器学习笔记 机器学习基石 1 -- The Learning Problem 2 -- Learning to Answer Yes/No 3 -- Types of Learning ...
    
			
    2. 
						
  2. jdk、jre、javase、javaee、javame的区别
			
    Jdk定义 JAVA的开发工具包,包含jre,可以进行编译和运行Java程序. Jre定义 JAVA的运行环境,如果不需要进行编译程序,则可只安装jre. Javase定义 标准版Java SE(Ja ...
    
			
    3. 
						
  3. python开发: linux进程打开的文件数
			
    1 #!/usr/bin/env python 2 #-*- coding:utf-8 -*- 3 4 ''' 统计linux打开的文件数 ''' 5 6 import os 7 import sys ...
    
			
    4. 
						
  4. Android总结【不定期更新】
			
    全屏显示: this.getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN,WindowManager.LayoutParam ...
    
			
    5. 
						
  5. Scala函数高级篇
			
    一.匿名函数 没有名字的函数就是匿名函数,格式:(x:Int)=>{函数体} x:表示输入参数类型:Int:表示输入参数类型:函数体:表示具体代码逻辑 传递匿名函数至简原则: 参数的类型可以省略 ...
    
			
    6. 
						
  6. Scala概述及环境配置
			
    一.概述 1.1 为什么要学Scala? Spark是新一代的内存级大数据的计算框架,是大数据学习的重要内容.随着Spark的兴起,同时也带动了Scala的学习,因为Spark就是Scala编写的.为 ...
    
			
    7. 
						
  7. 针对某p社游戏某整合包的研究
			
    软件分析 垃圾re手 最近在玩群星 创意工坊里面下载了整合包 进群下载排序文件后竟然发现要付费() 28R够吃一顿好的 马上来分析一下这个软件 这是一个四版整合包的mod安装器 其中樱花远征和新星纪元 ...
    
			
    8. 
						
  8. 高可用 & 七层负载均衡与四层负载均衡
			
    内容概要 高可用 七层负载均衡 和 四层负载均衡 内容详细 一.高可用 1.什么是高可用 一般是指2台机器启动着完全相同的业务系统,当有一台机器down机了,另外一台服务器就能快速的接管,对于访问的用 ...
    
			
    9. 
						
  9. Solution -「NOI 2012」「洛谷 P2050」美食节
			
    \(\mathcal{Description}\)   Link.   美食节提供 \(n\) 种菜品,第 \(i\) 种的需求量是 \(p_i\),菜品由 \(m\) 个厨师负责制作,第 \(j\) ...
    
			
    10. 
						
  10. Jenkins系列之pipeline语法介绍与案例
			
    Jenkins Pipeline 的核心概念: Pipeline 是一套运行于Jenkins上的工作流框架,将原本独立运行于单个或者多个节点的任务连接起来,实现单个任务难以完成的复杂流程编排与可视化. ...
    
			
    11.