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>
鼠标经过时, 方块会旋转并且移动。
您可能感兴趣的文章：
40个有创意的jQuery图片和内容滑动及弹出插件收藏集之三
纯CSS3图标旋转效果代码
40个有创意的jQuery图片、内容滑动及弹出插件收藏集之一
分享精心挑选的23款美轮美奂的jQuery 图片特效插件
jQuery图片播放器 imgplayer
PS CC 2014旋转模糊 路径模糊滤镜同时使用特效实例
jQuery幻灯片放映插件 CrossSlide
40个有创意的jQuery图片和内容滑动及弹出插件收藏集之二
JS图片滚动的实例代码 js实现图片的无缝、平滑滚动
滚动图片效果 jquery实现回旋滚动效果