前几天的任务:http://t.sina.com.cn/  的下滑效果.

渐变移动出足够的空白 -> 淡出最后一个 ->渐变移动出足够的空白

我们要做的是向左移动效果.这个效果用时需添加一个DIV设置超出部分不显示,这样就可以用了.

闲话不多说,上码

  1. //isw2 zhouxianglh 2010.07.07
  2. //移动ul
  3. var slideOperate = {
  4. slideUlId : "",//UL id 用于操作Ul
  5. fadeInTime : 2000,//淡出淡入时间
  6. slideDownTime : 2000,//滑动时间
  7. nextLeft:function(){//往右滑动
  8. var lastLi = $("#" + slideOperate.slideUlId + " li:last-child");
  9. $(lastLi).find("div").animate({opacity:0});//隐藏最后一个li的内容
  10. $(lastLi).animate({width : "hide",height : lastLi.height()},function(){//隐藏最后一个li
  11. $("#" + slideOperate.slideUlId + " li:first-child").before(lastLi);//前置
  12. });
  13. $(lastLi).animate({width : "show"},{duration:slideOperate.fadeInTime,complete:function(){//显示宽度
  14. lastLi.find("div").animate({opacity:1},slideOperate.fadeInTime);//显示
  15. }});
  16. },
  17. nextDown:function(){//往下滑动(前提Ul竖排)
  18. var lastLi = $("#" + slideOperate.slideUlId + " li:last-child");
  19. $(lastLi).find("div").fadeOut();//隐藏最后一个li的内容
  20. $(lastLi).hide();//隐藏最后一个li
  21. $("#" + slideOperate.slideUlId + " li:first-child").before(lastLi);//前置
  22. $(lastLi).slideDown(slideOperate.slideDownTime,function(){
  23. lastLi.find("div").fadeIn(slideOperate.fadeInTime);
  24. });
  25. }
  26. };

HTML页面

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>列</title>
  6. <link href="css/slideRow.css" rel="stylesheet" type="text/css" />
  7. <script language="javascript" type="text/javascript" src="js/jquery1.2.3.js"></script>
  8. <script language="javascript" type="text/javascript" src="js/slideRow.js"></script>
  9. <script language="javascript" type="text/javascript">
  10. $(document).ready(
  11. function(){
  12. slideOperate.slideUlId = "ulRowCount";
  13. setInterval("slideOperate.nextLeft()",5000);//定时
  14. }
  15. );
  16. </script>
  17. </head>
  18. <body>
  19. <ul id="ulRowCount">
  20. <li class="liRow">
  21. <div class="rowDiv">
  22. 你好1
  23. <br />
  24. 你好1
  25. <br />
  26. 你好1
  27. <br />
  28. 你好1
  29. <br />
  30. </div>
  31. </li>
  32. <li class="liRow">
  33. <div class="rowDiv">
  34. 你好2
  35. </div>
  36. </li>
  37. <li class="liRow">
  38. <div class="rowDiv">
  39. 你好5asdfasdf
  40. <br />
  41. 你好5
  42. <br />
  43. 你好5
  44. <br />
  45. 你好5
  46. <br />
  47. <br />
  48. 你好5
  49. <br />
  50. <br />
  51. 你好5dsfasdfasdfas
  52. <br />
  53. </div>
  54. </li>
  55. </ul>
  56. </body>
  57. </html>

