WEB前端开发人员交流社区

搜索
查看: 734|回复: 0

[JavaScript] 猴年美猴王显神威 猴王追击某导

[复制链接]

94

主题

150

帖子

148

积分

管理员

会在前端的道路上一直走下去!

Rank: 15Rank: 15Rank: 15Rank: 15Rank: 15

积分
148

社区QQ达人

发表于 2016-1-30 19:37:31 | 显示全部楼层 |阅读模式
在前端网看见的一个非常有意思的页面

[HTML] 纯文本查看 复制代码
<!DOCTYPE html>
<html lang="zh-CN">
 <head>
  <meta charset="UTF-8" />
  <meta name="Keywords" content="" />
  <meta name="Description" content="" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />
  <meta name="apple-mobile-web-app-capable" content="yes" />
  <meta content="telephone=no" name="format-detection" />
  <meta content="email=no" name="format-detection" />
  <title>猴王追击某导</title>
  <style>
    html,body{height:100%;margin:0;padding:0;overflow:hidden;}
    h2{text-align:center;}
    div{position:absolute;}
    .houwang{width:6em;height:15.6em;left:-8em;top:0;background:url(data:image/png;base64,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) no-repeat 0 50%;background-size:contain;}
    .yaoguai{width:4em;height:4em;left:0;top:13em;margin-left:-2em;line-height:4em;border-radius:50%;text-align:center;color:#FFF;background:#000;}
    .taopao{width:4em;height:1.2em;left:0;top:0;line-height:1.2em;margin-top:-0.6em;text-align:center;color:#FFF;background:#000;-webkit-transform-origin:0 50%;transform-origin:0 50%;}
    .taopao:after{position:absolute;content:"";left:-1.8em;top:-0.4em;height:0;border:1em solid transparent;border-right-color:#000;}
  </style>
 </head>
 <body>
  <h2>妖精,哪里逃!</h2>
  <div class="houwang"></div>
  <div class="yaoguai">
    某导
  </div>
  <div class="taopao">逃跑</div>
  <script>
  (function(){
     var houge=document.querySelector(".houwang"),
     moudao=document.querySelector(".yaoguai"),
     tao=document.querySelector(".taopao"),
     mdW=moudao.offsetWidth,
     mdH=moudao.offsetHeight,
     W=window.innerWidth,
     ox=0,
     oy=0,
     vx=0,
     vy=0,
     ox1=0,
     oy1=0,
     vx1=0,
     vy1=0,
     spring=0.02,
     gravity=1.5,
     friction=0.9,
     mouse={x:0,y:0};
     window.animFrame=window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||function(fn){
       return setTimeout(fn,1000/60);
     };

     function setMove(obj,x,y){
       obj.style.transform=obj.style.webkitTransform="translate3d("+x+"px,"+y+"px,0)";
     }
     function setDir(){
        tao.style.transform=tao.style.transform="translate3d("+mouse.x+"px,"+mouse.y+"px,0) rotate("+(Math.atan2(oy1-mouse.y,ox1-mouse.x)*180/Math.PI)+"deg)";
         hit(); 
     }

     function hit(){
       vx+=(ox1-ox)*spring;
       vy+=(oy1-oy)*spring+gravity;
       vx*=friction;
       vy*=friction;

       ox+=vx;
       oy+=vy;

        if(mouse.x<W/2)
       {
         houge.style.left="2em";
         houge.style.transform=houge.style.webkitTransform="translate3d("+ox+"px,"+oy+"px,0) scaleX(-1)";
       }
       else
       {
         houge.style.left="";
         setMove(houge,ox,oy);
       }
     }
     function rand(a,b){
       return Math.random()*(b-a)+a;
     }
     function taopao(){  //逃跑
       vx1+=(mouse.x-ox1)*spring;
       vy1+=(mouse.y-oy1)*spring+gravity;
       vx1*=friction;
       vy1*=friction;

       ox1+=vx1;
       oy1+=vy1;
       
       setMove(moudao,ox1,oy1);
       setDir();
       animFrame(taopao);       
     }

     document.addEventListener("mousemove",function(e){
        mouse.x=e.clientX;
        mouse.y=e.clientY; 
     },false);
     
            
    
    setTimeout(function(){
      W=window.innerWidth;
      taopao(); 
    },500);
  })();
//源文出处 [url=http://www.w3cfuns.com/notes/11445/5bfa7f497eb35d2350de4c41e1a1f48f]http://www.w3cfuns.com/notes/114 ... d2350de4c41e1a1f48f[/url] 作者:hugeannex
  </script>
 </body>
</html>


效果展示地址
WEB前端开发人员共同的技术交流平台,提倡开源、安全、自由、共享的网络精神! —— —— www.fedte.cn
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则



Archiver|手机版|小黑屋|前端开发技术交流

Copyright © 2009-2015 前端开发技术交流 http://www.fedte.cn 版权所有 All Rights Reserved.

免责声明: 本社区不承担任何由社区会员所提供的信息和工具所引起的争议和法律责任。

GMT+8, 2020-11-26 22:42

快速回复 返回顶部 返回列表