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 连写注释;siblings() 方法;jQuery 的3种滑动方法;slideUp()向上滑动;slideDown()向下滑动;slideToggle()来回滑动
首先我们看两个连写注释 第一个: /* 点击头像,显示基本资料 */ $(".f-chatTit a.avatar").click(function(){ $(this).hi ...
- 基于jQuery鼠标悬停上下滑动导航条
基于jQuery鼠标悬停上下滑动导航条.这是一款蓝色好看的鼠标响应式网站导航菜单特效.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div id="menu2& ...
- 第二百二十节，jQuery EasyUI，Slider(滑动条)组件
jQuery EasyUI,Slider(滑动条)组件 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 本节课重点了解 EasyUI 中 Slider(滑动条)组件的使用方法,这个 ...
- 使用 jQuery 和 CSS3 制作滑动导航菜单
这个下拉菜单可以让你的网站非常优雅,滑动框导航效果令人印象深刻.此外,子菜单框也可以与此集成起来以使其更具吸引力.导航是网站成功的关键之一,有吸引力的导航能够引导用户浏览网站中的更多内容. 效果演示 ...
- jquery和css3实现滑动导航菜单
效果预览:http://keleyi.com/keleyi/phtml/html5/15/ 有都中颜色可供选择,请使用支持HTML5/CSS3的浏览器访问. HTML源代码: <!DOCTYPE ...
- jquery 实现导航栏滑动效果
精简的代码实现导航栏滑动效果,实现详解: 1.滑块位置:通过父节点position=fixed,子节点position=absolute方式,实现子节点浮动: 2.导航栏居中:通过left=0px,r ...
- 一款基于jQuery的图片左右滑动焦点图
今天给大家分享一款基于jQuery的焦点图插件,这款jQuery焦点图插件的特点是可以多张图片左右滑动切换,可以点击切换按钮进行图片滑动,同时也支持图片自动切换.另外,这款jQuery焦点图是宽屏的, ...
- jquery手机触屏滑动拼音字母城市选择器代码
今天用到城市选择,直接用拼音滑动方式来选择,用的时候引入jquery(个别样式需要自己修改) <div class="yp_indz"><img src=&quo ...
- 【笔记】jquery js获取浏览器滑动条距离顶部距离的写法
jq写法 $(window).scroll(function(){ var $top = $(document).scrollTop(); }); /*注:$(window).scroll(funct ...
- jquery插件实现上下滑动翻页效果
<!DOCTYPE > <meta charset="utf-8" /> <head> <title>测试jquery</ti ...
随机推荐
- 有效解决js中添加border后动画bug问题
做了个demo发现如果一个div不加border属性,用对象的offsetWidth属性来控制width没问题,但是如果一旦加了border属性,问题就来了. 其实offsetWidth属性获取的的是 ...
- 浅谈ListBox控件，将对象封装在listBox中，在ListBox中显示对象中某个属性，在ListBox中移除和移动信息
大家好,俗称万事开头难,不经历风雨,怎能见彩虹.在此小编给大家带来一个自己练习的小实例,希望与大家一起分享与交流.下面进入应用场景,从SQL2008数据库取出数据,给ListBox赋值在界面并显示出来 ...
- ueditor富文本编辑在 asp.net MVC下使用步骤
mvc项目中用到了这个富文本编辑就试着把遇到的问题个使用步骤在这里记录一下,希望大家少走弯路. 1.首先我们先下载net版本的uediot r.
- .net 对配置文件内容的操作
配置文件分为两种 :一种是winform应用程序的配置文件, 一种是web的配置文件. 两种配置文件最大的区别是web的配置文件更新之后会时时更新, 应用程序的配置文件不会实时更新. 更新应用程序的配 ...
- 配置nginx1.7.8支持pathinfo模式
vi nginx/conf/nginx.conf 1.修改正则 set $real_script_name $fastcgi_script_name; if ($fastcgi_script_name ...
- Codeigniter-验证数据类
个人需求,仿着CI的表单验证写了一个自己的验证类 1.定义验证类 <?php if ( ! defined('BASEPATH')) exit('No direct script access ...
- Day16 DOM &jQuery
一.本节主要内容 JavaScript 正则表达式 字符串操作的三个方法 DOM(知道就行,一般使用jQuery) 查找: 直接查找: document.getElementById 根据ID获取一个 ...
- keil对51单片机变量和函数的编译处理
(1)初始值不是0的全局变量 在程序调到main()函数执行前,除了要进行内存清零.初始化堆栈外,还需要将全局变量的初始值加载到RAM的指定区域(编译过程中为全局变量分配的空间). (2)未初始化的局 ...
- go 语言与循环
package main import "fmt" type Employee struct{name string; age int} func displayName(e *E ...
- matlab操作之--读取指定文件夹下的“指定格式”文件
%% 正负样本所在folder fext='*.png';%要读取的文件格式 positiveFolder='F:\课题\Crater detection\machingLearning\Positi ...