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

jquery点击左右移动div特效

2012-01-05 15:57 363 查看
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
function animate(dir, step) {
var position;
position = parseInt($("#content").css("margin-left"));
var contentwidth;
var sliderwidth;
contentwidth = parseInt($("#content").css("width"));
sliderwidth = parseInt($("#slider").css("width"));
switch (dir) {
case "right":
position = ((position - step) < (sliderwidth - contentwidth)) ? (sliderwidth - contentwidth) : (position - step);
break;
case "left":
position = ((position + step) > 0) ? 0 : (position + step);
break;
default:
break;
};

$("#content").animate(
{ marginLeft: position + "px" },
800
);
}
////////////////////////////////////////
$(document).ready(function() {

$("#slider").css("width", ($("body").attr("clientWidth") - 80) + "px");

$("#leftA").click(function() {
animate("left", 400);
});

$("#rightA").click(function() {
animate("right", 400);
});
});
</script>
<style type="text/css">
ul,li{
display:block;
}
li{
width:150px;
float:left;
border:1px solid black;
hight:200px;
}
#content
{
width: 2030px;
margin-left: 0px;
}
#slider
{
margin-left: 40px;
overflow: hidden;
}
#leftA
{
display: block;
float: left;
left: 10px;
top: 5px;
position: absolute;
background-image: url();
}
#rightA
{
display: block;
float: right;
right: 10px;
top: 5px;
position: absolute;
background-image: url();
}
</style>
<body>
<div class="title_bar">
<a id="leftA" href="javascript:void(0);" >
left
</a>
<div id="slider">
<div id="content">
<ul id="Ul1" class="tab_nav" style="margin-left: 0px; margin-right: 0px;">
<li id="gaom1" class="menuon" >
</li>
<li id="gaom2" class="menuoff" >
基本信息1</li>
<li id="gaom3" class="menuoff" >
基本信息2</li>
<li id="gaom4" class="menuoff" >
基本信息3</li>
<li id="gaom5" class="menuoff" >
基本信息4</li>
<li id="gaom6" class="menuoff" >
基本信息5</li>
<li id="gaom7" class="menuoff" >
基本信息6</li>
<li id="gaom8" class="menuoff" >
基本信息7</li>
<li id="gaom9" class="menuoff" >
基本信息8</li>
<li id="gaom10" class="menuoff" >
基本信息9</li>
<li id="gaom11" class="menuoff" >
基本信息10</li>
</ul>
</div>
</div>
<a id="rightA" href="javascript:void(0);" >
right</a>
</div>
</body>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航