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 ui(接口)介绍
Sep 17 Javascript
12款经典的白富美型—jquery图片轮播插件—前端开发必备
Jan 08 Javascript
js 实现菜单左右滚动显示示例介绍
Nov 21 Javascript
jquery操作对象数组元素方法详解
Nov 26 Javascript
JS是按值传递还是按引用传递
Jan 30 Javascript
基于jquery实现放大镜效果
Aug 17 Javascript
JS给Array添加是否包含字符串的简单方法
Oct 29 Javascript
JavaScript中String对象的方法介绍
Jan 04 Javascript
深入浅析javascript函数中with
Oct 28 Javascript
JS散列表碰撞处理、开链法、HashTable散列示例
Feb 08 Javascript
JS实现吸顶特效
Jan 08 Javascript
vue实现动态给id赋值,点击事件获取当前点击的元素的id操作
Nov 09 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
AMFPHP php远程调用(RPC, Remote Procedure Call)工具 快速入门教程
2010/05/10 PHP
搭建自己的PHP MVC框架详解
2017/08/16 PHP
实现图片预加载的三大方法及优缺点分析
2014/11/19 Javascript
Javascript编程中几种继承方式比较分析
2015/11/28 Javascript
jquery中取消和绑定hover事件的实现代码
2016/06/02 Javascript
微信小程序 获取当前地理位置和经纬度实例代码
2016/12/05 Javascript
nodejs项目windows下开机自启动的方法
2017/11/22 NodeJs
element ui里dialog关闭后清除验证条件方法
2018/02/26 Javascript
在vue项目中,使用axios跨域处理
2018/03/07 Javascript
node前端模板引擎Jade之标签的基本写法
2018/05/11 Javascript
vue中slot(插槽)的介绍与使用
2018/11/12 Javascript
Vue项目中使用better-scroll实现菜单映射功能方法
2019/09/11 Javascript
详解vue页面首次加载缓慢原因及解决方案
2019/11/06 Javascript
[35:27]完美世界DOTA2联赛循环赛 GXR vs FTD BO2第二场 10.29
2020/10/29 DOTA
Python二分法搜索算法实例分析
2015/05/11 Python
利用Python中SocketServer 实现客户端与服务器间非阻塞通信
2016/12/15 Python
python机器人行走步数问题的解决
2018/01/29 Python
Python中py文件引用另一个py文件变量的方法
2018/04/29 Python
Python之时间和日期使用小结
2019/02/14 Python
Django Form and ModelForm的区别与使用
2019/12/06 Python
Python读取文件内容为字符串的方法(多种方法详解)
2020/03/04 Python
跨域修改iframe页面内容详解
2019/10/31 HTML / CSS
英国女性运动服品牌:Sweaty Betty
2018/11/08 全球购物
Linux面试题LINUX系统类
2014/11/19 面试题
大学生军训感想
2014/02/16 职场文书
学生安全责任书模板
2014/07/25 职场文书
倡议书格式
2014/08/30 职场文书
党员倡议书
2015/01/19 职场文书
客户经理岗位职责
2015/01/31 职场文书
律政俏佳人观后感
2015/06/09 职场文书
三国演义读书笔记
2015/06/25 职场文书
工伤调解协议书
2016/03/21 职场文书
青年人初次创业的“五不要”
2019/08/23 职场文书
phpQuery解析HTML乱码问题(补充官网未列出的乱码解决方案)
2021/04/01 PHP
解决Navicat for Mysql连接报错1251的问题(连接失败)
2021/05/27 MySQL
《最终幻想14》6.01版本4月5日推出 追加新任务新道具
2022/04/03 其他游戏