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 相关文章推荐
C#中TrimStart,TrimEnd,Trim在javascript上的实现
Jan 17 Javascript
25个优雅的jQuery Tooltip插件推荐
May 25 Javascript
javascript实现二级级联菜单的简单制作
Nov 19 Javascript
jQuery侧边栏实现代码
May 06 Javascript
基于JS实现无缝滚动思路及代码分享
Jun 07 Javascript
angular 动态组件类型详解(四种组件类型)
Feb 22 Javascript
jQuery 开发之EasyUI 添加数据的实例
Sep 26 jQuery
Vue项目使用CDN优化首屏加载问题
Apr 01 Javascript
ios设备中angularjs无法改变页面title的解决方法
Sep 13 Javascript
VeeValidate 的使用场景以及配置详解
Jan 11 Javascript
javascript实现文字跑马灯效果
Jun 18 Javascript
关于React Native 无法链接模拟器的问题
Jun 21 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类中Static方法效率测试代码
2010/10/17 PHP
PHP里8个鲜为人知的安全函数分析
2014/12/09 PHP
PHP session文件独占锁引起阻塞问题解决方法
2015/05/12 PHP
PHP输出缓冲控制Output Control系列函数详解
2015/07/02 PHP
php获取远程文件的内容和大小
2015/11/03 PHP
Laravel 5.4重新登录实现跳转到登录前页面的原理和方法
2017/07/13 PHP
JavaScript Title、alt提示(Tips)实现源码解读
2010/12/12 Javascript
js随机颜色代码的多种实现方式
2013/04/23 Javascript
js螺旋动画效果的具体实例
2013/11/15 Javascript
node.js WEB开发中图片验证码的实现方法
2014/06/03 Javascript
jQuery中remove()方法用法实例
2014/12/25 Javascript
json2.js 入门教程之使用方法与实例分析
2017/09/14 Javascript
JS实现自定义状态栏动画文字效果示例
2017/10/12 Javascript
vue中的scope使用详解
2017/10/29 Javascript
解决webpack+Vue引入iView找不到字体文件的问题
2018/09/28 Javascript
jQuery+Datatables实现表格批量删除功能【推荐】
2018/10/24 jQuery
vue数据操作之点击事件实现num加减功能示例
2019/01/19 Javascript
JS实现的定时器展示简单秒表、页面弹框及跳转操作完整示例
2020/01/26 Javascript
Node.js 在本地生成日志文件的方法
2020/02/07 Javascript
详解微信小程序「渲染层网络层错误」的解决方法
2021/01/06 Javascript
Python的多态性实例分析
2015/07/07 Python
Python字典简介以及用法详解
2016/11/15 Python
使用Python对MySQL数据操作
2017/04/06 Python
遗传算法之Python实现代码
2017/10/10 Python
Python中存取文件的4种不同操作
2018/07/02 Python
Python计算库numpy进行方差/标准方差/样本标准方差/协方差的计算
2018/12/28 Python
Python图像处理实现两幅图像合成一幅图像的方法【测试可用】
2019/01/04 Python
Python从入门到精通之环境搭建教程图解
2019/09/26 Python
文明学生标兵事迹
2014/01/21 职场文书
2014道德模范事迹材料
2014/02/16 职场文书
优秀员工获奖感言
2014/03/01 职场文书
社区平安建设方案
2014/05/25 职场文书
运动会广播稿50字-100字
2014/10/11 职场文书
使用PDF.js渲染canvas实现预览pdf的效果示例
2021/04/17 Javascript
Ajax异步刷新功能及简单案例
2021/11/20 Javascript
「地球外少年少女」BD发售宣传CM公开
2022/03/21 日漫