jQuery简单实现上下,左右滑动的方法
本文实例讲述了jQuery简单实现上下,左右滑动的方法。分享给大家供大家参考，具体如下：
渐变移动出足够的空白->淡出最后一个->渐变移动出足够的空白
我们要做的是向左移动效果.这个效果用时需添加一个DIV设置超出部分不显示,这样就可以用了.
闲话不多说,上码
//isw2zhouxianglh2010.07.07
//移动ul
varslideOperate={
slideUlId:"",//ULid用于操作Ul
fadeInTime:2000,//淡出淡入时间
slideDownTime:2000,//滑动时间
nextLeft:function(){//往右滑动
varlastLi=$("#"+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竖排)
varlastLi=$("#"+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页面
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<title>列</title>
<linkhref="css/slideRow.css"rel="stylesheet"type="text/css"/>
<scriptlanguage="javascript"type="text/javascript"src="js/jquery1.2.3.js"></script>
<scriptlanguage="javascript"type="text/javascript"src="js/slideRow.js"></script>
<scriptlanguage="javascript"type="text/javascript">
$(document).ready(
function(){
slideOperate.slideUlId="ulRowCount";
setInterval("slideOperate.nextLeft()",5000);//定时
}
);
</script>
</head>
<body>
<ulid="ulRowCount">
<liclass="liRow">
<divclass="rowDiv">
你好1
<br/>
你好1
<br/>
你好1
<br/>
你好1
<br/>
</div>
</li>
<liclass="liRow">
<divclass="rowDiv">
你好2
</div>
</li>
<liclass="liRow">
<divclass="rowDiv">
你好5asdfasdf
<br/>
你好5
<br/>
你好5
<br/>
你好5
<br/>
<br/>
你好5
<br/>
<br/>
你好5dsfasdfasdfas
<br/>
</div>
</li>
</ul>
</body>
</html>
PS：这里再为大家推荐几款代码格式化、美化工具，相信大家在以后的开发过程中会用得到：
在线JavaScript代码美化、格式化工具：
http://tools.jb51.net/code/js
JavaScript压缩/格式化/加密工具：
http://tools.jb51.net/code/jscompress
XML代码在线格式化美化工具：
http://tools.jb51.net/code/xmlcodeformat
json代码在线格式化/美化/压缩/编辑/转换工具：
http://tools.jb51.net/code/jsoncodeformat
在线JSON代码检验、检验、美化、格式化工具：
http://tools.jb51.net/code/json
更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jquery中Ajax用法总结》、《jQuery表格(table)操作技巧汇总》、《jQuery拖拽特效与技巧总结》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》、《jquery选择器用法总结》及《jQuery常用插件及用法总结》
希望本文所述对大家jQuery程序设计有所帮助。