<html>
<head>
<title>Jquery-Assignment</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<style>
* {
margin: 0;
padding: 0;
}
.container,
.container2 {
width: 49%;
border-right: 5px solid #000;
float: left;
box-sizing: border-box
}
.container2 {
border: none;
}
.controls {
padding-bottom: 50px;
margin: 10px;
}
.ball,
.ball2 {
border-radius: 50%;
background-color: #000;
width: 100px;
height: 100px;
position: relative;
left: 0;
}
</style>
</head>
<body>
<div class="main">
<div class="container">
<div class="controls"> <span><a href="#" id="prev"><img src="arrow-prev.png"/></a></span> <span><a href="#" id="next"><img src="arrow-next.png"/></a></span> </div>
<div class="ball-path">
<div class="ball" id="ball"></div>
</div>
</div>
<div class="container2">
<div class="controls"> <span><a href="#" id="prev"><img src="arrow-prev.png"/></a></span> <span><a href="#" id="next"><img src="arrow-next.png"/></a></span> </div>
<div class="ball-path">
<div class="ball" id="ball"></div>
</div>
</div>
</div>
<script>
var n;
var w = $(".container").width();
var b = $("#ball").width();
var pos = (w - b + 'px');
$('#next').on('click', function() {
n = $("#ball").css("left") debugger;
if (n <= pos) {
$("#ball").animate({
left: '+=20'
}, 1);
} else {
$("#ball").animate({
left: '+=0'
}, 1);
}
});
$('#prev').on('click', function() {
n = $("#ball").css("left") if (n == '0px') {
$("#ball").animate({
left: '-=0'
}, 1);
} else {
$("#ball").animate({
left: '-=20'
}, 1);
}
});
</script>
</body>
</html>
注意:左侧位置增加20px;因此,如果容器的宽度是600或620或640然后它工作,但当我使用盒子大小属性然后变成像615px因为边框是5 px。然后较小的条件不起作用。请为此提出任何答案。
如果任何身体无法忍受上述词语,请添加并删除盒子大小属性。
答案 0 :(得分:0)
我不确定我是否清楚地理解你。但问题是如果你使用border-box,它会强制/强制宽度包括border&amp; padding