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 相关文章推荐
js 获取class的元素的方法 以及创建方法getElementsByClassName
Mar 11 Javascript
Bootstrap select下拉联动(jQuery cxselect)
Jan 04 Javascript
vue.js 1.x与2.0中js实时监听input值的变化
Mar 15 Javascript
node中koa中间件机制详解
Aug 22 Javascript
react-native 完整实现登录功能的示例代码
Sep 11 Javascript
vue toggle做一个点击切换class(实例讲解)
Mar 13 Javascript
vue小白入门教程
Apr 02 Javascript
vue中的watch监听数据变化及watch中各属性的详解
Sep 11 Javascript
微信小程序实现订单倒计时
Nov 01 Javascript
jquery实现的分页显示功能示例
Aug 23 jQuery
node.js 微信开发之定时获取access_token
Feb 07 Javascript
javascript设计模式 ? 状态模式原理与用法实例分析
Apr 22 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文件下载类
2006/12/06 PHP
MyEclipse常用配置图文教程
2014/09/11 PHP
PHP使用JSON和将json还原成数组
2015/02/12 PHP
PHP连接操作access数据库实例
2015/03/30 PHP
Laravel框架控制器的request与response用法示例
2019/09/30 PHP
JavaScript避免代码的重复执行经验技巧分享
2014/04/17 Javascript
jquery常用操作小结
2014/07/21 Javascript
JQuery实现表格动态增加行并对新行添加事件
2014/07/30 Javascript
浅谈JavaScript中的字符编码转换问题
2015/07/07 Javascript
jquery对象和DOM对象的任意相互转换
2016/02/21 Javascript
完善的jquery处理机制
2016/02/21 Javascript
JS onkeypress兼容性写法详解
2016/04/27 Javascript
js学习阶段总结(必看篇)
2016/06/16 Javascript
jQuery的Read()方法代替原生JS详解
2016/11/08 Javascript
JS函数多个参数默认值指定方法分析
2016/11/28 Javascript
AngularJS中$http的交互问题
2017/03/29 Javascript
Vue波纹按钮组件制作
2018/04/30 Javascript
用ES6写全屏滚动插件的示例代码
2018/05/02 Javascript
从零开始用electron手撸一个截屏工具的示例代码
2018/10/10 Javascript
vue3弹出层V3Popup实例详解
2021/01/04 Vue.js
[03:17]DOTA2-DPC中国联赛1月29日Recap集锦
2021/03/11 DOTA
PYTHON基础-时间日期处理小结
2018/05/05 Python
Python 内置函数globals()和locals()对比详解
2019/12/23 Python
python计算二维矩形IOU实例
2020/01/18 Python
python查找特定名称文件并按序号、文件名分行打印输出的方法
2020/04/24 Python
斯图尔特·韦茨曼鞋加拿大官网:Stuart Weitzman加拿大
2019/10/13 全球购物
教师党员思想汇报
2014/01/06 职场文书
餐厅销售主管职责范本
2014/02/19 职场文书
行政主管职责范本
2014/03/07 职场文书
3分钟演讲稿
2014/04/30 职场文书
2014最新开业庆典策划方案(5篇)
2014/09/15 职场文书
总经理司机岗位职责
2015/04/10 职场文书
领导离职感言
2015/08/03 职场文书
nginx proxy_cache 缓存配置详解
2021/03/31 Servers
如何利用Python实现一个论文降重工具
2021/07/09 Python
苹果M1芯片安装nginx 并且部署vue项目步骤详解
2021/11/20 Servers