<!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. mysqlfailover测试

    mysqlfailover是mysql官方用python语言写的一款工具,包含在mysql utilities工具集中.主要作用是保障mysql高可用.他会定时检测节点状态,当master节点不可用时 ...

  2. GIMP矩形选框预圆形选框

    矩形选框,四种框选模式,了解一下 Repalace the current selector Add to the current selection (shift键) Subtract from t ...

  3. Verilog之delay的两种用法（inter/intra）

    verilog语言中有两种延迟方式:inter-delay和intra-delay,关于inter和intra.这两个英文前缀都有“内部,之间”的意思,但又有所不同.inter表达不同事物之间,int ...

  4. Vector模板类----构造与析构

    /* 基于C++平台*/ typedef int rank; //用int来定义 “秩” 这种概念 #define DEFAULT_CAPACIITY 3 //默认初始容量,实际应用中可以取更大的值 ...

  5. JS(异步与单线程）

    JS(异步与单线程) 题目1.同步和异步的区别是什么,试举例(例子见知识点) 区别: 1.同步会阻塞代码执行,而异步不会 2.alert 是同步,setTimeout 是异步 题目2.关于 setTi ...

  6. python基础学习笔记——内置函数

    一. 简介 python内置了一系列的常用函数,以便于我们使用,python英文官方文档详细说明:点击查看, 为了方便查看,将内置函数的总结记录下来. 二. 使用说明 以下是Python3版本所有的内 ...

  7. kali2018 安装****

    1.安装需要的依赖包: apt-get install qt5-qmake qtbase5-dev libqrencode-dev libappindicator-dev libzbar-dev ro ...

  8. SQLserver查看某个视图的创建语句

    1.已经创建好的视图,查看视图创建时的源码 sp_helptext  '视图名' 如下: sp_helptext 'V_user' 方式2: sa账户登录SQLserver,选择视图---右键---- ...

  9. 安卓手机 HTML5 手机页面 输入表单被键盘遮挡住了

    TML5 手机页面 输入表单被键盘遮挡住了 请问 大神 怎么 js 或者 JQ 判断安卓手机软键盘的键盘隐藏键按下去了? 有使用 uexWindow 方法 能判断到确定键 是 13 但是不知道这个键的 ...

  10. BZOJ 3205 [Apio2013]机器人 ——斯坦纳树

    腊鸡题目,实在卡不过去. (改了一下午) 就是裸的斯坦纳树的题目,一方面合并子集,另一方面SPFA迭代求解. 优化了许多地方,甚至基数排序都写了. 还是T到死,不打算改了,就这样吧 #include ...