<!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. Python、机器学习、计算机视觉、深度学习入门

    1.简明Python教程 2.Python计算机视觉编程 3.机器学习实践 4.吴恩达机器学习 5.李飞飞深度学习与计算机视觉

  2. es6--之箭头函数

    「箭头函数」是 ECMAScript6 中非常重要的性特性.很多文章都在描述它的上下文透明性以及短语法.新特性必然会带来很多好处,但凡事都有两面性.本篇文章会通过情景引导,让你知晓哪些情景下应该绕过箭 ...

  3. 【04】Math图解

    [04]Math知识图    

  4. oracle11gR2下scott用户以及表的建立

    目录 oracle11gR2下scott用户以及表的建立 找到系统带的sql文件(utlsample.sql) 根据SQL的内容操作 新建用户并授权 scott登录 表操作 查询表(使用pl/sql) ...

  5. bootshiro---开源的后台管理框架--基于springboot2+ shiro+jwt的真正rest api资源无状态认证权限管理框架,开发人员无需关注权限问题,后端开发完api,前端页面配置即可

    https://gitee.com/tomsun28/bootshiro

  6. CentOS7 开启免密登陆

    1.开启免密登陆功能 以下文件 /etc/ssh/sshd_config 取消以下两项注释,如果没有添加. RSAAuthentication yes PubkeyAuthentication yes ...

  7. ubuntu14.04LTS root登录出现错误

    输入root帐号和密码,出现以下错误: Error found when loading /root/.profile stdin:is not a tty 解决方法: 在终端中用命令:gedit / ...

  8. ListView虚拟模式封装

    public class ListViewAH : ListViewEx { #region 虚拟模式相关操作 ///<summary> /// 前台行集合 ///</summary ...

  9. hdu 4764 巴什博弈

    Stone Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Total Subm ...

  10. hdu 2100

    #include<stdio.h> #include<string.h> char a[300],b[300]; int a1[300],b1[300]; int main() ...