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

JavaScript中用Jquery实现左右点击滚动效果

2009-05-20 13:55 696 查看
JavaScript中用Jquery实现左右点击滚动效果

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script src="js/jquery-1.2.6.js"></script>
<style type="text/css">
<!--
.clear {
clear: both;
}
#list {
width: 1000%;
position: absolute;
left: 0px;
top: 0px;
}
#list .item {
width: 190px;
height: 300px;
float: left;
background-color: #999999;
margin-right: 10px;
}
#left {
float: left;
height: 300px;
line-height: 300px;
text-align: center;
width: 20px;
cursor: pointer;
}
#wrap {
float: left;
width: 800px;
overflow: hidden;
position: relative;
height: 300px;
}
#right {
float: left;
width: 20px;
line-height: 300px;
height: 300px;
text-align: center;
cursor: pointer;
}
-->
</style>
<script language="javascript" type="text/javascript">
var left;
$().ready(function(){
left = parseInt($("#list").css("left"));
$(".btn").click(function(){
move(this.id);
});

});

function move(sign)
{
var tleft = left;
switch(sign)
{
case "left":
{
var len = $("#list .item").length * 200;
if((len - Math.abs(left)) > 800)
{
tleft -= 200;
}
else
{
tleft = left;
}
break;
}
case "right":
{
if (left == 0)
{
tleft = 0;
}
else
{
tleft += 200;
}
break;
}
}

if ((tleft - left) != 0)
{
$("#list").animate({
left:tleft + "px"
},1000,function(){
left = tleft;

});
}

}
</script>
</head>

<body>
<div class="btn" id="left"><<</div>
<div id="wrap">
<div id="list">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
<div class="item">10</div>
<div class="clear"></div>
</div>
</div>
<div class="btn" id="right">>></div>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航