jQuery 实现上下,左右滑动
前几天的任务:http://t.sina.com.cn/ 的下滑效果.
渐变移动出足够的空白 -> 淡出最后一个 ->渐变移动出足够的空白
我们要做的是向左移动效果.这个效果用时需添加一个DIV设置超出部分不显示,这样就可以用了.
闲话不多说,上码
- //isw2 zhouxianglh 2010.07.07
- //移动ul
- var slideOperate = {
- slideUlId : "",//UL id 用于操作Ul
- fadeInTime : 2000,//淡出淡入时间
- slideDownTime : 2000,//滑动时间
- nextLeft:function(){//往右滑动
- var lastLi = $("#" + slideOperate.slideUlId + " li:last-child");
- $(lastLi).find("div").animate({opacity:0});//隐藏最后一个li的内容
- $(lastLi).animate({width : "hide",height : lastLi.height()},function(){//隐藏最后一个li
- $("#" + slideOperate.slideUlId + " li:first-child").before(lastLi);//前置
- });
- $(lastLi).animate({width : "show"},{duration:slideOperate.fadeInTime,complete:function(){//显示宽度
- lastLi.find("div").animate({opacity:1},slideOperate.fadeInTime);//显示
- }});
- },
- nextDown:function(){//往下滑动(前提Ul竖排)
- var lastLi = $("#" + slideOperate.slideUlId + " li:last-child");
- $(lastLi).find("div").fadeOut();//隐藏最后一个li的内容
- $(lastLi).hide();//隐藏最后一个li
- $("#" + slideOperate.slideUlId + " li:first-child").before(lastLi);//前置
- $(lastLi).slideDown(slideOperate.slideDownTime,function(){
- lastLi.find("div").fadeIn(slideOperate.fadeInTime);
- });
- }
- };
HTML页面
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <title>列</title>
- <link href="css/slideRow.css" rel="stylesheet" type="text/css" />
- <script language="javascript" type="text/javascript" src="js/jquery1.2.3.js"></script>
- <script language="javascript" type="text/javascript" src="js/slideRow.js"></script>
- <script language="javascript" type="text/javascript">
- $(document).ready(
- function(){
- slideOperate.slideUlId = "ulRowCount";
- setInterval("slideOperate.nextLeft()",5000);//定时
- }
- );
- </script>
- </head>
- <body>
- <ul id="ulRowCount">
- <li class="liRow">
- <div class="rowDiv">
- 你好1
- <br />
- 你好1
- <br />
- 你好1
- <br />
- 你好1
- <br />
- </div>
- </li>
- <li class="liRow">
- <div class="rowDiv">
- 你好2
- </div>
- </li>
- <li class="liRow">
- <div class="rowDiv">
- 你好5asdfasdf
- <br />
- 你好5
- <br />
- 你好5
- <br />
- 你好5
- <br />
- <br />
- 你好5
- <br />
- <br />
- 你好5dsfasdfasdfas
- <br />
- </div>
- </li>
- </ul>
- </body>
- </html>
- WebRoot.zip (16.3 KB)
- 下载次数: 617
jQuery 实现上下,左右滑动的更多相关文章
- jquery 连写注释;siblings() 方法;jQuery 的3种滑动方法;slideUp()向上滑动;slideDown()向下滑动;slideToggle()来回滑动
首先我们看两个连写注释 第一个: /* 点击头像,显示基本资料 */ $(".f-chatTit a.avatar").click(function(){ $(this).hi ...
- 基于jQuery鼠标悬停上下滑动导航条
基于jQuery鼠标悬停上下滑动导航条.这是一款蓝色好看的鼠标响应式网站导航菜单特效.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div id="menu2& ...
- 第二百二十节，jQuery EasyUI，Slider(滑动条)组件
jQuery EasyUI,Slider(滑动条)组件 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 本节课重点了解 EasyUI 中 Slider(滑动条)组件的使用方法,这个 ...
- 使用 jQuery 和 CSS3 制作滑动导航菜单
这个下拉菜单可以让你的网站非常优雅,滑动框导航效果令人印象深刻.此外,子菜单框也可以与此集成起来以使其更具吸引力.导航是网站成功的关键之一,有吸引力的导航能够引导用户浏览网站中的更多内容. 效果演示 ...
- jquery和css3实现滑动导航菜单
效果预览:http://keleyi.com/keleyi/phtml/html5/15/ 有都中颜色可供选择,请使用支持HTML5/CSS3的浏览器访问. HTML源代码: <!DOCTYPE ...
- jquery 实现导航栏滑动效果
精简的代码实现导航栏滑动效果,实现详解: 1.滑块位置:通过父节点position=fixed,子节点position=absolute方式,实现子节点浮动: 2.导航栏居中:通过left=0px,r ...
- 一款基于jQuery的图片左右滑动焦点图
今天给大家分享一款基于jQuery的焦点图插件,这款jQuery焦点图插件的特点是可以多张图片左右滑动切换,可以点击切换按钮进行图片滑动,同时也支持图片自动切换.另外,这款jQuery焦点图是宽屏的, ...
- jquery手机触屏滑动拼音字母城市选择器代码
今天用到城市选择,直接用拼音滑动方式来选择,用的时候引入jquery(个别样式需要自己修改) <div class="yp_indz"><img src=&quo ...
- 【笔记】jquery js获取浏览器滑动条距离顶部距离的写法
jq写法 $(window).scroll(function(){ var $top = $(document).scrollTop(); }); /*注:$(window).scroll(funct ...
- jquery插件实现上下滑动翻页效果
<!DOCTYPE > <meta charset="utf-8" /> <head> <title>测试jquery</ti ...
随机推荐
- codeblocks快捷键（转载）
• 按住Ctrl滚滚轮,代码的字体会随你心意变大变小. • 在编辑区按住右键可拖动代码,省去拉(尤其是横向)滚动条之麻烦:相关设置:Mouse Drag Scrolling. • Ctrl+D可复制当 ...
- JavaScript学习总结【3】、JS对象
在 JS 中一切皆对象,并提供了多个内置对象,比如:String.Array.Date 等,此外还支持自定义对象.对象只是一种特殊类型的数据,并拥有属性和方法,属性是与对象相关的值,方法是能够在对象上 ...
- Java 不定长度参数
在调用某个方法时,若是方法的参数个数事先无法确定该如何处理?例如System.out.printf()方法中并没有办法事先决定要给的参数个数,像是: ? 1 2 3 System.out.printf ...
- linux系统下,递归删除.svn文件
linux系统下,递归删除.svn文件 SVNLinux 进入要删除的目录,执行下面的命令就可以啦. find . -name "*.svn" | xargs rm -rf
- Junit4 架构设计系列(2)： Runner.run()与Statement
Overall 系列入口: Junit4 架构设计系列(1): Request,ClassRequest 和 RunnerBuilder 前文中,我们基本理清了Junit4执行Case大体上的Flow ...
- hustoj 1017 - Exact cover dancing link
1017 - Exact cover Time Limit: 15s Memory Limit: 128MB Special Judge Submissions: 5851 Solved: 3092 ...
- Book of Evil
Codeforces Round #196 (Div. 2) D:http://codeforces.com/contest/337/status/D 题意:给你一个树,然后树中有一m个点,求到这m个 ...
- 【UVA1371】Period （二分+DP）
题意: 给出两个字符串A,B将B分解成若干个子字符串,然后每个子字符串都要经过编辑变成字符串A,所有子串中编辑最多的次数即为当前状态下的最大编辑次数,要求求最小的最大编辑次数. 编辑操作包括修改.删除 ...
- Delphi能通过SSH登录Linux，连接MYSQL取数么？像Navicat一样
百度随时就能搜,你就懒得搜下.http://tieba.baidu.com/p/671327617 Ssh tunnel通常能实现3种功能1) 加密网络传输2) 绕过防火墙3) 让位于广域网的机器连接 ...
- ssh 认证指定端口
[root@database2 ~]# cat ssh.sh if [ ! $# -eq 2 ] ;then echo "请输入用户密码以空格分开" exit else ssh-k ...