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最常用与实用的创建类的代码
Aug 12 Javascript
form表单只提交数据而不进行页面跳转的解决方案
Sep 18 Javascript
js解析json读取List中的实体对象示例
Mar 11 Javascript
让人蛋疼的JavaScript语法特性
Sep 30 Javascript
使用Bootstrap typeahead插件实现搜索框自动补全的方法
Jul 07 Javascript
arcgis for js 修改infowindow样式的方法
Nov 02 Javascript
JS制作类似选项卡切换的年历
Dec 03 Javascript
ng-options和ng-checked在表单中的高级运用(推荐)
Jan 21 Javascript
javascript使用btoa和atob来进行Base64转码和解码
Mar 20 Javascript
jQuery实现的滑块滑动导航效果示例
Jun 04 jQuery
Nuxt.js实现一个SSR的前端博客的示例代码
Sep 06 Javascript
layer提示框添加多个按钮选择的实例
Sep 12 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加密解密函数authcode的用法详细解析
2013/10/28 PHP
is_uploaded_file函数引发的不能上传文件问题
2013/10/29 PHP
PHP遍历并打印指定目录下所有文件实例
2014/02/10 PHP
thinkphp模板的包含与渲染实例分析
2014/11/26 PHP
php+jQuery递归调用POST循环请求示例
2016/10/14 PHP
PHP 计算至少是其他数字两倍的最大数的实现代码
2020/05/26 PHP
一个JS翻页效果
2007/07/23 Javascript
JavaScript高级程序设计 阅读笔记(二十) js错误处理
2012/08/14 Javascript
基于JavaScript 声明全局变量的三种方式详解
2013/05/07 Javascript
js实现字符串的16进制编码不加密
2014/04/25 Javascript
JavaScript中判断页面关闭、页面刷新的实现代码
2014/08/27 Javascript
javascript创建cookie、读取cookie
2016/03/31 Javascript
jQuery使用getJSON方法获取json数据完整示例
2016/09/13 Javascript
jquery 获取索引值在一定范围的列表方法
2018/01/25 jQuery
用jquery获取select标签中选中的option值及文本的示例
2018/01/25 jQuery
微信小程序网络层封装的实现(promise, 登录锁)
2019/05/08 Javascript
微信JS-SDK实现微信会员卡功能(给用户微信卡包里发送会员卡)
2019/07/25 Javascript
js模拟F11页面全屏显示
2019/09/17 Javascript
vuex+axios+element-ui实现页面请求loading操作示例
2020/02/02 Javascript
Python中常用操作字符串的函数与方法总结
2016/02/04 Python
Python实现抓取网页生成Excel文件的方法示例
2017/08/05 Python
使用 Python 实现微信群友统计器的思路详解
2018/09/26 Python
python 实现识别图片上的数字
2019/07/30 Python
使用coverage统计python web项目代码覆盖率的方法详解
2019/08/05 Python
Python代码生成视频的缩略图的实例讲解
2019/12/22 Python
Python和Anaconda和Pycharm安装教程图文详解
2020/02/04 Python
Python读取表格类型文件代码实例
2020/02/17 Python
通过实例解析Python RPC实现原理及方法
2020/07/07 Python
W3C公布最新的HTML5标准草案
2008/10/17 HTML / CSS
详解window.open被浏览器拦截的解决方案
2019/07/18 HTML / CSS
英智兴达软件测试笔试题
2016/10/12 面试题
工会主席岗位责任制
2014/02/11 职场文书
2014年护士工作总结范文
2014/11/11 职场文书
爱岗敬业事迹材料
2014/12/24 职场文书
同学会演讲稿
2019/04/02 职场文书
python 三边测量定位的实现代码
2021/04/22 Python