 |
热门文章 |
|
|
|
|
| jQuery 内容左右切换效果 |
| 来源：源码爱好者 更新时间：2012/1/17 21:21:10 阅读次数： 我要投稿 |
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>jquery内容左右切换效果</title>
<style type="text/css">
.wrap {float:left; position:relative; width:247px; height:150px; z-index:1; overflow:hidden;}
.cc {height:140px; position:absolute; top:0px; left:-494px; z-index:2;overflow:hidden}
.btn {float:left; width:11px; margin-top:70px; z-index:3}
.cc p.con {width:238px; height:135px; background:#ffecc4}
</style>
<script src="http://www.cwydesign.com//effects/UploadFiles_7074/201201/2012011721231280.js"></script>
<script>!window.jQuery && document.write('<script src="http://www.codefans.net/ajaxjs/jquery-1.6.2.min.js"><\/script>');</script>
<script type="text/javascript"">
$(document).ready(function(){
var leftsize = -494;
$("#btn_l").click(function(){
if(leftsize > -247){
leftsize = leftsize - 247;
$(".cc").animate({"left":leftsize});
}
else if(leftsize = -247) {
leftsize = leftsize - 247;
$(".cc").animate({"left":leftsize});
}
else {$(".cc").css('left','0px');}
});
$("#btn_r").click(function(){
if(leftsize < -247){
leftsize = leftsize + 247;
$(".cc").animate({"left":leftsize});
}
else if(leftsize = -247) {
leftsize = leftsize + 247;
$(".cc").animate({"left":leftsize});
}
else{$(".cc").css('left','-494px');}
});
});
</script>
</head>
<body>
<div id="btn_l" class="btn"><</div>
<div class="wrap">
<div class="cc" style="width:741px;">
<div style="float:left;width:241px;padding:5px 3px;">
<p class="con">111</p>
</div>
<div style="float:left;width:241px;padding:5px 3px; ">
<p class="con">222</p>
</div>
<div style="float:left;width:241px;padding:5px 3px; ">
<p class="con">333</p>
</div>
</div>
</div>
<div id="btn_r" class="btn">></div>
</body>
</html> |
| 特效说明： |
jQuery内容左右滑动轮换效果，内容切换功能，点击左右小箭头就可以轮换。 |
|
| 上一篇文章： 按分辨率导航相应页面下一篇文章： 类似QQ对话框上下部分可拖动代码 |
|
|
|
注册 登录
