小白的jquery学习之路之04效果新闻向上无缝循环显示
生活随笔
收集整理的這篇文章主要介紹了
小白的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效果新闻向上无缝循环显示的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 【8583】ISO8583各域段的说明
- 下一篇： 风青杨：马云为何被浙商“炮…