jQuery 实现上下,左右滑动的更多相关文章

  1. jquery 连写注释;siblings() 方法;jQuery 的3种滑动方法;slideUp()向上滑动;slideDown()向下滑动;slideToggle()来回滑动

    首先我们看两个连写注释 第一个:   /* 点击头像,显示基本资料 */ $(".f-chatTit a.avatar").click(function(){ $(this).hi ...

  2. 基于jQuery鼠标悬停上下滑动导航条

    基于jQuery鼠标悬停上下滑动导航条.这是一款蓝色好看的鼠标响应式网站导航菜单特效.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div id="menu2& ...

  3. 第二百二十节，jQuery EasyUI，Slider(滑动条)组件

    jQuery EasyUI,Slider(滑动条)组件 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 本节课重点了解 EasyUI 中 Slider(滑动条)组件的使用方法,这个 ...

  4. 使用 jQuery 和 CSS3 制作滑动导航菜单

    这个下拉菜单可以让你的网站非常优雅,滑动框导航效果令人印象深刻.此外,子菜单框也可以与此集成起来以使其更具吸引力.导航是网站成功的关键之一,有吸引力的导航能够引导用户浏览网站中的更多内容. 效果演示  ...

  5. jquery和css3实现滑动导航菜单

    效果预览:http://keleyi.com/keleyi/phtml/html5/15/ 有都中颜色可供选择,请使用支持HTML5/CSS3的浏览器访问. HTML源代码: <!DOCTYPE ...

  6. jquery 实现导航栏滑动效果

    精简的代码实现导航栏滑动效果,实现详解: 1.滑块位置:通过父节点position=fixed,子节点position=absolute方式,实现子节点浮动: 2.导航栏居中:通过left=0px,r ...

  7. 一款基于jQuery的图片左右滑动焦点图

    今天给大家分享一款基于jQuery的焦点图插件,这款jQuery焦点图插件的特点是可以多张图片左右滑动切换,可以点击切换按钮进行图片滑动,同时也支持图片自动切换.另外,这款jQuery焦点图是宽屏的, ...

  8. jquery手机触屏滑动拼音字母城市选择器代码

    今天用到城市选择,直接用拼音滑动方式来选择,用的时候引入jquery(个别样式需要自己修改) <div class="yp_indz"><img src=&quo ...

  9. 【笔记】jquery js获取浏览器滑动条距离顶部距离的写法

    jq写法 $(window).scroll(function(){ var $top = $(document).scrollTop(); }); /*注:$(window).scroll(funct ...

  10. jquery插件实现上下滑动翻页效果

    <!DOCTYPE > <meta charset="utf-8" /> <head> <title>测试jquery</ti ...

随机推荐

  1. 配置SHH集群

    ==特别要注意当前用户的问题== 1. 修改路由信息 vi /etc/hosts 10.211.55.15 hmaster1 10.211.55.16 hmaster2 10.211.55.17 hs ...

  2. Noah的学习笔记之Python篇：命令行解析

    Noah的学习笔记之Python篇: 1.装饰器 2.函数“可变长参数” 3.命令行解析 注:本文全原创,作者:Noah Zhang  (http://www.cnblogs.com/noahzn/) ...

  3. Python/Keras如何将给定的数据集打乱

    给定数据集data,数据集对应的标签label index = [i for i in range(len(data))] random.shuffle(index) data = data[inde ...

  4. 根据http协议传送数据

    发送的内容: [50 4f 53 54 20 2f 64 65 78 2f 66 69 72 65 70 6f 77 65 72 20 48 54 54 50 2f 31 2e 31 0d 0a 43 ...

  5. 写个自动下载安装Ant的shell脚本【一】

    #!/bin/bash ###################################################### # file name: install_ant.sh # # f ...

  6. bzoj 3110: [Zjoi2013]K大数查询 树状数组套线段树

    3110: [Zjoi2013]K大数查询 Time Limit: 20 Sec  Memory Limit: 512 MBSubmit: 1384  Solved: 629[Submit][Stat ...

  7. 获取设备mac地址和md5加密

    SGMSettingConfig.h #import <Foundation/Foundation.h> @interface SGMSettingConfig : NSObject{ N ...

  8. 保留你的dSYM文件

    大家编译iPhone程序的时候,都会发现二进制文件的旁边生成了一个.dSYM文件.以前一直不知道这个文件是用来干嘛的,今天才知道这个是symbol file,用来debug用的. 大家可以读读这篇文档 ...

  9. Delphi 类成员的默认访问权限（用RTTI检测）

    类的成员,如果没有private.public等显示什么,直接在class下面,没有写访问权限的限定符,这种成员是不是默认的访问权限啊?还是publish的访问权限啊? --------------- ...

  10. poj1637

    混合图欧拉回路首先先明确基本概念连通的无向图存在欧拉回路当且仅当不存在奇点连通的有向图当且仅当每个点入度=出度这道题我们显然应该当作连通的有向图来做这个问题的困难之处在于我不知道应该从无向边的什么方向 ...