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

/p>

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

列

$(document).ready(

function(){

slideOperate.slideUlId = "ulRowCount";

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

}

);

• 你好1

  你好1

  你好1

  你好1

• 你好2

• 你好5asdfasdf

  你好5

  你好5

  你好5

  你好5

  你好5dsfasdfasdfas

PS：这里再为大家推荐几款代码格式化、美化工具，相信大家在以后的开发过程中会用得到：

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