前几天的任务: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. centos乱码问题解决

    1.yum groupinstall chinese-support 安装中文语言包 2.vi /etc/sysconfig/i18n 修改文件为: LANG="zh_CN.UTF-8&qu ...

  2. Successfully installed matplotlib

    Installing /usr/local/lib/python2.7/dist-packages/matplotlib-1.4.0-py2.7-nspkg.pthSuccessfully insta ...

  3. 关于Android中传递数据的一些讨论－－备用

    在Android中编写过程序的开发人员都知道.在Activity.Service等组件之间传递数据(尤其是复杂类型的数据)很不方便.一般可以使用Intent来传递可序列化或简单类型的数据.看下面的代码 ...

  4. commons-lang阅读（一）

    基于commons-lang-2.4.jar org.apache.commons.lang.time.DateFormatUtils类 package org.apache.commons.lang ...

  5. require 书写约定

    使用 Sea.js 书写模块代码时,需要遵循一些简单规则. 只是书写和调试时的规范!!!构建后的代码完全不需要遵循下面的约定!!!!!! 1. 正确拼写 模块 factory 构造方法的第一个参数 必 ...

  6. [BZOJ 1029] [JSOI2007] 建筑抢修 【贪心】

    题目链接:BZOJ - 1029 题目分析 使用一种贪心策略. 现将任务按照deadline从小到大排序. 然后枚举每一个任务,如果当前消耗的时间加上完成这个任务的时间不会超过这个任务的deadlin ...

  7. How Many Shortest Path

    zoj2760:http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemCode=2760 题意:给你一张有向带权图,然后问你最短路径有多少条. ...

  8. Keil编译后的各文件介绍

    编译生成的文件: .plg:编译器编译结果 .hex和.bin:可执行文件 .map和.lst:链接文件 .obj:目标文件 .crf..lnp..d和.axf:调试文件 .opt:保存工程配置信息 ...

  9. C语言嵌入式系统编程修炼之二：软件架构篇

    模块划分的"划"是规划的意思,意指怎样合理的将一个很大的软件划分为一系列功能独立的部分合作完成系统的需求.C语言作为一种结构化的程序设计语言,在模块的划分上主要依据功能(依功能进行 ...

  10. IN改写关联注意事项！

    SQL> select * from a1; ID NAME ---------- ---------- 1 a 2 a SQL> select * from a2; ID NAME -- ...