效果图

源码

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

 <html style="height: 100%;">
 <body style="height: 100%;">

 </body>

 <script type="text/javascript">
     // =============================================================================
     //    Util.
     //
     var Util = {
         getBody: function()
         {
             return document.body;
         },
         appendToBody: function(tag)
         {
             this.getBody().appendChild(tag);
         },
         createShape: function(x, y, width, height)
         {
             var div = document.createElement("div");
             div.style.position     = "absolute";
             div.style.border    = "solid";
             div.style.background= "rgb(180, 230, 29)";
             //div.style.color        = "rgb(180, 230, 29)";
             div.style.left         = x + "px";
             div.style.top         = y + "px";
             div.style.width     = width + "px";
             div.style.height     = height + "px";
             //div.style.webkitTransform = "rotate(70deg)";
             return div;
         },
         equal: function(v1, v2)
         {
             return Math.abs(v1 - v2) < 0.0001;
         },
         parseAngle: function(angle)
         {
             return "rotate(_angledeg)".replace("_angle", angle);
         },
         parseRect: function(x, y, width, height)
         {
             var result = "rect(_ypx, _endxpx, _endypx, _xpx)";
             result = result.replace("_x", x).replace("_y", y);
             result = result.replace("_endx", x + width).replace("_endy", y + height);
             return result;
         },
         getTagPoint: function(tag)
         {
             return {
                 "x": parseInt(tag.style.left.replace("px", "")),
                 "y": parseInt(tag.style.top.replace("px", ""))
             };
         },
         setTagPoint: function(tag, point)
         {
             tag.style.left = point.x + "px";
             tag.style.top = point.y + "px";
         }
     };
     //
     // =============================================================================

     //
     //    获取鼠标坐标.
     //
     var cursor = {
         "x": 0,
         "y": 0,
         "setPosition": function(e)
         {
             this.x = e.clientX;
             this.y = e.clientY;
         }
     };
     // 绑定全局, 获取鼠标坐标.
     (
         function()
         {
             Util.getBody().onmousemove = cursor.setPosition;
         }
     )();
     //
     // =============================================================================

     // =============================================================================
     //    元素信息.
     //
     function ElementInfo(tag)
     {
         var self = this;
         tag.onmousemove = function() { self.step1 = 10; self.step2 = 5; };
         this.angle = 0;
         this.step1 = 0;    // 旋转.
         this.step2 = 0;    // 移动.
         this.tag = tag;
         Util.appendToBody(tag);
     }
     // 执行旋转.
     ElementInfo.prototype.onRotate = function()
     {
         if ( !Util.equal(this.step1, 0) )
         {
             this.angle += this.step1;
             this.angle = parseInt(this.angle);
             this.angle = parseInt(this.angle % 360);
             this.step1 -= 0.05;
             this.tag.style.webkitTransform = Util.parseAngle(this.angle);
         }
     }
     // 执行移动.
     ElementInfo.prototype.onMove = function()
     {
         if ( !Util.equal(this.step2, 0) )
         {
             var tagPoint = Util.getTagPoint(this.tag);
             var toX = this.step2 * Math.sin(3.14 / 180 * this.angle) + tagPoint.x;
             var toY = this.step2 * Math.cos(3.14 / 180 * this.angle) + tagPoint.y;
             Util.setTagPoint(this.tag, {"x": toX, "y": toY});
             this.step2 -= 0.05;
         }
     }
     //
     // =============================================================================

     var elements = [];

     (
         function() {
             var screenWidth = document.documentElement.clientWidth;
             var screenHeight = document.documentElement.clientHeight;
             var cellWidth = 50;
             var cellHeight = 50;
             var cellNumX = 16;
             var cellNumY = 6;
             var viewWidth = cellNumX * cellWidth;
             var viewHeight = cellNumY * cellHeight;
             var viewX = parseInt( (screenWidth - viewWidth) / 2);
             var viewY = parseInt( (screenHeight - viewHeight) / 2);        

             for (var i = 0; i != cellNumX * cellNumY; ++i)
             {
                 var x = viewX + parseInt(i % cellNumX) * cellWidth;
                 var y = viewY + parseInt(i / cellNumX) * cellHeight;    

                 var tag = Util.createShape(x, y, cellWidth, cellHeight);
                 var ele = new ElementInfo(tag);
                 elements.push(ele);

             }
             setInterval(handleLogic, 10);
         }
     )();

     function handleLogic()
     {
         for (var i in elements)
         {
             elements[i].onRotate();
             elements[i].onMove();
         }
     }
 </script>
 </html>

鼠标经过时, 方块会旋转并且移动.

