前几天的任务: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>
分享到：
相关推荐
本文实例讲述了jquery实现上下左右滑动的方法。分享给大家供大家参考。具体实现方法如下： 代码如下:<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” ...
这个项目“jquery实现的图片滑动并带有放大镜效果代码”显然是利用 jQuery 实现了一个功能丰富的图片展示功能，包括图片轮播和放大镜效果。下面我们将详细探讨这些知识点。 首先，图片轮播（Slider）是一种常见的...
本代码着重于实现"左右滑动"的效果，这是许多网页和移动应用中常见的用户交互元素，尤其适用于展示列表或者图片轮播。下面将详细介绍这个jQuery左右滑动代码的工作原理及其相关知识点。 首先，jQuery的滑动效果通常...
在本文中，我们将深入探讨如何使用jQuery实现实用的导航栏，包括上下滑动和左右切换效果，以及如何确保这些效果在各种浏览器中的兼容性。jQuery是一个广泛使用的JavaScript库，它简化了DOM操作、事件处理、动画和...
在这个案例中，"左右滑动切换"是手风琴效果的一种独特实现方式，与传统的上下展开不同，它在切换时会沿水平方向进行平滑过渡，为用户带来更加动态和现代的体验。 首先，我们需要理解**jQuery**是什么。jQuery是一个...
3. **动画组合**：为了实现上下左右的滑动效果，可以结合不同的CSS属性和负值来改变图片位置。例如，向上滑动可以设置`top`为负值，向下滑动设置`bottom`为负值。 4. **回调函数**：在动画完成时，可以使用回调函数...
它不仅可以实现传统的上下滑动，还可以实现列表左右滑动，使得内容展示更加灵活多变。在本示例中，我们关注的是其列表左右滑动的效果。 实现步骤如下： 1. 引入资源：在HTML文件中引入jQuery库和SuperSlide插件的...
在本插件中，滑动门效果可能表现为内容区域左右滑动、上下滑动或淡入淡出等。 **三、左右控制按钮** 左右控制按钮是此插件的一大特色，它们允许用户通过点击按钮而不是直接点击选项卡来切换内容。这种设计适应了...
本文实例讲述了jQuery简单实现上下,左右滑动的方法。分享给大家供大家参考，具体如下： 渐变移动出足够的空白 -> 淡出最后一个 ->渐变移动出足够的空白 我们要做的是向左移动效果.这个效果用时需添加一个DIV设置超出...
"jQuery实现注册页面左右滚屏效果"是一种独特的设计方法，它打破了传统的上下滚动模式，为用户带来全新的浏览体验。这种设计常见于现代网页和移动应用中，尤其是在注册或登录页面，以简洁、直观的方式展示信息。 ...
该控件主要基于jQuery Mobile或jQuery UI等框架构建，它将日期选择器转化为一个可滑动的面板，用户只需左右滑动就能浏览不同月份，上下滑动则可以选择具体的日期。这种设计充分利用了触屏设备的优势，使得在小屏幕上...
例如，当用户滚动时，导航项可以通过改变`transform: translateY()`值来实现上下移动。同时，CSS的`position`属性（如`relative`、`absolute`或`fixed`）可能用于保持导航条始终可见。 HTML5是项目的基础结构，定义...
在"jquery广告上下左右滚动效果"项目中，我们主要关注的是动画效果部分。 1. **引入jQuery库**： 在HTML文件（如`图标滑动效果.html`）中，我们需要先引入jQuery库。这通常通过在`<head>`标签内添加`<script>`标签...
此外，文章提供的HTML和JavaScript代码展示了如何在网页中集成这些功能，提供了一个完整的使用jQuery实现元素左右滑动切换的示例。此示例可以作为模板，帮助开发者理解如何将上述方法应用到实际项目中去。 总之，...
**jQuery 移动端触屏滑动日期控件——Mobiscroll 时间控件** Mobiscroll 是一个高效、响应式的JavaScript库，专为移动设备设计，同时也兼容桌面浏览器。它提供了一套完整的日期和时间选择器，使得在网页应用中添加...
- 对于水平方向的切换，可以改变元素的`width`属性，配合`animate()`函数实现平滑的左右滑动效果。 为了实现上下滑动及左右切换的导航，我们需要创建HTML结构，通常包含一个父容器（如`.navbar`）和多个子导航项...
标题中的“使用导航上下滑动及左右切换效果”是指在网页设计中实现一种交互式的导航方式，用户可以通过上下滑动页面或左右滑动来切换不同的内容板块。这种效果常见于现代网页和移动应用中，提供了流畅且直观的用户...