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 相关文章推荐
基于JQUERY的两个ListBox子项互相调整的实现代码
May 07 Javascript
Angularjs中UI Router的使用方法
May 14 Javascript
浅谈Sublime Text 3运行JavaScript控制台
Jun 06 Javascript
JS基于HTML5的canvas标签实现炫目的色相球动画效果实例
Aug 24 Javascript
ES6新特征数字、数组、字符串
Oct 01 Javascript
JS实现密码框的显示密码和隐藏密码功能示例
Dec 26 Javascript
JS正则匹配URL网址的方法(可匹配www,http开头的一切网址)
Jan 06 Javascript
在bootstrap中实现轮播图实例代码
Jun 11 Javascript
微信小程序图片宽100%显示并且不变形
Jun 21 Javascript
原生JS实现Ajax跨域请求flask响应内容
Oct 24 Javascript
详解vue移动端项目代码拆分记录
Mar 15 Javascript
ES6学习笔记之let与const用法实例分析
Jan 22 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代码
2008/04/09 PHP
linux命令之调试工具strace的深入分析
2013/06/03 PHP
php导入大量数据到mysql性能优化技巧
2014/12/29 PHP
PHP编写daemon process 实例详解
2016/11/13 PHP
php实现 master-worker 守护多进程模式的实例代码
2019/07/20 PHP
JavaScript Date对象使用总结
2009/05/14 Javascript
使用js检测浏览器的实现代码
2013/05/14 Javascript
jquery隐藏标签和显示标签的实例
2013/11/11 Javascript
nodejs简单实现中英文翻译
2015/05/04 NodeJs
JS面向对象(3)之Object类,静态属性,闭包,私有属性, call和apply的使用,继承的三种实现方法
2016/02/25 Javascript
Node.js 回调函数实例详解
2017/07/06 Javascript
vue通过cookie获取用户登录信息的思路详解
2018/10/30 Javascript
详解JavaScript函数callee、call、apply的区别
2019/03/08 Javascript
javascript实现贪吃蛇小练习
2020/07/05 Javascript
JavaScript检测是否开启了控制台(F12调试工具)
2020/10/02 Javascript
快速解决vue2+vue-cli3项目ie兼容的问题
2020/11/17 Vue.js
[01:00:35]2018DOTA2亚洲邀请赛3月30日B组 EffcetVSMineski
2018/03/31 DOTA
对于Python的Django框架部署的一些建议
2015/04/09 Python
Django中传递参数到URLconf的视图函数中的方法
2015/07/18 Python
Python常用知识点汇总
2016/05/08 Python
python使用电子邮件模块smtplib的方法
2016/08/28 Python
python Flask实现restful api service
2017/12/04 Python
Python FFT合成波形的实例
2019/12/04 Python
Python限制内存和CPU使用量的方法(Unix系统适用)
2020/08/04 Python
J.Crew官网:美国知名休闲服装品牌
2017/05/19 全球购物
阿联酋优惠券服务:Living Kool
2019/12/12 全球购物
Stührling手表官方网站:男女高品质时尚手表的领先零售商
2021/01/07 全球购物
新闻学专业个人求职信写作
2014/02/04 职场文书
致标枪运动员广播稿
2014/02/06 职场文书
毕业实习证明(4篇)
2014/10/28 职场文书
综合素质评价个性与发展自我评价
2015/03/06 职场文书
人事行政主管岗位职责
2015/04/09 职场文书
公司人力资源管理制度
2015/08/05 职场文书
小学生组织委员竞选稿
2015/11/21 职场文书
JavaScript offset实现鼠标坐标获取和窗口内模块拖动
2021/05/30 Javascript
MySQL优化之慢日志查询
2022/06/10 MySQL