JS JQuery实现简单的鼠标移动动画效果

JS JQuery实现简单的鼠标移动动画效果

说明：
之前看到过很多别人写的的网页鼠标特效，感觉很炫酷。
但是那些都涉及到复杂的数学知识和逻辑，我没有能力写出类似的鼠标效果，于是我仿照一般的显示鼠标移动轨迹特效，使用js和dom元素写出了一个简单的鼠标移动效果。
其中涉及到的知识并不复杂，只需要熟悉js和jquery即可。

运行效果：

思路：
主要是给document对象添加mousemove鼠标移动事件，创建并操控记录鼠标位置的div。

程序中用到了旋转效果，因此除jquery外还需要引入jQueryRotate这个jquery旋转动画库。
该程序不需要依赖css样式，故除jquery和jQueryRotateCompressedz库外，只需要引入一个js文件即可在网页中使用该效果。

需要注意的是，虽然这个程序只是一个逻辑简单的鼠标移动效果，但在鼠标移动时依然会消耗较多的电脑性能。因为在鼠标移动时浏览器会同时处理三个定时器和一个鼠标移动事件，在几乎每个步骤中还会对dom元素数组中的每一个元素都进行操作。
这显然是需要进行优化的，但我目前还没有学会能够进一步优化的方法。

代码：

jQueryRotateCompressed jQuery旋转动画库压缩代码

// VERSION: 2.3 LAST UPDATE: 11.07.2013
/*
 * Licensed under the MIT license: http://www.opensource.org/licenses/mit-license.php
 *
 * Made by Wilq32, wilq32@gmail.com, Wroclaw, Poland, 01.2009
 * Website: http://jqueryrotate.com
 */
(function(k){
   for(var d,f,l=document.getElementsByTagName("head")[0].style,h=["transformProperty","WebkitTransform","OTransform","msTransform","MozTransform"],g=0;g<h.length;g++)void 0!==l[h[g]]&&(d=h[g]);d&&(f=d.replace(/[tT]ransform/,"TransformOrigin"),"T"==f[0]&&(f[0]="t"));eval('IE = "v"=="\v"');jQuery.fn.extend({
   rotate:function(a){
   if(0!==this.length&&"undefined"!=typeof a){
   "number"==typeof a&&(a={
   angle:a});for(var b=[],c=0,d=this.length;c<d;c++){
   var e=this.get(c);if(e.Wilq32&&e.Wilq32.PhotoEffect)e.Wilq32.PhotoEffect._handleRotation(a);
else{
   var f=k.extend(!0,{
   },a),e=(new Wilq32.PhotoEffect(e,f))._rootObj;b.push(k(e))}}return b}},getRotateAngle:function(){
   for(var a=[0],b=0,c=this.length;b<c;b++){
   var d=this.get(b);d.Wilq32&&d.Wilq32.PhotoEffect&&(a[b]=d.Wilq32.PhotoEffect._angle)}return a},stopRotate:function(){
   for(var a=0,b=this.length;a<b;a++){
   var c=this.get(a);c.Wilq32&&c.Wilq32.PhotoEffect&&clearTimeout(c.Wilq32.PhotoEffect._timer)}}});Wilq32=window.Wilq32||{
   };Wilq32.PhotoEffect=function(){
   return d?function(a,b){
   a.Wilq32={
   PhotoEffect:this};
this._img=this._rootObj=this._eventObj=a;this._handleRotation(b)}:function(a,b){
   this._img=a;this._onLoadDelegate=[b];this._rootObj=document.createElement("span");this._rootObj.style.display="inline-block";this._rootObj.Wilq32={
   PhotoEffect:this};a.parentNode.insertBefore(this._rootObj,a);if(a.complete)this._Loader();else{
   var c=this;jQuery(this._img).bind("load",function(){
   c._Loader()})}}}();Wilq32.PhotoEffect.prototype={
   _setupParameters:function(a