jQuery简单实现上下,左右滑动的方法

当前位置：首页 > 范文|应用文 > IT技术专栏 > 网络编程

来源：阅读：1586 次日期：2016-06-17 14:08:25

温馨提示：小编为您整理了“jQuery简单实现上下,左右滑动的方法”,方便广大网友查阅！

这篇文章主要介绍了jQuery简单实现上下,左右滑动的方法,涉及jQuery动态操作页面元素的相关技巧,需要的朋友可以参考下

本文实例讲述了jQuery简单实现上下,左右滑动的方法。分享给大家供大家参考，具体如下：

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

我们要做的是向左移动效果.这个效果用时需添加一个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">

<head>

$(document).ready(

function(){

slideOperate.slideUlId = "ulRowCount";

setInterval("slideOperate.nextLeft()",5000);//定时

}

);

</script>

</head>

<body>

你好1

<br />

你好1

<br />

你好1

<br />

你好1

<br />

</div>

</li>

你好2

</div>

</li>

你好5asdfasdf

<br />

你好5

<br />

你好5

<br />

你好5

<br />

你好5

<br />

你好5dsfasdfasdfas

<br />

</div>

</li>

</ul>

</body>

</html>

希望本文所述对大家jQuery程序设计有所帮助。

上一篇：JS未跨域操作iframe里的DOM

下一篇：jQuery实现的简单分页示例

手机网站地址：jQuery简单实现上下,左右滑动的方法

由于各方面情况的不断调整与变化，提供的所有考试信息和咨询回复仅供参考，敬请考生以权威部门公布的正式信息和咨询为准！