JS写滑稽笑脸运动效果


Posted in Javascript onMay 28, 2020

效果演示:

JS写滑稽笑脸运动效果

(就这玩意儿,差点写崩了...)

代码:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>滑稽笑脸运动</title>
  <meta name="author" content="marinerzp">
  <style>
    *{padding: 0;margin: 0;}
    html,body{
      width: 100%;
      height: 100%;
    }
    #main{
      width: 100px;
      height: 100px;
      border-radius: 50%;
      background:url(images/1.jpg) 0 0/100px 100px;
      position: absolute;
      left: 0;
      top: 0;
      z-index: 3;
    }
    .show{
      width: 50px;
      height: 50px;
      border-radius: 50%;
      background-color: rgb(239, 187, 101);
      position: absolute;
      animation: disappear 1.2s ;
      animation-fill-mode: forwards;
      
    }
    @keyframes disappear{
      0%{
        opacity: 1;
        transform:scale(1);
      }
      100%{
        opacity: 0;
        transform:scale(0);
      }
    }
  </style>
</head>
<body>
  <div id="main">
  </div>
  
  <script>
    let Omain=document.querySelector('#main');
    let MaxLeft=window.innerWidth-Omain.offsetWidth;
    let MaxTop=window.innerHeight-Omain.offsetHeight;
 
    window.οnresize=function(){//监听窗口大小改变事件
      MaxLeft=window.innerWidth-Omain.offsetWidth;
      MaxTop=window.innerHeight-Omain.offsetHeight;
    };
    /*
      水平方向上:以向右为正方向
      竖直方向上:以向下为正方向
    */ 
    let Vx=6;//3px/s
    let Vy=9;//4px/s
    let X=0,Y=0;
    ~~function move(){
      X+=Vx;
      Y+=Vy;
      if (Y>=MaxTop) {
        Y=MaxTop;
        Vy=-Vy;
      }
      if (Y<=0) {
        Y=0;
        Vy=-Vy;
      }
      if (X>=MaxLeft) {
        X=MaxLeft;
        Vx=-Vx;
      }
      if (X<=0) {
        X=0;
        Vx=-Vx;
      }
      Omain.style.left=`${X}px`;
      Omain.style.top=`${Y}px`;
      
      createTail(X,Y);//生成拖尾
      requestAnimationFrame(move);
    }();
    function createTail(X,Y){
      let node=document.createElement('p');
      node.classList.add('show');
      node.style.cssText=`left:${X+20}px;top:${Y+20}px`;
      document.body.appendChild(node);
      setTimeout(()=>{
        document.body.removeChild(node);
        node=null;
      },1200);
    }
    
 
  </script>
</body>
</html>

总结

到此这篇关于JS写滑稽笑脸运动效果的文章就介绍到这了,更多相关js 滑稽笑脸内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
WEB页子窗口(showModalDialog和showModelessDialog)使用说明
Oct 25 Javascript
JavaScript中的View-Model使用介绍
Aug 11 Javascript
JS 数字转换研究总结
Dec 26 Javascript
JavaScript实现文字与图片拖拽效果的方法
Feb 16 Javascript
Javascript之Math对象详解
Jun 07 Javascript
Bootstrap table两种分页示例
Dec 23 Javascript
js实现上下左右弹框划出效果
Mar 08 Javascript
Vue中添加手机验证码组件功能操作方法
Dec 07 Javascript
Vue.js 的移动端组件库mint-ui实现无限滚动加载更多的方法
Dec 23 Javascript
vue实现的上传图片到数据库并显示到页面功能示例
Mar 17 Javascript
JavaScript之解构赋值的理解
Jan 30 Javascript
vue如何实现动态加载脚本
Feb 05 Javascript
Python版实现微信公众号扫码登陆
May 28 #Javascript
基于aotu.js实现微信自动添加通讯录中的联系人功能
May 28 #Javascript
原生js实现五子棋游戏
May 28 #Javascript
Vue微信公众号网页分享的示例代码
May 28 #Javascript
纯JS实现五子棋游戏
May 28 #Javascript
js实现简单五子棋游戏
May 28 #Javascript
js实现双人五子棋小游戏
May 28 #Javascript
You might like
PHP-CGI进程CPU 100% 与 file_get_contents 函数的关系分析
2011/08/15 PHP
CodeIgniter错误mysql_connect(): No such file or directory解决方法
2014/09/06 PHP
php使用NumberFormatter格式化货币的方法
2015/03/21 PHP
服务器迁移php版本不同可能诱发的问题
2015/12/22 PHP
YII动态模型(动态表名)支持分析
2016/03/29 PHP
php从数据库读取数据,并以json格式返回数据的方法
2018/08/21 PHP
简单实用的反馈表单无刷新提交带验证
2013/11/15 Javascript
JS倒计时代码汇总
2014/11/25 Javascript
Bootstrap的图片轮播示例代码
2015/08/31 Javascript
基于JavaScript实现 网页切出 网站title变化代码
2016/04/03 Javascript
JavaScript实现的select点菜功能示例
2017/01/16 Javascript
JavaScript中动态向表格添加数据
2017/01/24 Javascript
微信小程序 wx.login解密出现乱码的问题解决办法
2017/03/10 Javascript
JS基于贪心算法解决背包问题示例
2017/11/27 Javascript
vue-router路由模式详解(小结)
2019/08/26 Javascript
JavaScript 生成唯一ID的几种方式
2021/02/19 Javascript
[49:27]2018DOTA2亚洲邀请赛 4.4 淘汰赛 TNC vs VG 第一场
2018/04/05 DOTA
[53:10]2018DOTA2亚洲邀请赛 4.6 淘汰赛 VP vs VG 第一场
2018/04/11 DOTA
Python3.x版本中新的字符串格式化方法
2015/04/24 Python
Python3使用正则表达式爬取内涵段子示例
2018/04/22 Python
matplotlib命令与格式之tick坐标轴日期格式(设置日期主副刻度)
2019/08/06 Python
python多进程(加入进程池)操作常见案例
2019/10/21 Python
TensorFlow2.X使用图片制作简单的数据集训练模型
2020/04/08 Python
浅谈python opencv对图像颜色通道进行加减操作溢出
2020/06/03 Python
python图片验证码识别最新模块muggle_ocr的示例代码
2020/07/03 Python
linux centos 7.x 安装 python3.x 替换 python2.x的过程解析
2020/12/14 Python
纯CSS实现预加载动画效果
2017/09/06 HTML / CSS
世界领先的电子书网站:eBooks.com(在线购买小说、非小说和教科书)
2019/03/30 全球购物
Habitat家居英国官方网站:沙发、家具、照明、厨房和户外
2019/12/12 全球购物
初中生期末考试的自我评价
2013/12/17 职场文书
爷爷追悼会答谢词
2014/01/24 职场文书
初中校园广播稿
2014/02/02 职场文书
党员查摆四风问题思想汇报
2014/10/25 职场文书
JavaScript流程控制(分支)
2021/12/06 Javascript
关于mysql中string和number的转换问题
2022/06/14 MySQL
vscode内网访问服务器的方法
2022/06/28 Servers