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 相关文章推荐
如何在Mozilla Gecko 用Javascript加载XSL
Jan 09 Javascript
javascript数组的扩展实现代码集合
Jun 01 Javascript
一款js和css代码压缩工具[附JAVA环境配置方法]
Apr 16 Javascript
jquery1.9 下检测浏览器类型和版本的方法
Dec 26 Javascript
JQuery给元素绑定click事件多次执行的解决方法
May 29 Javascript
原生JavaScript实现异步多文件上传
Dec 02 Javascript
jQuery设置聚焦并使光标位置在文字最后的实现方法
Aug 02 Javascript
node.js实现的装饰者模式示例
Sep 06 Javascript
关于Vue在ie10下空白页的debug小结
May 02 Javascript
微信小程序引入VANT组件的方法步骤
Sep 19 Javascript
vue+element搭建后台小总结 el-dropdown下拉功能
Apr 10 Javascript
vue 遮罩层阻止默认滚动事件操作
Jul 28 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 函数学习简单小结
2010/07/08 PHP
PHP中改变图片的尺寸大小的代码
2011/07/17 PHP
使用迭代器 遍历文件信息的详解
2013/06/08 PHP
抛弃 PHP 代价太高
2016/04/26 PHP
laravel5.6实现数值转换
2019/10/23 PHP
一个JavaScript继承的实现
2006/10/24 Javascript
豆瓣网的jquery代码实例
2008/06/15 Javascript
JavaScript 设计模式 富有表现力的Javascript(一)
2010/05/26 Javascript
探讨js中的双感叹号判断
2013/11/11 Javascript
javascript设置连续两次点击按钮时间间隔的方法
2014/10/28 Javascript
JavaScript中的条件判断语句使用详解
2015/06/03 Javascript
jquery实现简单实用的弹出层效果代码
2015/10/15 Javascript
jquery实现的动态回到顶部特效代码
2015/10/28 Javascript
详解JavaScript中数组和字符串的lastIndexOf()方法使用
2016/03/13 Javascript
angularjs封装bootstrap时间插件datetimepicker
2016/06/20 Javascript
js简单获取表单中单选按钮值的方法
2016/08/23 Javascript
Bootstrap源码解读导航(6)
2016/12/23 Javascript
es7学习教程之fetch解决异步嵌套问题的方法示例
2017/07/21 Javascript
在vue项目中,使用axios跨域处理
2018/03/07 Javascript
javascript实现拖拽碰撞检测
2020/03/12 Javascript
three.js着色器材质的内置变量示例详解
2020/08/16 Javascript
[47:21]Liquid vs TNC Supermajor 胜者组 BO3 第一场 6.4
2018/06/05 DOTA
使用PDB简单调试Python程序简明指南
2015/04/25 Python
Python聚类算法之DBSACN实例分析
2015/11/20 Python
使用python编写简单的小程序编译成exe跑在win10上
2018/01/15 Python
Python 画出来六维图
2019/07/26 Python
django与vue的完美结合_实现前后端的分离开发之后在整合的方法
2019/08/12 Python
Python Selenium破解滑块验证码最新版(GEETEST95%以上通过率)
2021/01/29 Python
Html5在手机端调用相机的方法实现
2020/05/13 HTML / CSS
Myprotein法国官网:欧洲第一运动营养品牌
2019/03/26 全球购物
size?法国官网:英国伦敦的球鞋精品店
2020/03/15 全球购物
Internet体系结构
2014/12/21 面试题
个人公司授权委托书范本
2014/10/12 职场文书
导游词之天津古文化街
2019/11/09 职场文书
你喜欢篮球吗?Python实现篮球游戏
2021/06/11 Python
Java 获取Word中所有的插入和删除修订的方法
2022/04/06 Java/Android