<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>derective sport</title>
    <style type="text/css">
        #eyes{width:200px;height:300px;position: absolute;left:500px;top:200px;text-align: center;background:url(../images/eye.png) no-repeat;}
        #leye{border:2px solid blue;position: absolute;left:115px;top:41px;border-radius: 50%;}
        #reye{border:2px solid blue;position: absolute;left:135px;top:41px;border-radius: 50%;}
    </style>
    <script type="text/javascript">
        window.onload=function(){
            var r=4;
            var oLeye=document.getElementById('leye');
            var oReye=document.getElementById('reye');
            document.onmousemove=function(ev){
                var ev=ev||event;
                
                sport(oLeye,115,41);
                sport(oReye,135,41);
            
                function sport(obj,L,T){
                    var a=ev.clientY-(obj.offsetTop+obj.parentNode.offsetTop);
                    var b=ev.clientX-(obj.offsetLeft+obj.parentNode.offsetLeft);
                    var sportX=Math.sin(Math.atan2(b,a))*r;
                    var sportY=Math.cos(Math.atan2(b,a))*r;
                    obj.style.left=L+sportX+'px';
                    obj.style.top=T+sportY+'px';
                }
            }
        }

    </script>
</head>
<body>
    <div id="eyes">
        <span id="leye"></span>            
        <span id="reye"></span>
    </div>
</body>
</html>

有方向的运动js的更多相关文章

  1. js动画 Css提供的运动 js提供的运动

    1.     动画 (1)      Css样式提供了运动 过渡的属性transition  从一种情况到另一种情况叫过渡 Transition:attr  time  linear  delay: ...

  2. 运动 js

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  3. 移动应用滑动屏幕方向判断解决方案,JS判断手势方向

    问题分类 滑动屏幕打开相应功能操作. 问题描述 1.用户手动滑动屏幕,根据滑动的方向,打开相应的功能(如:向上滑摇钱树经验明细,向下滑打开任务明细,向左滑打开聚宝盆物品查看等功能),滑动事件捕获问题. ...

  4. H5 设备方向及运动API

    传送门:https://blog.csdn.net/Panda_m/article/details/57515195 入门的demo: <!DOCTYPE html> <html l ...

  5. js实现缓冲运动，和匀速运动有点不相同

    缓冲运动和匀速运动有点不同,看图可以知道缓冲运动速度是越来越慢的. <style> *{ padding:0; margin:10px 0; } #div1{ height:100px; ...

  6. 【HTML5 】手机重力与方向感应的应用——摇一摇效果

    http://www.helloweba.com/view-blog-287.html HTML5有一个重要特性:DeviceOrientation,它将底层的方向和运动传感器进行了高级封装,它使我们 ...

  7. js 实现淘宝无缝轮播图效果，可更改配置参数 带完整版解析代码[slider.js]

    前言:         本人纯小白一个,有很多地方理解的没有各位大牛那么透彻,如有错误,请各位大牛指出斧正!小弟感激不尽.         本篇文章为您分析一下原生JS写淘宝无缝轮播图效果 需求分析: ...

  8. three.js cannon.js物理引擎制作一个保龄球游戏

    关于cannon.js我们已经学习了一些知识,今天郭先生就使用已学的cannon.js物理引擎的知识配合three基础知识来做一个保龄球小游戏,效果如下图,在线案例请点击博客原文. 我们需要掌握的技能 ...

  9. 二、JavaScript语言--JS动画--JS动画效果

    运动框架实现思路: 1.速度(改变值:left , right , width , height , opacity) 2.缓冲运动 3.多物体运动 4.任意值改变 5.链式运动 6.同时运动 js用 ...

随机推荐

  1. 【REDIS】 redis-cli 命令

    Redis提供了丰富的命令(command)对数据库和各种数据类型进行操作,这些command可以在Linux终端使用. 在编程时,比如使用Redis 的Java语言包,这些命令都有对应的方法.下面将 ...

  2. PAT Basic 1044

    1044 火星数字 火星人是以 13 进制计数的: 地球人的 0 被火星人称为 tret. 地球人数字 1 到 12 的火星文分别为:jan, feb, mar, apr, may, jun, jly ...

  3. luogu1231 教辅的组成

    注意把书拆成两份 #include <iostream> #include <cstring> #include <cstdio> #include <que ...

  4. python pdb模块

    参考文件http://pythonconquerstheuniverse.wordpress.com/category/Python-debugger/ 翻译不是一一对应 Debug功能对于devel ...

  5. 【java基础 11】java集合框架学习

    导读:本篇博客主要是从整体上了解java的集合框架,然后主要介绍几个自己在项目中用到的结构,比如说:hashtable.hashmap.hashset.arraylist等! 一.宏观预览 从宏观上看 ...

  6. 移动端没有session怎么处理

    (转:https://my.oschina.net/wanglihui/blog/150726) 手机客户端与服务器端的通信,不同于浏览器与服务器端的通信.浏览器和服务器端的通信依靠session去维 ...

  7. EXPDP/IMPDP任务的查看与管理

    EXPDP/IMPDP相比传统的exp/imp的最本质区别在于服务器端执行,客户端发出指定后,通过API启动服务器的备份job,在执行过程中,可以拿下Ctrl+C组合键,退出当前交互模式,退出之后,导 ...

  8. Git 撤消操作

    修改最后一次提交 有时候我们提交完了才发现漏掉了几个文件没有加,或者提交信息写错了.想要撤消刚才的提交操作,可以使用 --amend 选项重新提交: $ git commit --amend 此命令将 ...

  9. JSPatch部署JS代码控制OC代码

    前言: 这里算是比较实用的一篇了吧,进行了网络安全部署 准备: bmob账号,JSPatch,公钥,私钥,MD5加密,AFNetWorking下载文件 #import <CommonCrypto ...

  10. 【Luogu】P2530化工厂装箱员（DP）

    题目链接 不知道做出这道题是我能力的一个提升还是能力的回归. DP.设f[i][j][k][l]是已经取了i个产品,现在手里还拿着j件A,k件B,l件C,最小的操作数. 然后状转方程乱搞啊 #incl ...