元素的滑动效果其实就是元素的位置或元素的宽度发生变化,只是变化宽度特别块,超过人眼的刷新频率而已。
<style type="text/css">
{
margin: 0px auto;
padding: 0px
}
#wai {
width: 1000px;
height: 500px
}
#left {
height: 500px;
left:80%;
background-color: red;
float: left;
position: absolute;
}
#right {
width: 800px;
height: 500px;
background-color: blue;
float: left
}
#btn {
width: 50px;
height: 50px;
background-color: #000;
position: relative;
margin-left: 0px;
top: 225px
}
</style>
</head>
<body>
<div id="wai">
<!--想要获得“left”“right”“btn”的属性,必须用内联样式-->
<div id="left" style=" width:200px;"></div>
<div id="btn" style="left:175px;"></div>
</div>
</body>
<script type="text/javascript">
//给“btn”加点击事件,点击移动(每隔一定时间移动1px)
var btn = document.getElementById("btn");
var left = document.getElementById("left");
btn.onclick = function() {
window.setInterval("yidong()", 10);
}
//定义移动方法:
function yidong() {
var left = document.getElementById("left");
var lw = parseInt(left.style.width);
var l = parseInt(left.offsetLeft);
var clear;
if (l > 0 & l < 2000) { //当“left”的宽度到800时,停止继续+1,clearInterval
console.log('l:' + lw);
l -= 50;
left.style.left = l + 'px'; //每点击一次,向右移动50px
console.log('left.style.left=' + left.style.left);
} else {
window.clearInterval(clear);
}
left.style.width = lw + "px";
}
</script>