Js 旋转平滑特效的更多相关文章

  1. JS框架_(coolShow.js)图片旋转动画特效

    百度云盘 传送门 密码:ble6 coolShow.js插件图片旋转动画效果 <!DOCTYPE HTML> <head> <meta http-equiv=" ...

  2. 基于jQuery和CSS3炫酷图片3D旋转幻灯片特效

    在线预览   源码下载 iPresenter是一款效果非常炫酷的jQuery和CSS3 3D旋转幻灯片特效插件.你可以使用它来制作产品展示.图片画廊或者各种幻灯片和轮播图特效.这款幻灯片插件的特点有: ...

  3. 基于jQuery环形图标菜单旋转切换特效

    分享一款基于jQuery环形图标旋转切换特效.这是一款鼠标点击图标菜单圆形顺时针或者逆时针旋转切换代码.效果图如下: 在线预览   源码下载 实现的代码. js代码: /* 图片地址可以是相对路径或绝 ...

  4. 一款基于jQuery和CSS3炫酷3D旋转画廊特效插件

    这是一款效果炫酷的jQuery和CSS3 3D旋转画廊特效插件.该3D画廊插件可以通过前后导航按钮来切换图片,效果就像旋转木马一样.它还带有点击放大图片,显示图片标题和用键盘操作等功能. 在线预览   ...

  5. css3动画应用-音乐唱片旋转播放特效

    css3动画应用-音乐唱片旋转播放特效 核心点: 1.设置图片为圆形居中,使图片一直不停旋转. 2.文字标题(潘玮柏--反转地球)一直从左到右不停循环移动. 3.点击图标,音乐暂停,图片停止旋转:点击 ...

  6. js页面载入特效如何实现

    js页面载入特效如何实现 一.总结 一句话总结:可以加选择器(里面的字符串)作为参数,这样函数就可以针对不同选择器,就很棒了. 1.特效的原理是什么? 都是通过标签的位置和样式来实现特效的. 二.js ...

  7. Rotating Image Slider - 图片旋转切换特效

    非常炫的图片旋转滑动特效,相信会给你留下深刻印象.滑动图像时,我们会稍稍旋转它们并延缓各元素的滑动.滑块的不寻常的形状是由一些预先放置的元素和使用边框创建.另外支持自动播放选项,鼠标滚轮的功能. 在线 ...

  8. 可控制转速CSS3旋转风车特效

    以前制作网页动画一般使用javascript,现在已经有越来越多动动画使用纯CSS实现,并且动画的控制也可以使用CSS3实现,因为CSS 3来了,CSS 3的动画功能确实强大.以下是一个纯CSS3制作 ...

  9. 案例：用JS实现放大镜特效

    案例:用JS实现放大镜特效 案例:用JS实现放大镜特效

随机推荐

  1. java数组排序之冒泡排序

    上一篇文章说了,选择排序. 选择排序的原理就是,先确定第一个格子当中的数字是最小的,之后确定第二个格子是其他数字中最小的依次类推. 这一节当中我们来看下冒泡排序: 思路: 1.首先拿第一个数字跟第二个 ...

  2. 在线LCA模板

    在线LCA 如求A,B两点的LCA,先计算出各个结点的深度d[],然后,通过递推公式求出各个结点的2次方倍的祖先p[],假设d[A] > d[B],则找到d[p[A][i]] == d[B]也就 ...

  3. POJ-1330--Nearest Common Ancestors(离线LCA)

    LCA离线算法 它需要一次输入所有的询问,然后有根节点开始进行深度优先遍历(DFS),在深度优先遍历的过程中,进行并查集的操作,同时查询询问,返回结果. 题意: 求A ,B两点的最近公共祖先 分析: ...

  4. Contains Duplicate III —— LeetCode

    Given an array of integers, find out whether there are two distinct indices i and j in the array suc ...

  5. MySQL选用可重复读之前一定要想到的事情

    原文地址:http://blog.itpub.net/29254281/viewspace-1398273/ MySQL选用可重复读隔离级别之前一定要想到的事情.间隙锁 MySQL在使用之前有三个务必 ...

  6. SRM 392(1-250pt)

    DIV1 250pt 题意:给两个各含有一个*号的字符串s1和s2,可以用一个任意字符串代替*号(注意是串,不是只能用单个字符代替,也可以为用空串代替),问能否将s1和s2变为相同的字符串.如果能输出 ...

  7. js中的运算符和条件语句

    js中的运算符大体上可以分为4类:1算术运算符.2一元操作符.3比较运算符.4逻辑运算符. 算术运算符一般指的是加减乘除求余这五种操作符:+,-,*,/,%.通过算术运算符可以对js中的变量进行操作. ...

  8. PHP 計算字符串長度函數

    PHP內置的字符串長度函數strlen無法正確處理中文字符串,它得到的只是字符串所占的字節數.對於GB2312的中文編碼,strlen得到的值是漢字個數的2倍,而對於UTF-8編碼的中文,就是3倍的差 ...

  9. java中的泛型（转）

    什么是泛型? 泛型(Generic type 或者 generics)是对 Java 语言的类型系统的一种扩展,以支持创建可以按类型进行参数化的类.可以把类型参数看作是使用参数化类型时指定的类型的一个 ...

  10. SPOJ 3937 - Wooden Sticks 最长上升子序列LIS

    给了n个(n<=5000)木棍的长度hi与宽度wi(均小于10000),现在机器要打磨这些木棍,如果相邻连个木棍hi<=hj并且wi<=wj就不需要调整机器,问如何排序使得机器调整的 ...