前几天的任务: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. C# Winform C/S系统快速开发平台(源码+原创)

    C/S系统开发框架-企业版 V4.0 (Enterprise Edition) 简介: http://www.csframework.com/cs-framework-4.0.htm 适用软件:适合开 ...

  2. Python 学习笔记（3） - 控制流、函数

    控制流语句if.while.for.break.continue以上从最终作用效果来讲,同学过的其他语言没有什么不同.需要注意的只是语法,而Python 在语法上是如此让人赞叹和喜欢啊. 控制流语句的 ...

  3. hadoop 2.0--YARN

    从2012年8月开始Apache Hadoop YARN(YARN = Yet Another Resource Negotiator)成了Apache Hadoop的一项子工程.自此Apache H ...

  4. WPF 分页控件 WPF 多线程 BackgroundWorker

    WPF 分页控件 WPF 多线程 BackgroundWorker 大家好,好久没有发表一篇像样的博客了,最近的开发实在头疼,很多东西无从下口,需求没完没了,更要命的是公司的开发从来不走正规流程啊, ...

  5. double类型字符串转换成一个纯数字字符串和一个小数点位数的c++代码

    今天工作中遇到一个要不一个double型的字符串转换成一个纯字数字符串和一个标志这个数字字符串的小数点有几位的int类型 例如:“23.123”--->“23123” + 3   比较简单.就是 ...

  6. C语言的指针

    指针是C语言中非常重要的数据类型,那么什么是指针呢? 指针类型就是用来用来存放变量地址的变量,指向某个变量. 指针的一般形式:*指针变量名 int *p; float *p1; “*”是用来说明这个变 ...

  7. javascript 与 java

  8. Hibernate 使用注解后没发现建表

    可能的原因: ①该注解类中的注解出错:例如是否因为属性名与数据库关键字冲突 ②是否添加包扫描配置: <property name="packagesToScan" value ...

  9. 我所理解的OOP——UML六种关系（转）

    转自:http://www.cnblogs.com/dolphinX/p/3296681.html 最近由于经常给公司的小伙伴儿们讲一些OOP的基本东西,每次草纸都被我弄的很尴尬,画来画去自己都乱了, ...

  10. 《Effective C++》内存管理

    如果global new-hander没有成功配置,会抛出一个std::bad_alloc的exception. #include<iostream> #include<new> ...