前几天的任务: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. LINUX 压缩目录成一个压缩文件

    #!/bin/bash file =$(date +%y%m%d%H%M)logfile=/home/目录名/backup/file.log echo "------"$(date ...

  2. php脚本业务逻辑

    设置时区 设置执行不超时 设置根目录常量 引入配置文件(自定义/模板) 错误记录 定义业务类 执行业务类::run() 数据库单例初始化(连接) 日志单例初始化(引入日志类,配置日志路径,日志开关) ...

  3. Python 学习之urllib模块---用于发送网络请求，获取数据

    1.urllib urllib是Python标准库的一部分,包含urllib.request,urllib.error,urllib.parse,urlli.robotparser四个子模块. (1) ...

  4. python基础 [Alex视频]

    vi hello.py#!/usr/bin/env pythonprint "hello world!"while True: print("hello world!&q ...

  5. nutch 异常集锦

    异常:Exception in thread "main" java.io.IOException: Failed to set permissions of path: \tmp ...

  6. [BZOJ 3995] [SDOI2015] 道路修建 【线段树维护连通性】

    题目链接:BZOJ - 3995 题目分析 这道题..是我悲伤的回忆.. 线段树维护连通性,与 BZOJ-1018 类似,然而我省选之前并没有做过  1018,即使它在 ProblemSet 的第一页 ...

  7. Reactor Cooling

    sgu194:http://acm.sgu.ru/problem.php?contest=0&problem=194 题意:题目大意:给n个点,及m根pipe,每根pipe用来流躺液体的,单向 ...

  8. Crazy Search

    poj1200:http://poj.org/problem?id=1200 题意:给你一个有m种字符串,求长度为n的连续子串由多少种. 题解:网上的代码都是hash,但是本人觉得hash有问题,就是 ...

  9. ZOOKEEPER在CENTOS6上的再安装

    作DUBBO时,肯定是需要的,,对的,,DUBBO也要熟悉一下才行啦.. URL: http://www.centoscn.com/CentosServer/test/2015/0120/4531.h ...

  10. PHP Array函数分类

    一. 数组操作的基本函数1.数组的键名和值array_values($arr);              获得数组的值array_keys($arr);                 获得数组的键 ...