jQuery排行榜列表文字向上間歇滾動代碼



145 577 193



特效描述:排行榜列表 文字滾動 向上間歇滾動,jQuery文字逐行,間歇,向上滾動代碼

代碼結構

1. 引入CSS

<link href="css/index.css" rel="stylesheet" type="text/css">

2. 引入JS

<script src="js/jquery.min.js"></script>

3. HTML代碼

<!-- -------------搖獎排行榜---------------  -->
<div class="Top_Record">
	<div class="record_Top"><p>搖獎排行榜</p></div>
    <div class="topRec_List">
  		<dl>
        	<dd>編號</dd>
        	<dd>姓名</dd>
        	<dd>獎項</dd>
        	<dd>時間</dd>
        </dl>
        <div class="maquee">
            <ul>
                <li>
                    <div>1</div>
                    <div>王**</div>
                    <div>中了30元</div>
                    <div>2014/12/30 14:20</div>
                </li> 
                <li>
                    <div>2</div>
                    <div>王**</div>
                    <div>中了30元</div>
                    <div>2014/12/30 14:20</div>
                </li> 
                <li>
                    <div>3</div>
                    <div>王**</div>
                    <div>中了30元</div>
                    <div>2014/12/30 14:20</div>
                </li> 
                <li>
                    <div>4</div>
                    <div>王**</div>
                    <div>中了30元</div>
                    <div>2014/12/30 14:20</div>
                </li> 
                <li>
                    <div>5</div>
                    <div>王**</div>
                    <div>中了30元</div>
                    <div>2014/12/30 14:20</div>
                </li> 
                <li>
                    <div>6</div>
                    <div>王**</div>
                    <div>中了30元</div>
                    <div>2014/12/30 14:20</div>
                </li> 
                <li>
                    <div>7</div>
                    <div>王**</div>
                    <div>中了30元</div>
                    <div>2014/12/30 14:20</div>
                </li> 
                <li>
                    <div>8</div>
                    <div>王**</div>
                    <div>中了30元</div>
                    <div>2014/12/30 14:20</div>
                </li> 
            </ul>
        </div>
    </div>
</div> 
<div class="apple">
	<ul>
		<li><a href="#" target="_blank">你是我的小丫小蘋果 </a></li>  
        <li><a href="#" target="_blank">怎么愛你都不嫌多</a></li> 
        <li><a href="#" target="_blank">紅紅的小臉兒溫暖我的心窩 </a></li>  
        <li><a href="#" target="_blank">點亮我生命的火 火火火火</a></li> 
        <li><a href="#" target="_blank">你是我的小丫小蘋果 </a></li>  
        <li><a href="#" target="_blank">就像天邊最美的云朵</a></li>  
        <li><a href="#" target="_blank">春天又來到了花開滿山坡 </a></li>  
        <li><a href="#" target="_blank">種下希望就會收獲</a></li> 
    </ul> 
</div>
<script type="text/javascript"> 
	  function autoScroll(obj){  
			$(obj).find("ul").animate({  
				marginTop : "-39px"  
			},500,function(){  
				$(this).css({marginTop : "0px"}).find("li:first").appendTo(this);  
			})  
		}  
		$(function(){  
			setInterval('autoScroll(".maquee")',3000);
			setInterval('autoScroll(".apple")',2000);
		}) 
</script>



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊


熱門標簽: 滑動星星打分 其他 排行榜
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

加群請備注:從官網了解到

老夫子电子