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 相关文章推荐
javascript之ESC(第二类混淆)
May 06 Javascript
js类中获取外部函数名的方法与代码
Sep 12 Javascript
JavaScript 工具库 Cloudgamer JavaScript Library v0.1 发布
Oct 29 Javascript
Kibo 用于处理键盘事件的Javascript工具库
Oct 28 Javascript
理解Javascript的call、apply
Dec 16 Javascript
jQuery解析json格式数据简单实例
Jan 22 Javascript
Vue.JS入门教程之处理表单
Dec 01 Javascript
JS 组件系列之Bootstrap Table的冻结列功能彻底解决高度问题
Jun 30 Javascript
node.js操作MongoDB的实例详解
Oct 11 Javascript
详解JS浏览器事件循环机制
Mar 27 Javascript
JavaScript闭包相关知识解析
Oct 19 Javascript
如何用threejs实现实时多边形折射
May 07 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
iis下php mail函数的sendmail配置方法(官方推荐)
2012/04/25 PHP
ini_set的用法介绍
2014/01/07 PHP
Zend Framework框架实现类似Google搜索分页效果
2016/11/25 PHP
php实现XML和数组的相互转化功能示例
2017/02/08 PHP
PHP中ajax无刷新上传图片与图片下载功能
2017/02/21 PHP
JSON.parse 解析字符串出错的解决方法
2010/07/08 Javascript
《JavaScript高级程序设计》阅读笔记(一) ECMAScript基础
2012/02/27 Javascript
JavaScript 学习笔记之一jQuery写法图片等比缩放以及预加载
2012/06/28 Javascript
JS实现清除指定cookies的方法
2014/09/20 Javascript
使用正则表达式的格式化与高亮显示json字符串
2014/12/03 Javascript
JavaScript中对象property的删除方法介绍
2014/12/30 Javascript
jQuery关键词说明插件cluetip使用指南
2015/04/21 Javascript
javascript格式化json显示实例分析
2015/04/21 Javascript
angular-ui-sortable实现可拖拽排序列表
2016/12/28 Javascript
javascript编程实现栈的方法详解【经典数据结构】
2017/04/11 Javascript
node.js中express-session配置项详解
2017/05/31 Javascript
angularjs2中父子组件的数据传递的实例代码
2017/07/05 Javascript
vue中的scope使用详解
2017/10/29 Javascript
详解微信小程序实现跑马灯效果(附完整代码)
2019/04/29 Javascript
JS实现密码框效果
2020/09/10 Javascript
js实现随机点名功能
2020/12/23 Javascript
关于Django外键赋值问题详解
2017/08/13 Python
python下实现二叉堆以及堆排序的示例
2017/09/29 Python
Python实现重建二叉树的三种方法详解
2018/06/23 Python
详解Python安装tesserocr遇到的各种问题及解决办法
2019/03/07 Python
ZABBIX3.2使用python脚本实现监控报表的方法
2019/07/02 Python
python单例模式原理与创建方法实例分析
2019/10/26 Python
Python中的 ansible 动态Inventory 脚本
2020/01/19 Python
Python类class参数self原理解析
2020/11/19 Python
Parfumdreams芬兰:购买香水和化妆品
2021/02/13 全球购物
小学教育毕业生自荐信
2013/11/18 职场文书
十八届三中全会报告学习材料
2014/02/17 职场文书
出售房屋协议书范本
2014/10/06 职场文书
2015年元旦晚会活动总结(学生会)
2014/11/28 职场文书
财务人员入职担保书
2015/09/22 职场文书
Nginx跨域问题解析与解决
2022/08/05 Servers