Js 旋转平滑特效
效果图
源码
<!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 旋转平滑特效的更多相关文章
- JS框架_(coolShow.js)图片旋转动画特效
百度云盘 传送门 密码:ble6 coolShow.js插件图片旋转动画效果 <!DOCTYPE HTML> <head> <meta http-equiv=" ...
- 基于jQuery和CSS3炫酷图片3D旋转幻灯片特效
在线预览 源码下载 iPresenter是一款效果非常炫酷的jQuery和CSS3 3D旋转幻灯片特效插件.你可以使用它来制作产品展示.图片画廊或者各种幻灯片和轮播图特效.这款幻灯片插件的特点有: ...
- 基于jQuery环形图标菜单旋转切换特效
分享一款基于jQuery环形图标旋转切换特效.这是一款鼠标点击图标菜单圆形顺时针或者逆时针旋转切换代码.效果图如下: 在线预览 源码下载 实现的代码. js代码: /* 图片地址可以是相对路径或绝 ...
- 一款基于jQuery和CSS3炫酷3D旋转画廊特效插件
这是一款效果炫酷的jQuery和CSS3 3D旋转画廊特效插件.该3D画廊插件可以通过前后导航按钮来切换图片,效果就像旋转木马一样.它还带有点击放大图片,显示图片标题和用键盘操作等功能. 在线预览 ...
- css3动画应用-音乐唱片旋转播放特效
css3动画应用-音乐唱片旋转播放特效 核心点: 1.设置图片为圆形居中,使图片一直不停旋转. 2.文字标题(潘玮柏--反转地球)一直从左到右不停循环移动. 3.点击图标,音乐暂停,图片停止旋转:点击 ...
- js页面载入特效如何实现
js页面载入特效如何实现 一.总结 一句话总结:可以加选择器(里面的字符串)作为参数,这样函数就可以针对不同选择器,就很棒了. 1.特效的原理是什么? 都是通过标签的位置和样式来实现特效的. 二.js ...
- Rotating Image Slider - 图片旋转切换特效
非常炫的图片旋转滑动特效,相信会给你留下深刻印象.滑动图像时,我们会稍稍旋转它们并延缓各元素的滑动.滑块的不寻常的形状是由一些预先放置的元素和使用边框创建.另外支持自动播放选项,鼠标滚轮的功能. 在线 ...
- 可控制转速CSS3旋转风车特效
以前制作网页动画一般使用javascript,现在已经有越来越多动动画使用纯CSS实现,并且动画的控制也可以使用CSS3实现,因为CSS 3来了,CSS 3的动画功能确实强大.以下是一个纯CSS3制作 ...
- 案例：用JS实现放大镜特效
案例:用JS实现放大镜特效 案例:用JS实现放大镜特效
随机推荐
- mysql 监控长事务
mysql> desc information_schema.innodb_trx -> ; +----------------------------+----------------- ...
- MFC中对话框的工具栏的使用
1.新建一个MFC项目:在资源视图中新建Toolbar资源: 2.编辑状态栏: 3.在***Dlg.h文件中添加CToolBar类型或其派生类型的一个变量如:(CdlgToolBar myToolBa ...
- 几种任务调度的 Java 实现方法与比较Timer,ScheduledExecutor,Quartz,JCronTab
几种任务调度的 Java 实现方法与比较 综观目前的 Web 应用,多数应用都具备任务调度的功能.本文由浅入深介绍了几种任务调度的 Java 实现方法,包括 Timer,Scheduler, Quar ...
- hdu-2768-Cat vs. Dog(二分图-最大匹配数)
题意: 有猫C个和狗D个,有V个投票人,每个人喜欢猫讨厌狗或则喜欢狗讨厌猫! 求最多能满足多少投票人. 分析: 两个投票者矛盾的话就连一条边,总数减去最大匹配数/2就是要求的答案 // File Na ...
- HDOJ(HDU) 2153 仙人球的残影(谜一样的题、、、)
Problem Description 在美丽的HDU,有一名大三的同学,他的速度是众所周知的,跑100米仅仅用了2秒47,在他跑步过程中会留下残影的哎,大家很想知道他是谁了吧,他叫仙人球,既然名字这 ...
- SRM 507(2-1000pt)
DIV2 1000pt 题意:在一个长度无限的数轴上移动一个方块,每次可以向左或者向右移动距离x,只要x为完全平方数.数轴上有一些坑,如果方块移动到坑上则方块会掉进坑中,不能再被移动.给整数s,e,和 ...
- 配置openStack使用spice
注:因为在测试配置过程中反复配置过多次,以下内容可能并不完整,有待验证. 按官方文档(openstack-install-guide-yum-juno)搭建和配置的OpenStack默认使用novnc ...
- python 解析xml 文件: Element Tree 方式
环境 python:3.4.4 准备xml文件 首先新建一个xml文件,countries.xml.内容是在python官网上看到的. <?xml version="1.0" ...
- 361. Bomb Enemy
这个题确实不会..只能想到naive的做法,不过那样应该是O(n³),不会满足要求. 看TAG是DP,那应该是建立DP[][]记录每点可炸的情况.一个点如果左边/上边是墙,或者左边/上边是边界,就要重 ...
- 20个高级Java面试题
这是一个高级Java面试系列题中的第一部分.这一部分论述了可变参数,断言,垃圾回收,初始化器,令牌化,日期,日历等等Java核心问题. 程序员面试指南:https://www.youtube.com/ ...