JavaScript 元素的滑动效果（二）

最新推荐文章于 2024-04-13 16:30:37 发布

①个程序员

最新推荐文章于 2024-04-13 16:30:37 发布

阅读量154

点赞数

本文链接：https://blog.csdn.net/zhh0310235/article/details/101291404

版权

元素的滑动效果其实就是元素的位置或元素的宽度发生变化，只是变化宽度特别块，超过人眼的刷新频率而已。

#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">

<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>

①个程序员

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript 元素的滑动效果（二）

元素的滑动效果其实就是元素的位置或元素的宽度发生变化，只是变化宽度特别块，超过人眼的刷新频率而已。<style type="text/css">{ margin: 0px auto; padding: 0px}#wai { width: 1000px; height: 500px}#left { height: 500px;...
复制链接

扫一扫