jquery 实现上下滚动效果示例代码


Posted in Javascript onAugust 09, 2013
<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>
Javascript 相关文章推荐
可以支持多中格式的JS键盘
May 02 Javascript
看了就知道什么是JSON
Dec 09 Javascript
jquery 回车事件实现代码
Aug 23 Javascript
javascript验证上传文件的类型限制必须为某些格式
Nov 14 Javascript
JS面向对象编程详解
Mar 06 Javascript
浅谈jQuery中的checkbox问题
Aug 10 Javascript
angularjs实现上拉加载和下拉刷新数据功能
Jun 12 Javascript
React-router4路由监听的实现
Aug 07 Javascript
JS通过位运算实现权限加解密
Aug 14 Javascript
vue实现在一个方法执行完后执行另一个方法的示例
Aug 25 Javascript
angularJs复选框checkbox选中进行ng-show显示隐藏的方法
Oct 08 Javascript
Node.js折腾记一:读指定文件夹,输出该文件夹的文件树详解
Apr 20 Javascript
15条JavaScript最佳实践小结
Aug 09 #Javascript
web网页按比例显示图片实现原理及js代码
Aug 09 #Javascript
html向js方法传递参数具体实现
Aug 08 #Javascript
js获取控件位置以及不同浏览器中的差别介绍
Aug 08 #Javascript
用JavaScript计算在UTF-8下存储字符串占用字节数
Aug 08 #Javascript
Jquery chosen动态设置值实例介绍
Aug 08 #Javascript
extjs两个tbar问题探讨
Aug 08 #Javascript
You might like
简单的cookie计数器实现源码
2013/06/07 PHP
yii通过小物件生成view的方法
2016/10/08 PHP
JavaScript中this关键字使用方法详解
2007/03/08 Javascript
点击按钮自动加关注的代码(sina微博/QQ空间/人人网/腾讯微博)
2014/01/02 Javascript
jquerymobile局部渲染的各种刷新方法小结
2014/03/05 Javascript
Javascript中使用parseInt函数需要注意的问题
2015/04/02 Javascript
JavaScipt中栈的实现方法
2016/02/17 Javascript
js+css实现回到顶部按钮(back to top)
2016/03/02 Javascript
JS深度拷贝Object Array实例分析
2016/03/31 Javascript
JS实现漂亮的时间选择框效果
2016/08/20 Javascript
不使用script导入js文件的几种方法
2016/10/27 Javascript
JS变量中有var定义和无var定义的区别以及es6中let命令和const命令
2017/02/19 Javascript
angularjs利用directive实现移动端自定义软键盘的示例
2017/09/20 Javascript
ionic3+Angular4实现接口请求及本地json文件读取示例
2017/10/11 Javascript
Vue中render方法的使用详解
2018/01/26 Javascript
微信小程序跳转到其他网页(外部链接)的实现方法
2019/09/20 Javascript
Vue中父子组件的值传递与方法传递
2020/09/28 Javascript
工作中常用js功能汇总
2020/11/07 Javascript
Python实现的文本对比报告生成工具示例
2018/05/22 Python
Python实现输入二叉树的先序和中序遍历,再输出后序遍历操作示例
2018/07/27 Python
Python自定义函数计算给定日期是该年第几天的方法示例
2019/05/30 Python
Python PyCharm如何进行断点调试
2019/07/05 Python
tensorflow之变量初始化(tf.Variable)使用详解
2020/02/06 Python
Keras中的多分类损失函数用法categorical_crossentropy
2020/06/11 Python
python 使用三引号时容易犯的小错误
2020/10/21 Python
python中reload重载实例用法
2020/12/15 Python
CSS3 Flex 弹性布局实例代码详解
2018/11/01 HTML / CSS
Spongelle官网:美国的创意护肤洗护品牌
2019/05/15 全球购物
世界上最大的艺术社区:SAA
2020/12/30 全球购物
大学同学聚会邀请函
2014/01/29 职场文书
关心下一代工作先进事迹
2014/08/15 职场文书
购房公证委托书(2014版)
2014/09/12 职场文书
个人股份合作协议书
2014/10/24 职场文书
优秀团员自我评价
2015/03/10 职场文书
2015年小学校长工作总结
2015/05/19 职场文书
CSS中em的正确打开方式详解
2021/04/08 HTML / CSS