<!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. touch: cannot touch ‘/var/jenkins_home/copy_reference_file.log’: Permission denied

    docker 运行后, 执行docker logs -f myjenkins时报错: touch: cannot touch ‘/var/jenkins_home/copy_reference_fil ...

  2. perl学习之正则表达式

    9    Perl 中的正则表达式 正则表达式的三种形式 正则表达式中的常用模式 正则表达式的 8 大原则 正则表达式是 Perl 语言的一大特色,也是 Perl 程序中的一点难点,不过如果大家能够很 ...

  3. Python文件指针与Python函数

    文件内指针移动:f.seek() 强调:只有t模式下read(n),n代表字符的个数,除此以外都是以字节为单位. """ 文件内容:哈哈哈哈 呵呵呵呵 "&qu ...

  4. python_列表——元组——字典——集合

    列表——元组——字典——集合: 列表: # 一:基本使用# 1.用途:存放多个值 # 定义方式:[]内以逗号为分隔多个元素,列表内元素无类型限制# l=['a','b','c'] #l=list([' ...

  5. NSArray 排序

    先研究一种方法 NSMutableArray *array = [[NSMutableArray alloc] initWithCapacity:]; ; i < ; i++) { ; [arr ...

  6. module_param

    该宏定义在include/linux/moduleparam.h中 #define ___module_cat(a,b) __mod_ ## a ## b #define __module_cat(a ...

  7. python基础学习笔记——time模块

    time模块 time翻译过来就是时间,有我们其实在之前编程的时候有用到过. #常用方法 1.time.sleep(secs) (线程)推迟指定的时间运行.单位为秒. 2.time.time() 获取 ...

  8. 使用systemctl命令管理服务mysql

    启动mysql systemctl start mysqld.service 停止mysql systemctl stop mysqld.service 重启mysql systemctl resta ...

  9. NYOJ 469 擅长排列的小明 II

    擅长排列的小明 II 时间限制:1000 ms  |  内存限制:65535 KB 难度:3   描述 小明十分聪明,而且十分擅长排列计算. 有一天小明心血来潮想考考你,他给了你一个正整数n,序列1, ...

  10. 【JavaScript 10—应用总结】：连缀

    一.总体概述 1.1,什么叫连缀 所谓连缀,最简单的理解就是一句话同时设置一个或多个节点两个或两个以上的操作.比如: <span style="font-size:18px;" ...