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数据的处理方法与代码

    利用ASP发送和接收XML数据的处理方法与代码

    利用ASP发送和接收XML数据的处理方法与代码...
    2007-11-11
  • 浅析JS中的原型,原型链和继承

    浅析JS中的原型,原型链和继承

    经典模式和圣杯模式都是用于解决构造函数继承和原型继承的问题,但它们在实现继承的方式上有所不同,本文主要来和大家聊聊经典模式和圣杯模式下原型,原型链和继承的实现,需要的可以参考下
    2023-09-09
  • ElementUI中el-tree如何获取每个节点点击的选中状态

    ElementUI中el-tree如何获取每个节点点击的选中状态

    ElementUI中el-tree获取每个节点点击的选中状态,有时候需要获取el-tree每个节点的点击状态,可以通过以下方式,其中isCheck类型为布尔值,本文结合实例代码介绍ElementUI中el-tree获取每个节点点击的选中状态,感兴趣的朋友一起看看吧
    2023-12-12
  • JavaScript如何动态创建table表格

    JavaScript如何动态创建table表格

    这篇文章主要介绍了JavaScript如何动态创建table表格,一些时候需要动态的创建和删除表格,接下来的文章中将为大家介绍下javascript是如何做到的,感兴趣的朋友不要错过
    2015-11-11
  • 用AJAX返回HTML片段中的JavaScript脚本

    用AJAX返回HTML片段中的JavaScript脚本

    如果AJAX加载的数据是一个HTML片段,而且这个HTML片段还包含脚本<script>块,那么在你把这数据xmlHttp.responseText用innerHTML方法插入到当前文档一个元素中,你会发现AJAX加载回来的脚本根本没有执行。
    2010-01-01
  • 支付宝小程序实现类似微信多行输入功能(思路详解)

    支付宝小程序实现类似微信多行输入功能(思路详解)

    这篇文章主要介绍了支付宝小程序实现类似微信多行输入功能,输入超过 8 行的时候会出现滚动,这样做的好处就是输入框不会直接顶到页面最顶部,支付宝小程序实现多行输入框:使用textarea多行输入框实现,感兴趣的朋友一起看看吧
    2024-02-02
  • js父窗口关闭时子窗口随之关闭完美解决方案

    js父窗口关闭时子窗口随之关闭完美解决方案

    admin注销的时候,或者main.html关闭的时候,如何让打开的所有新窗口一起关闭,下面有个不错的解决方案,大家可以参考下
    2014-04-04
  • JavaScript中函数的防抖与节流详解

    JavaScript中函数的防抖与节流详解

    这篇文章主要为大家详细介绍了JavaScript中函数的防抖与节流,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助
    2022-02-02
  • JavaScript实现简洁的俄罗斯方块完整实例

    JavaScript实现简洁的俄罗斯方块完整实例

    这篇文章主要介绍了JavaScript实现简洁的俄罗斯方块,以完整实例形式分析了JavaScript实现俄罗斯方块游戏的具体技巧,代码备有详尽的注释便于理解,需要的朋友可以参考下
    2016-03-03
  • js前端如何写一个精确的倒计时代码

    js前端如何写一个精确的倒计时代码

    关于写倒计时大家可能都都比较熟悉,使用 setTimeout 或 setInterval 就可以搞定。几秒钟或者几分钟的倒计时这样写没有问题,但是如果是长时间的倒计时,这样写就会不准确
    2019-10-10

最新评论