<style>
div {
position: absolute;
left: 0;
top: 300px;
width: 100px;
height: 100px;
background-color: pink;
}
</style>
<body>
<input type="button" value="400" id="jin">
<input type="button" value="800" id="yuan">
<div></div>
<script>
var jin = document.getElementById('jin')
var yuan = document.getElementById('yuan')
var div = document.querySelector('div')
function fun(obj, jl, huiDiao) {
clearTimeout(obj.timer);
obj.timer = setInterval(function () {
var yd = (jl - obj.offsetLeft) / 10
yd = yd > 0 ? Math.ceil(yd) : Math.floor(yd)
if(obj.offsetLeft==jl){
clearTimeout(obj.timer);
if(huiDiao){
huiDiao();
}
}
div.style.left=obj.offsetLeft+yd+'px'
}, 15)
}
jin.addEventListener('click',function(){
fun(div,400,)
})
yuan.addEventListener('click',function(){
fun(div,800,function(){
div.style.backgroundColor="red"
})
})
</script>
</body>
扫一扫
891
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
