jquery 實(shí)現(xiàn)上下滾動(dòng)效果示例代碼
更新時(shí)間：2013年08月09日 11:10:00 作者：
上下滾動(dòng)的效果，不用說(shuō)，大家都有看到過(guò)，本文為大家介紹下使用jquery實(shí)現(xiàn)上下滾動(dòng)效果，感興趣的朋友可以參考下，希望對(duì)大家有所幫助
復(fù)制代碼 代碼如下:
<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)到頭不能再進(jìn)行操作！");
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>
相關(guān)文章
利用ASP發(fā)送和接收XML數(shù)據(jù)的處理方法與代碼
利用ASP發(fā)送和接收XML數(shù)據(jù)的處理方法與代碼...2007-11-11
經(jīng)典模式和圣杯模式都是用于解決構(gòu)造函數(shù)繼承和原型繼承的問(wèn)題,但它們?cè)趯?shí)現(xiàn)繼承的方式上有所不同,本文主要來(lái)和大家聊聊經(jīng)典模式和圣杯模式下原型,原型鏈和繼承的實(shí)現(xiàn),需要的可以參考下2023-09-09
ElementUI中el-tree如何獲取每個(gè)節(jié)點(diǎn)點(diǎn)擊的選中狀態(tài)
ElementUI中el-tree獲取每個(gè)節(jié)點(diǎn)點(diǎn)擊的選中狀態(tài),有時(shí)候需要獲取el-tree每個(gè)節(jié)點(diǎn)的點(diǎn)擊狀態(tài),可以通過(guò)以下方式,其中isCheck類型為布爾值,本文結(jié)合實(shí)例代碼介紹ElementUI中el-tree獲取每個(gè)節(jié)點(diǎn)點(diǎn)擊的選中狀態(tài),感興趣的朋友一起看看吧2023-12-12
JavaScript如何動(dòng)態(tài)創(chuàng)建table表格
這篇文章主要介紹了JavaScript如何動(dòng)態(tài)創(chuàng)建table表格，一些時(shí)候需要?jiǎng)討B(tài)的創(chuàng)建和刪除表格，接下來(lái)的文章中將為大家介紹下javascript是如何做到的，感興趣的朋友不要錯(cuò)過(guò)2015-11-11
如果AJAX加載的數(shù)據(jù)是一個(gè)HTML片段，而且這個(gè)HTML片段還包含腳本<script>塊，那么在你把這數(shù)據(jù)xmlHttp.responseText用innerHTML方法插入到當(dāng)前文檔一個(gè)元素中，你會(huì)發(fā)現(xiàn)AJAX加載回來(lái)的腳本根本沒有執(zhí)行。2010-01-01
支付寶小程序?qū)崿F(xiàn)類似微信多行輸入功能(思路詳解)
這篇文章主要介紹了支付寶小程序?qū)崿F(xiàn)類似微信多行輸入功能,輸入超過(guò) 8 行的時(shí)候會(huì)出現(xiàn)滾動(dòng),這樣做的好處就是輸入框不會(huì)直接頂?shù)巾?yè)面最頂部,支付寶小程序?qū)崿F(xiàn)多行輸入框：使用textarea多行輸入框?qū)崿F(xiàn),感興趣的朋友一起看看吧2024-02-02
js父窗口關(guān)閉時(shí)子窗口隨之關(guān)閉完美解決方案
admin注銷的時(shí)候，或者main.html關(guān)閉的時(shí)候，如何讓打開的所有新窗口一起關(guān)閉，下面有個(gè)不錯(cuò)的解決方案，大家可以參考下2014-04-04
JavaScript中函數(shù)的防抖與節(jié)流詳解
這篇文章主要為大家詳細(xì)介紹了JavaScript中函數(shù)的防抖與節(jié)流，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助2022-02-02
JavaScript實(shí)現(xiàn)簡(jiǎn)潔的俄羅斯方塊完整實(shí)例
這篇文章主要介紹了JavaScript實(shí)現(xiàn)簡(jiǎn)潔的俄羅斯方塊,以完整實(shí)例形式分析了JavaScript實(shí)現(xiàn)俄羅斯方塊游戲的具體技巧,代碼備有詳盡的注釋便于理解,需要的朋友可以參考下2016-03-03
js前端如何寫一個(gè)精確的倒計(jì)時(shí)代碼
關(guān)于寫倒計(jì)時(shí)大家可能都都比較熟悉，使用 setTimeout 或 setInterval 就可以搞定。幾秒鐘或者幾分鐘的倒計(jì)時(shí)這樣寫沒有問(wèn)題，但是如果是長(zhǎng)時(shí)間的倒計(jì)時(shí)，這樣寫就會(huì)不準(zhǔn)確2019-10-10