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 相关文章推荐
学习YUI.Ext 第六天--关于树TreePanel(Part 1)
Mar 10 Javascript
JavaScript 10件让人费解的事情
Feb 15 Javascript
jquery eval解析JSON中的注意点介绍
Aug 23 Javascript
地址栏传递中文参数乱码在js里用escape转码
Aug 28 Javascript
使用JavaScript获取电池状态的方法
May 03 Javascript
Js实现自定义右键行为
Mar 26 Javascript
jQuery Mobile页面返回不需要重新get
Apr 26 Javascript
jQuery使用getJSON方法获取json数据完整示例
Sep 13 Javascript
JavaScript变量类型以及变量作用域详解
Aug 14 Javascript
基于JavaScript实现新增内容滚动播放效果附完整代码
Aug 24 Javascript
jquery实现用户登陆界面(示例讲解)
Sep 06 jQuery
深度解读vue-resize的具体用法
Jul 08 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二维数组的去重问题解析
2011/07/17 PHP
php 中英文语言转换类
2011/09/07 PHP
如何使用纯PHP实现定时器任务(Timer)
2015/07/31 PHP
PHP的Yii框架中View视图的使用进阶
2016/03/29 PHP
linux下php上传文件注意事项
2016/06/11 PHP
解决laravel资源加载路径设置的问题
2019/10/14 PHP
jQuery表单域属性过滤器用法分析
2015/02/10 Javascript
js判断输入框不能为空格或null值的实现方法
2018/03/02 Javascript
react配合antd组件实现的管理系统示例代码
2018/04/24 Javascript
vue-自定义组件传值的实例讲解
2018/09/18 Javascript
实例讲解JavaScript截取字符串
2018/11/30 Javascript
对vuex中store和$store的区别说明
2020/07/24 Javascript
antd form表单数据回显操作
2020/11/02 Javascript
JavaScript实现跟随鼠标移动的盒子
2021/01/28 Javascript
python根据京东商品url获取产品价格
2015/08/09 Python
浅谈Python编程中3个常用的数据结构和算法
2019/04/30 Python
python实现对服务器脚本敏感信息的加密解密功能
2019/08/13 Python
Pandas数据离散化原理及实例解析
2019/11/16 Python
Python视频编辑库MoviePy的使用
2020/04/01 Python
Selenium元素定位的30种方式(史上最全)
2020/05/11 Python
python 使用建议与技巧分享(四)
2020/08/18 Python
SpringBoot首页设置解析(推荐)
2021/02/11 Python
SAZAC的动物连体衣和动物睡衣:Kigurumi Shop
2020/03/14 全球购物
寻找迷宫的一条出路,o通路;X:障碍
2016/07/10 面试题
业务代表的岗位职责
2013/11/16 职场文书
高中毕业自我鉴定
2013/12/19 职场文书
高级护理专业毕业生推荐信
2013/12/25 职场文书
阳光体育活动方案
2014/02/16 职场文书
幼儿园元旦活动感言
2014/03/02 职场文书
政治表现评语
2014/05/04 职场文书
物业项目经理岗位职责
2015/04/01 职场文书
关于观后感的作文
2015/06/18 职场文书
2016年情人节广告语
2016/01/28 职场文书
世界上超棒的8种逻辑思维
2019/08/06 职场文书
原生Javascript+HTML5一步步实现拖拽排序
2021/06/12 Javascript
JavaScript阻止事件冒泡的方法
2021/12/06 Javascript