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 相关文章推荐
(function($){...})(jQuery)的意思
Jul 22 Javascript
弹出层之1:JQuery.Boxy (一) 使用介绍
Oct 06 Javascript
15个款优秀的 jQuery 图片特效插件推荐
Nov 21 Javascript
javascript 进阶篇3 Ajax 、JSON、 Prototype介绍
Mar 14 Javascript
javascript类型转换示例
Apr 29 Javascript
jQuery处理json数据返回数组和输出的方法
Mar 11 Javascript
jquery中live()方法和bind()方法区别分析
Jun 23 Javascript
清除浏览器缓存的几种方法总结(必看)
Dec 09 Javascript
jQuery创建及操作xml格式数据示例
May 26 jQuery
微信公众号H5支付接口调用方法
Jan 10 Javascript
vue 使用element-ui中的Notification自定义按钮并实现关闭功能及如何处理多个通知
Aug 17 Javascript
WebStorm中如何将自己的代码上传到github示例详解
Oct 28 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
PHP 配置open_basedir 让各虚拟站点独立运行
2009/11/12 PHP
检查用户名是否已在mysql中存在的php写法
2014/01/20 PHP
yii框架使用分页的方法分析
2019/07/25 PHP
在多个页面使用同一个HTML片段《续》
2011/03/04 Javascript
JavaScript 处理Iframe自适应高度(同或不同域名下)
2013/03/29 Javascript
JS延迟加载加快页面打开速度示例代码
2013/12/30 Javascript
JavaScript实现算术平方根算法-代码超简单
2015/09/11 Javascript
javascript中的作用域和闭包详解
2016/01/13 Javascript
JavaScript中removeChild 方法开发示例代码
2016/08/15 Javascript
微信小程序上滑加载下拉刷新(onscrollLower)分批加载数据(一)
2017/05/11 Javascript
浅谈JavaScript中的属性:如何遍历属性
2017/09/14 Javascript
vue实现页面加载动画效果
2017/09/19 Javascript
Vue中之nextTick函数源码分析详解
2017/10/17 Javascript
webpack构建的详细流程探底
2018/01/08 Javascript
node后端服务保活的实现
2019/11/10 Javascript
python3图片转换二进制存入mysql
2013/12/06 Python
爬山算法简介和Python实现实例
2014/04/26 Python
Python FTP操作类代码分享
2014/05/13 Python
Django imgareaselect手动剪切头像实现方法
2015/05/26 Python
Python简单实现安全开关文件的两种方式
2016/09/19 Python
Python的多维空数组赋值方法
2018/04/13 Python
python 标准差计算的实现(std)
2019/07/29 Python
Numpy对数组的操作:创建、变形(升降维等)、计算、取值、复制、分割、合并
2019/08/28 Python
pandas apply使用多列计算生成新的列实现示例
2021/02/24 Python
Rossignol金鸡美国官网:始于1907年法国百年雪具品牌
2019/03/06 全球购物
英语专业学生个人求职信范文
2014/01/06 职场文书
联谊会主持词
2014/03/26 职场文书
后勤管理员岗位职责
2014/08/27 职场文书
大一新生期末自我评价
2014/09/12 职场文书
六查六看个人剖析材料
2014/10/14 职场文书
学生评语集锦
2015/01/04 职场文书
2015年前台文员工作总结
2015/05/18 职场文书
2015年骨干教师工作总结
2015/05/26 职场文书
上班旷工检讨书
2015/08/15 职场文书
PyQt5结合QtDesigner实现文本框读写操作
2021/06/11 Python
Java Spring 控制反转(IOC)容器详解
2021/10/05 Java/Android