jQuery 实现上下,左右滑动
前几天的任务:http://t.sina.com.cn/ 的下滑效果.
渐变移动出足够的空白 -> 淡出最后一个 ->渐变移动出足够的空白
我们要做的是向左移动效果.这个效果用时需添加一个DIV设置超出部分不显示,这样就可以用了.
闲话不多说,上码
- //isw2 zhouxianglh 2010.07.07
- //移动ul
- var slideOperate = {
- slideUlId : "",//UL id 用于操作Ul
- fadeInTime : 2000,//淡出淡入时间
- slideDownTime : 2000,//滑动时间
- nextLeft:function(){//往右滑动
- var lastLi = $("#" + slideOperate.slideUlId + " li:last-child");
- $(lastLi).find("div").animate({opacity:0});//隐藏最后一个li的内容
- $(lastLi).animate({width : "hide",height : lastLi.height()},function(){//隐藏最后一个li
- $("#" + slideOperate.slideUlId + " li:first-child").before(lastLi);//前置
- });
- $(lastLi).animate({width : "show"},{duration:slideOperate.fadeInTime,complete:function(){//显示宽度
- lastLi.find("div").animate({opacity:1},slideOperate.fadeInTime);//显示
- }});
- },
- nextDown:function(){//往下滑动(前提Ul竖排)
- var lastLi = $("#" + slideOperate.slideUlId + " li:last-child");
- $(lastLi).find("div").fadeOut();//隐藏最后一个li的内容
- $(lastLi).hide();//隐藏最后一个li
- $("#" + slideOperate.slideUlId + " li:first-child").before(lastLi);//前置
- $(lastLi).slideDown(slideOperate.slideDownTime,function(){
- lastLi.find("div").fadeIn(slideOperate.fadeInTime);
- });
- }
- };
HTML页面
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <title>列</title>
- <link href="css/slideRow.css" rel="stylesheet" type="text/css" />
- <script language="javascript" type="text/javascript" src="js/jquery1.2.3.js"></script>
- <script language="javascript" type="text/javascript" src="js/slideRow.js"></script>
- <script language="javascript" type="text/javascript">
- $(document).ready(
- function(){
- slideOperate.slideUlId = "ulRowCount";
- setInterval("slideOperate.nextLeft()",5000);//定时
- }
- );
- </script>
- </head>
- <body>
- <ul id="ulRowCount">
- <li class="liRow">
- <div class="rowDiv">
- 你好1
- <br />
- 你好1
- <br />
- 你好1
- <br />
- 你好1
- <br />
- </div>
- </li>
- <li class="liRow">
- <div class="rowDiv">
- 你好2
- </div>
- </li>
- <li class="liRow">
- <div class="rowDiv">
- 你好5asdfasdf
- <br />
- 你好5
- <br />
- 你好5
- <br />
- 你好5
- <br />
- <br />
- 你好5
- <br />
- <br />
- 你好5dsfasdfasdfas
- <br />
- </div>
- </li>
- </ul>
- </body>
- </html>
- WebRoot.zip (16.3 KB)
- 下载次数: 617
jQuery 实现上下,左右滑动相关推荐
- 第二百二十节,jQuery EasyUI,Slider(滑动条)组件
jQuery EasyUI,Slider(滑动条)组件 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 本节课重点了解 EasyUI 中 Slider(滑动条)组件的使用方法,这个 ...
- html网页滚轮滑动页面,JQuery实现鼠标滚轮滑动到页面节点
下面通过一段JQuery代码实现鼠标滚轮滑动到页面节点的详细介绍,并通过展示效果图展示给大家. 基于jQuery鼠标滚轮滑动到页面节点部分.这是一款基于jQuery+CSS3实现的使用鼠标滚轮或者手势 ...
- 基于jQuery鼠标悬停上下滑动导航条
基于jQuery鼠标悬停上下滑动导航条.这是一款蓝色好看的鼠标响应式网站导航菜单特效.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div id="menu2 ...
- html 滑动导航效果,jQuery实现的滑块滑动导航效果示例
本文实例讲述了jQuery实现的滑块滑动导航效果.分享给大家供大家参考,具体如下: www.jb51.net jquery滑动导航 *{margin: 0;padding: 0;box-sizing: ...
- 40个有创意的jQuery图片和内容滑动及弹出插件收藏集之二
<40个有创意的jQuery图片和内容滑动及弹出插件收藏集之一> <40个有创意的jQuery图片和内容滑动及弹出插件收藏集之三> <40个有创意的jQuery图片和内容 ...
- 渡一教育公开课web前端开发JavaScript精英课学习笔记(三十)jQuery实现Tab垂直滑动
jQuery实现Tab垂直滑动 <!DOCTYPE html> <html lang="en"><head><meta charset=& ...
- 40个有创意的jQuery图片和内容滑动及弹出插件收藏集之三
网页的首页或图片专题页面很多地方都会用到图片滑动插件来循环切换多张图片,并且用户可以点击左右按钮来切换图片.相信大家都知道jQuery是最优秀的Javascript框架之一.以其语法简单灵活而大受We ...
- php图片滑动代码,jQuery如何实现图片滑动效果
图片滑动在很多地方都需要,本文主要介绍了jQuery实现图片滑动效果的实例,具有很好的参考价值.下面跟着小编一起来看下吧,希望能帮助到大家. 思路:当鼠标进入元素时,触发hover中的第一个函数,离开 ...
- jQuery 效果——显示隐藏/滑动/淡入淡出/自定义动画||事件切换——简洁版滑动下拉菜单
jQuery 效果 显示隐藏效果 <!DOCTYPE html> <html lang="en"><head><meta charset= ...
- html仿京东快速购物导航,jQuery仿京东楼层滑动侧边栏高亮(原创)
插件描述:jQuery模仿京东侧边栏点击滑动到该楼层,同时侧边栏随着页面滚动对应导航高亮. 更新时间:2017/9/30 下午2:48:37 更新说明: 1,添加了查看评论按钮来改变对应区的高度 2, ...
最新文章
- java-多线程 String 常量池缓存功能带来的问题
- 手机内部零件名称图解_外协加工:200件零件/机加件配套加工
- mysql 协议的query包及解析
- java 从数据库取值_java 连接数据库取值问题
- [ECMAScript] 说说你对set数据结构的理解
- Ajax用证书调用,跨域的jQuery AJAX调用,带证书(Cross domain jQuery ajax call
- java skip函数_【Java必修课】图说Stream中的skip()和limit()方法及组合使用
- 含有任意量词与存在量词的最值问题
- 多线程、多平台环境中的跟踪 - 使用 log4j 和 UNIX 命令来挖掘跟踪数据
- Pow(x, n) 求一个数的n次方
- MATLAB算法实战应用案例精讲-【智能优化算法】蝙蝠算法-BA(附MATLAB和Python代码)
- 网易邮箱服务器怎么注册,免费网易域名邮箱申请教程(图)
- html5使用mescroll
- centos7利用libreoffice将doc文件转换为pdf
- wincap安装内幕
- 秒杀活动(应对大并发:如何利用缓存+异步 )
- java画矩形代码_Java以一种方式绘制矩形
- 【运维心得】你不知道,运维也要写代码(3)
- 快速上手 ClickHouse
- Android 使用MediaRecorder实现录音