小白的jquery学习之路之04效果新闻向上无缝循环显示

15该节的原理是通过改变里面的ul的top值实现的

第一种方法，当c=4时，让c=0，我们会发现新闻刷刷的向上走，因此是不行的，没做到无缝循环显示

<html>
<head><style type="text/css">*{margin: 0px auto;list-style-type: none;}#xw{width: 500px;height: 50px;line-height: 50px;margin: 0px auto;font-size: 14px;text-align: center;position: relative;top: 0px;left: 0px;border: 1px solid green;overflow: hidden;}#xw ul{position: absolute;top: 0px;left: 0px;}#xw ul li{width: 500px;height: 50px;}</style><script src="jquery.js"></script><script type="text/javascript">$(function(){var c=0;var timer=window.setInterval(function(){c++;if(c>=4){c=0;}$("#xw ul").animate({"top":c*(-50)})},1000)})</script>
</head><body><div id="xw"><ul><li>航母炊事兵快退役了却没看过战机起降，舰长得知后安排集体参观</li><li>广东国资委原主任刘富才外逃澳大利亚4年 称年工资不到8万</li><li>黄圣依被曝上学时是小富婆，同学经常找她借钱，吃饭也是她买单</li><li>刘德华想要儿子，52岁朱丽倩挑战生理极限已怀胎5月</li>  </ul>
</div></body>
</html>

因此，我们这里提出了一种新的方法

在下面的li中多一个第一条新闻，当走下一个操作的，让它的top值瞬间设为0

$().css({'top':0px})这个没有过渡操作，$().animate({'top':0px})有过渡操作。

<html>
<head><style type="text/css">*{margin: 0px auto;list-style-type: none;}#xw{width: 500px;height: 50px;line-height: 50px;margin: 0px auto;font-size: 14px;text-align: center;position: relative;top: 0px;left: 0px;border: 1px solid green;overflow: hidden;}#xw ul{position: absolute;top: 0px;left: 0px;}#xw ul li{width: 500px;height: 50px;}</style><script src="jquery.js"></script><script type="text/javascript">$(function(){var c=0;var timer=window.setInterval(function(){c++;if(c==5){c=1;
        //让ul做一个瞬时变化，这里css没有过渡变化$("#xw ul").css({"top":'0px'})}$("#xw ul").animate({"top":c*(-50)})},1000)})</script>
</head><body><div id="xw"><ul><li>航母炊事兵快退役了却没看过战机起降，舰长得知后安排集体参观</li><li>广东国资委原主任刘富才外逃澳大利亚4年 称年工资不到8万</li><li>黄圣依被曝上学时是小富婆，同学经常找她借钱，吃饭也是她买单</li><li>刘德华想要儿子，52岁朱丽倩挑战生理极限已怀胎5月</li>  <li>航母炊事兵快退役了却没看过战机起降，舰长得知后安排集体参观</li></ul>
</div></body>
</html>

小白的jquery学习之路之04效果新闻向上无缝循环显示相关推荐

小白的jquery学习之路之天猫04 效果 fadeTo animate方法天猫图片滑动效果
效果淡入淡出 fadeTo([[s],o,[e],[fn]]) // 图片的透明度在2秒时间到0.3 $("#dog").fadeTo(2000,0.3); fad ...
jQuery 学习之路（1）：引子
一.主流 javascript 库除 jQuery 外,还有 Prototype.Dojo.YUI.ExtJS.MooTools ,其中 Prototype 较老,结构设计较为松散,ExtJS 界面 ...
jquery学习之路jquery之一：jquery选择元素的方法，太神了 2012.8.2
1.css选择器例子: a 匹配所有连接<a>标签 #sss 所有id为sss的元素 a#sss.yangshi 所有id为sss并且有yangshi类的a元素 p a.sss ...
小白的java学习之路 “ 选择结构（二）”
switch 选择结构: 为什么使用switch选择结构: switch选择结构可以更好地解决等值判断问题. switch选择结构的四个关键字: switch case default ...
小白的java学习之路 “ 选择结构（一）”
if选择结构: if选择结构是根据条件判断之后再做处理的一种语法结构. 1.if选择结构的语法: public class Demo{public static void main(String[]a ...
小白的python学习之路-turtle画不同大小的五角星
''' 作者:朱晓雯功能:绘制五角星版本:2.0 日期:3/12/2019/ 新增功能:绘制不同大小五角星 '''import turtledef draw_pentagram(size):cou ...
JQuery学习之路Part8：家族树操作(查找祖先、后代、兄弟同胞、绝对查找)【完结】
一.向上寻找获取被选元素的直接父元素语法:parent() 例: $(document).ready(function(){$("span").parent(); }); 获取 ...
我的jQuery学习之路_笔记（五）
empty和remove区别 1,empty方法: 严格的讲,empty()方法并不是删除节点,而是清空节点,它能清空元素中的所有后代节点: empty不能删除自己本身这个节点: 2,remove方法 ...
我的jQuery学习之路(笔记)——四
.css()与.addClass()设置样式的区别对于样式的设置,有css和addClass方法,那么二者的区别是什么呢. 1,可维护性 addClass的本质是通过定义个class类的样式规则,给 ...

小白的jquery学习之路之04效果新闻向上无缝循环显示

小白的jquery学习之路之04效果新闻向上无缝循环显示相关推荐

最新文章

热门文章