基于JQuery打造无缝滚动新闻
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="#">新闻1111a>li> <li><a href="#">新闻2222a>li> <li><a href="#">新闻3333a>li> <li><a href="#">新闻4444a>li> <li><a href="#">新闻5555a>li> <li><a href="#">新闻6666a>li> <li><a href="#">新闻7777a>li> <li><a href="#">新闻8888a>li> <li><a href="#">新闻9999a>li> <li><a href="#">新闻1010a>li> ul> div> div> body> html>
效果如图:
运行原理:
因为本人比较小白,不知道怎么更专业的描述,所以都把知识浓缩到图片里了,看图:
PS:第一次发博,如果有什么解释不清楚的,或不明白的欢迎回复提问!