jquery 實現(xiàn)上下滾動效果示例代碼
更新時間：2013年08月09日 11:10:00 作者：
上下滾動的效果，不用說，大家都有看到過，本文為大家介紹下使用jquery實現(xiàn)上下滾動效果，感興趣的朋友可以參考下，希望對大家有所幫助
復制代碼 代碼如下:
<script type="text/javascript" src="script/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(function() {
var page = 1;
var i = 1;
var conheight = $('.con li').height();
var lilen = $('li').length;
var len = Math.ceil( lilen / i );
alert(conheight+ " " + len);
//alert("page:"+page+" i:"+i+" conheight:"+conheight+" lilen:"+lilen+" len:"+len)
$('.next').click(function() {
if( page == len){
alert("已經(jīng)到底不能再在操作！");
return false;
}
$('.con_list').animate({top:'-=' + conheight},'slow');
page++;
//if( page == len ) {
// $('.con_list').animate({top:0},'slow');
// page = 1;
// }else{
// $('.con_list').animate({top:'-=' + conheight},'slow');
// page++;
//}
});
$('.prev').click(function() {
if(page == 1){
alert("已經(jīng)到頭不能再進行操作！");
return false;
}
$('.con_list').animate({top:'+=' + conheight},'slow');
page--;
//if( page == 1 ) {
// $('.con_list').animate({top:'-=' + conheight*(len - 1)},'slow');
// page = len;
//}else{
// $('.con_list').animate({top:'+=' + conheight},'slow');
// page--;
//}
});
})
</script>
<style type="text/css">
* {
margin:0;padding:0
}
.prev,.next{
width:100px;height:20px;background:#333;cursor:pointer
}
.con{
width:100px;height:300px;overflow:hidden;position:relative
}
.con_list{
position:relative
}
.con li{
height:100px
}
.one{
background:#F90
}
.two {
background:#69C
}
.three{
background:#633
}
</style>
<body>
<div class="prev"></div>
<div class="con">
<div class="con_list">
<ul>
<li class="one">11111111111111111111</li>
<li class="two">22222222222222222222</li>
<li class="three">333333333333333333333</li>
<li class="three">444444444444444444444</li>
<li class="one">5555555555555555555555</li>
<li class="two">6666666666666666666666666</li>
<li class="one">7777777777777777777777777</li>
<li class="two">88888888888888888888</li>
<li class="one">99999999999999999999</li>
<li class="one">10103000000000</li>
</ul>
</div>
</div>
<div class="next"></div>
</body>
相關文章
利用ASP發(fā)送和接收XML數(shù)據(jù)的處理方法與代碼
利用ASP發(fā)送和接收XML數(shù)據(jù)的處理方法與代碼...2007-11-11
經(jīng)典模式和圣杯模式都是用于解決構造函數(shù)繼承和原型繼承的問題,但它們在實現(xiàn)繼承的方式上有所不同,本文主要來和大家聊聊經(jīng)典模式和圣杯模式下原型,原型鏈和繼承的實現(xiàn),需要的可以參考下2023-09-09
ElementUI中el-tree如何獲取每個節(jié)點點擊的選中狀態(tài)
ElementUI中el-tree獲取每個節(jié)點點擊的選中狀態(tài),有時候需要獲取el-tree每個節(jié)點的點擊狀態(tài),可以通過以下方式,其中isCheck類型為布爾值,本文結合實例代碼介紹ElementUI中el-tree獲取每個節(jié)點點擊的選中狀態(tài),感興趣的朋友一起看看吧2023-12-12
JavaScript如何動態(tài)創(chuàng)建table表格
這篇文章主要介紹了JavaScript如何動態(tài)創(chuàng)建table表格，一些時候需要動態(tài)的創(chuàng)建和刪除表格，接下來的文章中將為大家介紹下javascript是如何做到的，感興趣的朋友不要錯過2015-11-11
如果AJAX加載的數(shù)據(jù)是一個HTML片段，而且這個HTML片段還包含腳本<script>塊，那么在你把這數(shù)據(jù)xmlHttp.responseText用innerHTML方法插入到當前文檔一個元素中，你會發(fā)現(xiàn)AJAX加載回來的腳本根本沒有執(zhí)行。2010-01-01
支付寶小程序實現(xiàn)類似微信多行輸入功能(思路詳解)
這篇文章主要介紹了支付寶小程序實現(xiàn)類似微信多行輸入功能,輸入超過 8 行的時候會出現(xiàn)滾動,這樣做的好處就是輸入框不會直接頂?shù)巾撁孀铐敳?支付寶小程序實現(xiàn)多行輸入框：使用textarea多行輸入框實現(xiàn),感興趣的朋友一起看看吧2024-02-02
admin注銷的時候，或者main.html關閉的時候，如何讓打開的所有新窗口一起關閉，下面有個不錯的解決方案，大家可以參考下2014-04-04
JavaScript中函數(shù)的防抖與節(jié)流詳解
這篇文章主要為大家詳細介紹了JavaScript中函數(shù)的防抖與節(jié)流，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-02-02
JavaScript實現(xiàn)簡潔的俄羅斯方塊完整實例
這篇文章主要介紹了JavaScript實現(xiàn)簡潔的俄羅斯方塊,以完整實例形式分析了JavaScript實現(xiàn)俄羅斯方塊游戲的具體技巧,代碼備有詳盡的注釋便于理解,需要的朋友可以參考下2016-03-03
關于寫倒計時大家可能都都比較熟悉，使用 setTimeout 或 setInterval 就可以搞定。幾秒鐘或者幾分鐘的倒計時這樣寫沒有問題，但是如果是長時間的倒計時，這樣寫就會不準確2019-10-10