本文实例为大家分享了JS实现水平移动与垂直移动的具体代码,供大家参考,具体内容如下
<强>水平移动分析:
可看成是一个物体的左边距变化。
比如:向右移动是左边距越来越大(数值为正),可调整物体的左边距来实现
向左移动是左边距越来越小(数值为负),可调整物体的左边距来实现
实际代码如下:
& lt; style>
*{填充:0;保证金:0 px;}
{#框宽度:100 px;高度:100 px; border - radius: 50%;背景:红色,位置:绝对;:50 px;左:0;}
& lt;/style>
& lt; body>
& lt;按钮id=癰tn”在向右& lt;/button>
& lt;按钮id=" btn1 "祝辞向左& lt;/button>
& lt; div id="盒子"祝辞& lt;/div>
& lt; script>
var盒=. getelementbyid(盒);//速度
var指数=10;//定时器编的号
var b;//添加向右点击事件
. getelementbyid (btn) .onclick=function () {
clearInterval (b);//清除上一个定时器执行的事件
b=setInterval (getMove 100指数);//每100毫秒执行一次getMove函数
｝//添加向左点击事件
. getelementbyid (btn1) .onclick=function () {
clearInterval (b);//清除上一个定时器执行的事件
b=setInterval (getMove 100指数);//每100毫秒执行一次getMove函数
｝//框移动位置
函数getMove(指数){//获取框的左距离
var=window.getComputedStyle(盒子,null) .left;=方法用于();//转换为数的值
box.style.left=a +指数+“px”//计算框的左距离
｝
& lt;/script>
& lt;/body>
<强>垂直移动分析:
可看成是一个物体的上边距变化。
比如:向下移动是上边距越来越大(数值为正),可调整物体的上边距来实现
向上移动是上边距越来越小(数值为负),可调整物体的上边距来实现
实际代码如下:
& lt; style>
*{填充:0;保证金:0 px;}
{#框宽度:100 px;高度:100 px; border - radius: 50%;背景:红色,位置:绝对;:50 px;左:0;}
& lt;/style>
& lt; body>
& lt;按钮id=" btn "祝辞向下& lt;/button>
& lt;按钮id=" btn1 "祝辞向上& lt;/button>
& lt; div id="盒子"祝辞& lt;/div>
& lt; script>
var盒=. getelementbyid(盒);//速度
var指数=10;//定时器编的号
var b;//添加向下点击事件
. getelementbyid (btn) .onclick=function () {
clearInterval (b);//清除上一个定时器执行的事件
b=setInterval (getMove 100指数);//每100毫秒执行一次getMove函数
｝//添加向上点击事件
. getelementbyid (btn1) .onclick=function () {
clearInterval (b);//清除上一个定时器执行的事件
b=setInterval (getMove 100指数);//每100毫秒执行一次getMove函数
｝//框移动位置
函数getMove(指数){//获取箱子的上距离
直var=window.getComputedStyle(盒子,null)上;=方法用于();//转换为数的值
box.style.top=a +指数+“px”//计算框的上距离
｝
& lt;/script>
& lt;/body>
有补充得请留言!
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
