前几天的任务: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. Java之网络请求工具类(依赖：org.apache.http;注：HttpClient 4.4,HttpCore 4.4)

    到此处可以去下载依赖包:http://hc.apache.org/downloads.cgi import java.util.List; import org.apache.http.HttpSta ...

  2. hibernate面试笔记

    Hibernate使用Java 反射机制 而不是字节码增强程序来实现透明性 如果JDBC代码写的完美,优化做好,那么JDBC效率是最高的.但是,实际开发中非常不现实,对程序员要求太高.一般情况下,hi ...

  3. jquery前端性能优化（持续添加。。。）

    1.选择器的使用 (1)$('#id')   使用id来定位dom元素是性能最高的方法.jQuery底层将直接调用本地方法document.getElementById().如果id直接可以找到所要对 ...

  4. js&&node set_cookie、get_cookie

    js: function set_cookie(key, val,now){ var exdate = new Date(now); exdate.setDate(exdate.getDate() + ...

  5. Android中用Application类实现全局变量

    最近在项目中,遇到了application这个类,开始不知道有什么用,经过学习后才知道它的用途也蛮大的,举个例子,如果想在整个应用中使用全局变量,在java中一般是使用静态变量,public类型:而在 ...

  6. paramiko模块实现堡垒机

    通过SSHClient 执行命令 """通过用户名密码验证""" import paramiko # 创建 SSH 对象 ssh = par ...

  7. 解决delphi使用sqlite时中文最后一个字是乱码的问题

    给部门同事写了个自动生成测试用例执行情况图表的工具,使用的sqlite3,遇到中文分别使用UTF8Encode和UTF8Decode进行处理,可还是出现了某些字段从数据库中读出时,最后一个汉字是乱码的 ...

  8. Delphi如何让程序最小化到任务栏（截取WM_SYSCOMMAND后，调用Shell_NotifyIcon）

    现在很多的应用程序都有这样一种功能,当用户选择最小化窗口时,窗口不是象平常那样最小化到任务栏上,而是“最小化”成一个任务栏图标.象FoxMail 3.0 NetVampire 3.0等都提供了这样的功 ...

  9. HTML+js+css实现点击图片弹出上传文件窗口的两种思路

    第一种:CSS实现 <style><!-- .fileInputContainer{        height:256px;        background:url(upfil ...

  10. LeetCode解题报告:Reorder List

    Reorder List Given a singly linked list L: L0→L1→…→Ln-1→Ln,reorder it to: L0→Ln→L1→Ln-1→L2→Ln-2→… Yo ...