jquery 实现上下滚动效果示例代码
更新时间：2013年08月09日 11:10:00 作者：
上下滚动的效果，不用说，大家都有看到过，本文为大家介绍下使用jquery实现上下滚动效果，感兴趣的朋友可以参考下，希望对大家有所帮助
复制代码 代码如下:
<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("已经到底不能再在操作！");
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("已经到头不能再进行操作！");
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发送和接收XML数据的处理方法与代码...2007-11-11
经典模式和圣杯模式都是用于解决构造函数继承和原型继承的问题,但它们在实现继承的方式上有所不同,本文主要来和大家聊聊经典模式和圣杯模式下原型,原型链和继承的实现,需要的可以参考下2023-09-09
ElementUI中el-tree如何获取每个节点点击的选中状态
ElementUI中el-tree获取每个节点点击的选中状态,有时候需要获取el-tree每个节点的点击状态,可以通过以下方式,其中isCheck类型为布尔值,本文结合实例代码介绍ElementUI中el-tree获取每个节点点击的选中状态,感兴趣的朋友一起看看吧2023-12-12
这篇文章主要介绍了JavaScript如何动态创建table表格，一些时候需要动态的创建和删除表格，接下来的文章中将为大家介绍下javascript是如何做到的，感兴趣的朋友不要错过2015-11-11
如果AJAX加载的数据是一个HTML片段，而且这个HTML片段还包含脚本<script>块，那么在你把这数据xmlHttp.responseText用innerHTML方法插入到当前文档一个元素中，你会发现AJAX加载回来的脚本根本没有执行。2010-01-01
这篇文章主要介绍了支付宝小程序实现类似微信多行输入功能,输入超过 8 行的时候会出现滚动,这样做的好处就是输入框不会直接顶到页面最顶部,支付宝小程序实现多行输入框：使用textarea多行输入框实现,感兴趣的朋友一起看看吧2024-02-02
admin注销的时候，或者main.html关闭的时候，如何让打开的所有新窗口一起关闭，下面有个不错的解决方案，大家可以参考下2014-04-04
这篇文章主要为大家详细介绍了JavaScript中函数的防抖与节流，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助2022-02-02
这篇文章主要介绍了JavaScript实现简洁的俄罗斯方块,以完整实例形式分析了JavaScript实现俄罗斯方块游戏的具体技巧,代码备有详尽的注释便于理解,需要的朋友可以参考下2016-03-03
关于写倒计时大家可能都都比较熟悉，使用 setTimeout 或 setInterval 就可以搞定。几秒钟或者几分钟的倒计时这样写没有问题，但是如果是长时间的倒计时，这样写就会不准确2019-10-10
最新评论