javascript简写效果“神秘的眼睛”

www.jb51.net神秘的眼睛我们

.eye{
display:inline;
overflow:hidden;
position:relative;
float:left;
margin:50px 0 0 50px;
width:50px;
height:50px;
font-size:50px;
line-height:106%;
+line-height:normal;
cursor:default;
}
@media all and (min-width:0px){
.eye{line-height:normal;}
}
.pupil{
overflow:hidden;
position:absolute;
margin:-5px 0 0 -5px;
width:10px;
height:10px;
line-height:normal;
font-size:10px;
top:50%;
left:50%;
}

○●

○●

var $=function(o){return document.getElementById(o)}
var leftEye=$("leftEye");
var rightEye=$("rightEye");
var leftPupil=$("leftPupil");
var rightPupil=$("rightPupil");
var xy=$("xy");
document.documentElement.onmousemove=function(e){
var e=window.event||e;
var eX=e.clientX, eY=e.clientY;
track(leftEye,leftPupil,eX,eY);
track(rightEye,rightPupil,eX,eY);
}
function track(o,i,eX,eY){
var oL=o.offsetLeft;
var oT=o.offsetTop;
var oW=o.offsetWidth;
var oH=o.offsetHeight;
var oCW=o.clientWidth;
var oCH=o.clientHeight;
var oX=oL+oW/2;
var oY=oT+oH/2;
var eX=eX-oX;
var eY=eY-oY;
var eXY,iL,iT;
if(eX!=0&&eY!=0){
eXY=eX/eY;
var r=oCW/2-12;
var R=Math.sqrt(eX*eX+eY*eY);
var rR=R/5>r?r:R/5;
var iL=Math.sqrt(rR*rR/(1+1/(eXY*eXY)));
if(eX

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

赞 (0)

相关推荐

  • js判断为空Null与字符串为空简写方法

    最近突然发现自己写的JavaScript代码比较臃肿,所以开始研究JavaScript的简写方法.这样一来,可以让我们的JavaScript代码看起来比较清爽,同时也可以提高我们的技术.那么判断为空怎么简写呢? 下面就是有关判断为空的简写方法. 代码如下 复制代码 代码如下: if (variable1 !== null || variable1 !== undefined || variable1 !== '') { var variable2 = variable1; } 上面的意思是说如果

  • Javascript简写条件语句(推荐)

    经常在各处牛人的代码中看到许多简写的条件表达语句,看了一些介绍这方面的文章,觉得3 ways 2 say if这篇文章(http://www.thomasfrank.se/3_ways_2_say_if.html)还不错.在这篇文章中作者对传统的if...else....?:.&&/||三种条件表达的写法的特点及用处进行了总结归纳,简述如下: 1. if...else结构 // Set r to 0 or 1 var r= Math.floor(2*Math.random()) // Se

  • 分享19个JavaScript 有用的简写写法

    原文链接,最近很火的一篇文章 This really is a must read for any JavaScript-based developer. I have written this article as a vital source of reference for learning shorthand JavaScript coding techniques that I have picked up over the years. To help you understand

  • JavaScript中最常用的10种代码简写技巧总结

    JavaScript中最常用的10种代码简写技巧总结

    前言 本文主要给大家整理了一份10个程序员常用的代码简写技术,看懂一种是入门,全懂就是大神,你能知道几个呢?下面话不多说了,来看看详细的介绍: 一.三元操作符 当想写if-else语句时,使用三元操作符来代替. const x = 20;let answer;if (x > 10) { 简写: const answer = x > 10 ? 'is greater' : 'is lesser'; 也可以嵌套if语句: const big = x > 10 ? " greater

  • javascript教程:关于if简写语句优化的方法

    UglifyJS是一个对javascript进行压缩和美化的工具,在它的文档说明中,我看到了几种关于if语句优化的方法.尽管我还没使用它去做一些尝试性的测试,但从这里可以看到它的确对js作了美化的工作.也许有人认为if语句就那么简单,能优化到什么程度?但是看看以下的几种方式,你也许会改变看法. 一.使用常见的三元操作符 if (foo) bar(); else baz(); ==> foo?bar():baz();if (!foo) bar(); else baz(); ==> foo?baz

  • javascript简写常用的12个技巧（可以大大减少你的js代码量）

    前言 本文主要给大家分享了javascript简写常用的12个技巧,无论你是初学者还是资深人士,都值得一读!下面话不多说了,来一起看看详细的介绍: 1. 空(null, undefined)验证 当我们创建了一个新的变量,我们通常会去验证该变量的值是否为空(null)或者未定义(undefined).这对于JavaScript编程来说,是一个经常要考虑到的验证. 如果直接写,像下面这样: if (variable1 !== null || variable1 !== undefined || v

  • js getElementsByTagName的简写方式

    复制代码 代码如下: //CLASS@Mr.Think*****getElementsByTagName function tag(name,elem){ if(!document.getElementsByTagName) return false; return (elem || document).getElementsByTagName(name); } 使用不做详述,若是用于获取整个文档中某指定标签集合,可直接用tag("xx")获取.

  • javascript简写效果“神秘的眼睛”

    www.jb51.net神秘的眼睛我们 .eye{ display:inline; overflow:hidden; position:relative; float:left; margin:50px 0 0 50px; width:50px; height:50px; font-size:50px; line-height:106%; +line-height:normal; cursor:default; } @media all and (min-width:0px){ .eye{lin

  • Javascript动画效果（2）

    Javascript动画效果（2）

    在前面的文章中讲了简单的Javascript动画效果,这篇文章主要介绍我在改变之前代码时发现的一些问题及解决方法. 在前面的多物体宽度变化的例子中,我们给其增加代码:border: 4px solid #000;我们发现,鼠标移出后,宽度不是200px了,那么究竟是如何产生这种情况的呢?下面我们通过一个新的例子来分析 html代码: <div id="div1">hello</div> css代码: body,div{ margin: 0px; padding:

  • AngularJS 实现JavaScript 动画效果详解

    AngularJS 应用中实现 JavaScript 动画效果 AngularJS 是一组用于创建单页Web应用的丰富框架,给构建丰富交互地应用带来了所有需要的功能.其中一项主要的特性就是Angular带来了对动画的支持. 我们能够在应用的部分内容当中使用动画来表明一些变化正在发生.在我上一篇文章当中,我讲到了在Angular应用中对CSS动画的支持.在这篇文章当中,我们会看到怎样利用JavaScript脚本在AngularJS应用当中生成动画效果. 在Angular当中,CSS和JavaScr

  • javascript倒计时效果实现

    javascript倒计时效果实现

    本文分析不同倒计时效果的计算思路及方法,掌握日期对象Date,获取时间的方法,计算时差的方法,实现不同的倒时计效果. 1.简单时间显示 讲解日期对象Date,并通过该对象获取时.分.秒等,让你自由提取所需时间内容. <!DOCTYPE html> <html> <head> <title>获取时间</title> <script type="text/javascript"> window.onload = fun

  • 尝试动手制作javascript放大镜效果

    尝试动手制作javascript放大镜效果

    本文实例为大家介绍了基于javascript实现放大镜效果的原理和代码,分享给大家供大家参考,具体内容如下: 原理: A:放大镜   B:小图片 C:大图片可视区域 D:大图片 鼠标的位置应该在放大镜的中央,所以鼠标位置为: clientX=A.offsetLeft()+B.offsetLeft+1/2*A.offsetWidth; clientY=A.offsetTop()+B.offsetTop+1/2*A.offsetHeight; 鼠标移动过程中:放大镜A和大图D是一起随鼠标成比例运动的

  • javascript运动效果实例总结(放大缩小、滑动淡入、滚动)

    本文实例总结了javascript运动效果实现与用法.分享给大家供大家参考,具体如下: 一.图片放大缩小效果: <!doctype html> <html> <head> <meta charset="utf-8"> <title>图片放大缩小</title> <style> *{ margin:0; padding:0; list-style:none;} #ulList{ margin:50px;}

  • javascript 缓冲效果实现代码 推荐

    菜鸟版代码如下: 理解这段代码就基本上掌握了 复制代码 代码如下: function f_s() { var obj = document.getElementById("top"); obj.style.display = "block"; obj.style.height = "1px"; var sw = function () { var s_width = parseInt(obj.style.height); if (s_width

  • Javascript动画效果（3）

    前面我们已经介绍了速度动画.透明度动画.多物体运动和任意值变化,并且我们在Javascript动画效果(二)中介绍到我们封装了一个简单的插件雏形,接下来我们对前面的动画效果进行进一步扩充,尽量将我们的框架做到更实用.在这里我们还需要了解两个运动,一个是链式运动,一个是同时运动.它们间的区别分别是:链式运动是指运动一个接着一个(一个运动完成马上进行下一个运动):而同时运动是指所有的运动同时进行.在这里,我们该如何实现呢? 1.链式运动 前面的效果中,我们已经能对任意值进行相应的变化,我们该如何在一

随机推荐