您的位置：首页 > Web前端 > JQuery

jQuery 实现上下,左右滑动

2014-01-20 09:37 615 查看

前几天的任务:http://t.sina.com.cn/ 的下滑效果.

渐变移动出足够的空白 -> 淡出最后一个 ->渐变移动出足够的空白

我们要做的是向左移动效果.这个效果用时需添加一个DIV设置超出部分不显示,这样就可以用了.

闲话不多说,上码

Js代码

//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页面

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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航