<html>
<head>
<title>Jquery-Assignment</title>
<script src="http://ift.tt/13qgtmt"></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>
Note: the left position is increased by 20px; so if the width of the container is 600 OR 620 OR 640 then it is working but when i use box sizing property then with became like 615px because border is 5 px. then the smaller then condition is not working. Please suggest any answer for that.
If any body is not able to under stand the words above then please add and remove box sizing property.
Aucun commentaire:
Enregistrer un commentaire