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. Vue3.2中的setup语法糖,保证你看的明明白白！
			
    vue3.2 到底更新了什么? 根据原文内容的更新的内容主要有以下 5 块: 1.SSR:服务端渲染优化.@vue/server-renderer包加了一个ES模块创建, 与Node.js解耦,使在非 ...
    
			
    2. 
						
  2. 微服务架构 | 5.4 Sentinel 流控、统计和熔断的源码分析
			
    目录 前言 1. Sentinel 的自动装配 1.2 依赖引入 1.3 SentinelWebAutoConfiguration 配置类 1.4 CommonFilter 过滤器 1.5 小结 2. ...
    
			
    3. 
						
  3. ApacheCN Linux 译文集（二） 20211206 更新
			
    CentOS7 Linux 服务器秘籍 零.前言 一.安装 CentOS 二.配置系统 三.管理系统 四.用 YUM 管理包 五.管理文件系统 六.提供安全性 七.构建网络 八.使用文件传输协议 九. ...
    
			
    4. 
						
  4. 连接mysql出现“Unable to load authentication plugin 'caching_sha2_password”错误
			
    这是mysql 8.0版本才出现的问题,原因是mysql 8.0 默认使用 caching_sha2_password 身份验证机制 -- 从原来的 mysql_native_password 更改为 ...
    
			
    5. 
						
  5. RPC原理及RPC实例分析(转)
			
    出处:https://my.oschina.net/hosee/blog/711632 在学校期间大家都写过不少程序,比如写个hello world服务类,然后本地调用下,如下所示.这些程序的特点是服 ...
    
			
    6. 
						
  6. Idea 如何不通过模板创建支持Maven的JavaWeb项目
			
    手动与模板创建的区别,请自行体会. 1. 点击创建项目 2. 不勾选骨架 3.填写项目名称以及该Maven项目坐标(groupid.artifactid.version). 在仓库中,以坐标确定项目. ...
    
			
    7. 
						
  7. jsp include html 乱码问题
			
    感谢大佬:https://blog.csdn.net/sessionsong/article/details/38778853 在使用<%@ include page=""% ...
    
			
    8. 
						
  8. Java线程--Callable使用
			
    原创:转载需注明原创地址 https://www.cnblogs.com/fanerwei222/p/11871727.html Java线程--Callable使用 Callable和Runnabl ...
    
			
    9. 
						
  9. 晋升挂了！leader说不是我技术不行
			
    大家好,我是对白. 今天给大家分享一位朋友在互联网大厂晋升失败的故事,不是每一位校招生第一年都可以稳稳晋升的,这不仅取决于你的业务收益,还取决于你是否会包装自己的项目,以下为原文. 晋升 去年秋季,我 ...
    
			
    10. 
						
  10. termux vim 配置 自动补全 遇到的问题
			
    // 自动不全需要安装 pkg install proot -y // 用proot可以为手机没有root的用户来模拟一个root的环境,这里主要是经典的 Linux 文件系统布局上的模拟. //执行 ...
    
			
    11.