动画以及封装（二）
js完成盒子的移动与大小的改变
文章目录
- 一、封装完成div宽度
- 1.js部分：
- 2.body与css部分：
- 二、div的移动
- 三、总结
提示：以下是本篇文章正文内容，下面案例可供参考
一、封装完成div宽度
1.js部分：
<script>//物体变大//获取到他们var but_1 = document.getElementById("but_1");var but_2 = document.getElementById("but_2");var but_3 = document.getElementById("but_3");var box = document.getElementById("box");var boxWidth = 100;// 函数封装 物体的宽度 objWidth 每一步走的宽度 step 时间间隔 durationfunction boxStyle(objWidth, step, duration) {//定时器var timer = setInterval(function () {//判断如果div的高度小于返回的实参if (boxWidth < objWidth) {//盒子就每次加返回来的宽度boxWidth += step;//让盒子的宽度等于加后的宽度box.style.width = boxWidth + "px";//如果达到返回的实参那就让定时器清楚} else {clearInterval(timer);}}, duration);}//按钮1的点击事件but_1.onclick = function () {//返回的实参boxStyle(600, 10, 100);};//按钮2的点击事件but_2.onclick = function () {//返回的实参boxStyle(800, 10, 100);};</script>2.body与css部分：
<style>#box {width: 100px;height: 100px;background-color: aquamarine;position: relative;}</style></head><body><button id="but_1">div到600px</button><button id="but_2">div到800px</button><button id="but_3">物体移动</button><div id="box"></div></body
二、div的移动
重要的是用到了定位：
<script>//物体移动var pin = 0;but_3.onclick = function () {var time = setInterval(function () {console.log("测试");if (pin < 800) {pin += 50;box.style.left = pin + "px";} else {clearInterval(time);}}, 1000);};</script>三、总结
本次div的封装学习就是为了更好简化代码。
通过style来让div实现不同的效果
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！