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 相关文章推荐
客户端脚本中常常出现的一些问题和调试技巧
Jan 09 Javascript
jquery ajax中使用jsonp的限制解决方法
Nov 22 Javascript
jQuery仿Flash上下翻动的中英文导航菜单实例
Mar 10 Javascript
JS显示日历和天气的方法
Mar 01 Javascript
jquery ezUI 双击行记录弹窗查看明细的实现方法
Jun 01 Javascript
JavaScript DOM 对象深入了解
Jul 20 Javascript
js改变html的原有内容实现方法
Oct 05 Javascript
基于Node.js + WebSocket打造即时聊天程序嗨聊
Nov 29 Javascript
微信小程序实现自定义picker选择器弹窗内容
May 26 Javascript
微信小程序缓存过期时间的使用详情
May 12 Javascript
webpack4 从零学习常用配置(小结)
May 28 Javascript
es6函数中的作用域实例分析
Apr 18 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编程之高级技巧——利用Mysql函数
2006/10/09 PHP
php 中英文语言转换类代码
2011/08/11 PHP
PHP的autoload机制的实现解析
2012/09/15 PHP
推荐一款PHP+jQuery制作的列表分页的功能模块
2014/10/14 PHP
WordPress主题制作中自定义头部的相关PHP函数解析
2016/01/08 PHP
Javascript 汉字字节判断
2009/08/01 Javascript
javascript preload&amp;lazy load
2010/05/13 Javascript
jQuery分别获取选中的复选框值的示例
2014/06/17 Javascript
javascript中attachEvent用法实例分析
2015/05/14 Javascript
js console.log打印对像与数组用法详解
2016/01/21 Javascript
Bootstrap3制作自己的导航栏
2016/05/12 Javascript
老生常谈javascript的类型转换
2016/10/12 Javascript
jQuery实现文字自动横移
2017/01/08 Javascript
Vue.set()动态的新增与修改数据,触发视图更新的方法
2018/09/15 Javascript
Vue项目中使用WebUploader实现文件上传的方法
2019/07/21 Javascript
Vue 组件的挂载与父子组件的传值实例
2020/09/02 Javascript
vue-video-player视频播放器使用配置详解
2020/10/23 Javascript
python3抓取中文网页的方法
2015/07/28 Python
python制作websocket服务器实例分享
2016/11/20 Python
Python IDLE 错误:IDLE''s subprocess didn''t make connection 的解决方案
2017/02/13 Python
5个很好的Python面试题问题答案及分析
2018/01/19 Python
Python使用matplotlib模块绘制图像并设置标题与坐标轴等信息示例
2018/05/04 Python
python中的decorator的作用详解
2018/07/26 Python
Python多进程入门、分布式进程数据共享实例详解
2019/06/03 Python
浅谈Python类中的self到底是干啥的
2019/11/11 Python
Python预测2020高考分数和录取情况
2020/07/08 Python
python中@property的作用和getter setter的解释
2020/12/22 Python
Python中全局变量和局部变量的理解与区别
2021/02/07 Python
感恩父母的演讲稿
2014/05/06 职场文书
机关党员四风问题个人整改措施
2014/10/26 职场文书
公务员年度个人总结
2015/02/12 职场文书
2015年班组长工作总结
2015/04/10 职场文书
会计继续教育培训心得体会
2016/01/19 职场文书
Python使用random模块实现掷骰子游戏的示例代码
2021/04/29 Python
尝试使用Python爬取城市租房信息
2022/04/12 Python
win7配置本地ftp服务器的图文教程
2022/08/05 Servers