专注国内外云服务器
分享建站技术教程

js代码实现水平移动与垂直移动效果方法

立即购买

阿里云服务器 ¥102元/年 云数据库37.5元/年 限时

个人、企业均可购买 | 更多配置0.8折特惠

吾上云WORDPRESS教程最新“js代码实现水平移动与垂直移动效果方法”

今天wpmee小编为大家分享一个js代码实现水平移动与垂直移动效果方法,感兴趣的朋友可以尝试一下。

水平移动分析:

可看成是一个物体的左边距变化。

比如:向右移动是左边距越来越大(数值为正),可调整物体的左边距来实现

向左移动是左边距越来越小(数值为负),可调整物体的左边距来实现

实际代码如下:

    *{padding: 0;margin: 0px;}
    #box{width: 100px;height: 100px;border-radius: 50%;background: red;position: absolute;top: 50px;left: 0;}

  
  
var box=document.getElementById('box'); //速度 var index=10; //定时器编号 var b; //添加向右点击事件 document.getElementById('btn').onclick=function(){ clearInterval(b);//清除上一个定时器执行的事件 b=setInterval(getMove,100,index);//每100毫秒执行一次getMove函数 } //添加向左点击事件 document.getElementById('btn1').onclick=function(){ clearInterval(b);//清除上一个定时器执行的事件 b=setInterval(getMove,100,-index);//每100毫秒执行一次getMove函数 } //box移动位置 function getMove(index){ //获取box的左距离 var a=window.getComputedStyle(box,null).left; a=parseInt(a);//转换为数值 box.style.left=a+index+'px'//计算box的左距离 }

垂直移动分析:

可看成是一个物体的上边距变化。

比如:向下移动是上边距越来越大(数值为正),可调整物体的上边距来实现

向上移动是上边距越来越小(数值为负),可调整物体的上边距来实现

实际代码如下:

    *{padding: 0;margin: 0px;}
    #box{width: 100px;height: 100px;border-radius: 50%;background: red;position: absolute;top: 50px;left: 0;}

  
  
var box=document.getElementById('box'); //速度 var index=10; //定时器编号 var b; //添加向下点击事件 document.getElementById('btn').onclick=function(){ clearInterval(b);//清除上一个定时器执行的事件 b=setInterval(getMove,100,index);//每100毫秒执行一次getMove函数 } //添加向上点击事件 document.getElementById('btn1').onclick=function(){ clearInterval(b);//清除上一个定时器执行的事件 b=setInterval(getMove,100,-index);//每100毫秒执行一次getMove函数 } //box移动位置 function getMove(index){ //获取box的上距离 var a=window.getComputedStyle(box,null).top; a=parseInt(a);//转换为数值 box.style.top=a+index+'px'//计算box的上距离 }

以上就是js代码实现水平移动与垂直移动效果方法的详细内容。

文章来源于互联网WORDPRESS教程:js代码实现水平移动与垂直移动效果方法,
阿里云服务器89元起,点击购买
腾讯云服务器95元/年起 点击购买

相关推荐: 网站建设完成后还需要进行哪些工作?

吾上云WORDPRESS教程最新“网站建设完成后还需要进行哪些工作?”企业网站建设完成后还需要进行哪些工作?今天我们一起了解一下。 1.网站更新维护 网站做好后要经常维护更新,多编辑一些高质量的原创文章或者设计拍摄一些原创图片放在网站上,原创内容有利于百度等搜…

赞(0)
未经允许不得转载:吾上云 » js代码实现水平移动与垂直移动效果方法
分享到: 更多 (0)
  • 阿里云
    基础型云服务器

    1核CPU

    2G内存

    40G硬盘

    1M带宽

    独立IP

    分布式存储

    适合企业官网、个人站长类网站

    ¥89/1年 原价¥903.40

  • 阿里云
    超值型云服务器

    2核CPU

    4G内存

    40G硬盘

    3M带宽

    独立IP

    分布式存储

    适合企业官网、行业门户类网站

    ¥899/3年 原价¥8281

  • 阿里云
    高性能云服务器

    2核CPU

    8G内存

    40G硬盘

    5M带宽

    独立IP

    分布式存储

    适合电商、数据库等企业级应用

    ¥1399/3年¥14765

  • 腾讯云
    基础型云服务器

    1核CPU

    2G内存

    50G硬盘

    1M带宽

    独立IP

    分布式存储

    适合企业官网、个人站长类网站

    ¥95/1年 原价¥834

  • 腾讯云
    超值型云服务器

    1核CPU

    2G内存

    50G硬盘

    1M带宽

    独立IP

    分布式存储

    适合企业官网、行业门户类网站

    ¥288/3年 原价¥2502

  • 腾讯云
    高性能云服务器

    4核CPU

    8G内存

    50G硬盘

    5M带宽

    独立IP

    分布式存储

    适合电商、数据库等企业级应用

    ¥2188/3年¥13986

  • 阿里云
    基础型云服务器

    1核CPU

    2G内存

    40G硬盘

    1M带宽

    独立IP

    分布式存储

    适合企业官网、个人站长类网站

    ¥89/1年 原价¥903.40

  • 阿里云
    超值型云服务器

    2核CPU

    4G内存

    40G硬盘

    3M带宽

    独立IP

    分布式存储

    适合企业官网、行业门户类网站

    ¥899/3年 原价¥8281

  • 阿里云
    高性能云服务器

    2核CPU

    8G内存

    40G硬盘

    5M带宽

    独立IP

    分布式存储

    适合电商、数据库等企业级应用

    ¥1399/3年¥14765

  • 腾讯云
    基础型云服务器

    1核CPU

    2G内存

    50G硬盘

    1M带宽

    独立IP

    分布式存储

    适合企业官网、个人站长类网站

    ¥95/1年 原价¥834

  • 腾讯云
    超值型云服务器

    1核CPU

    2G内存

    50G硬盘

    1M带宽

    独立IP

    分布式存储

    适合企业官网、行业门户类网站

    ¥288/3年 原价¥2502

  • 腾讯云
    高性能云服务器

    4核CPU

    8G内存

    50G硬盘

    5M带宽

    独立IP

    分布式存储

    适合电商、数据库等企业级应用

    ¥2188/3年¥13986

评论 抢沙发

评论前必须登录!

 

吾上云 专注服务器选购

购买云服务器联系我们