MouseOver使用javascript的CSS3D效果 [英] MouseOver CSS3D effect with javascript
问题描述
我试图实现这样的mouseOver效果。
I am trying to achieve mouseOver effect like this.
我可以根据每个图块的位置生成所需的css3d矩阵。
I am able to generate css3d matrix required for each and every tile according to their position.
我已经实现了这种效果与慢鼠标移动，但如果我正在快速从一个瓷砖移动到另一个瓷砖其正确更新。它显示瓷砖之间的差距。
I have achieved this effect with slow mouse movement, but if I am moving fast from one tile to another tile its notupdating properly. its showing gap in between tiles. What is the best way to update all the tile/tile co-ordinates on mouseover so that i get consistent effect?
这里是我的js代码：
$('.box').each(function() {
$(this).css('height', '284px');
$(this).css('width', '284px');
});
generateGrid = function(w, h) {
var t = this;
this.p = [];
var d = 30;
var c = Math.floor($('.w').outerWidth() / 284 + 1);
var r = Math.ceil($('.w').outerHeight() / 284) + 1;
var vc = c * r;
for (i = 0; i < vc; i++) {
var l = {
x: Math.floor(i % c) * 284,
y: Math.floor(i / c) * 284
};
this.p.push(l);
}
var m = m || {};
m.Grid = function() {
this.elms = [];
this.init();
}, m.Grid.prototype = {
init: function() {
this.createTiles();
},
animateTile: function() {
var e = this;
for (i = 0; i < e.elms.length; i++) {
console.log(i);
e.elms[i].update();
}
requestAnimationFrame($.proxy(this.animateTile, this));
},
createTiles: function() {
var c = this;
for (i = 0; i < $('.box').length; i++) {
c.elms.push(new m.tile($('.box:eq(' + i + ')'), i));
}
c.animateTile();
}
}, m.tile = function(e, i, pt) {
this.el = e;
this.i = i;
var p = t.p;
this.elX = Math.floor(i % 4) * 284,
this.elY = Math.floor(i / 4) * 284,
this.p1 = p[i + Math.floor(i / 4)],
this.p2 = p[i + Math.floor(i / 4) + 1],
this.p3 = p[i + Math.floor(i / 4) + 6]
this.p4 = p[i + Math.floor(i / 4) + 5];
this.init();
}, m.tile.prototype = {
init: function() {
this.initEvents();
},
initEvents: function() {
var e = this;
var pts = t.p;
var p1 = pts[e.i + Math.floor(i / 4)],
p2 = pts[e.i + Math.floor(i / 4) + 1],
p3 = pts[e.i + Math.floor(i / 4) + 6],
p4 = pts[e.i + Math.floor(i / 4) + 5];
$(e.el).hover(function() {
TweenMax.killTweensOf(p1),
TweenMax.killTweensOf(p2),
TweenMax.killTweensOf(p3),
TweenMax.killTweensOf(p4),
TweenMax.to(p1, .3, {
x: p1.x - d,
y: p1.y - d,
ease: Back.easeOut
}),
TweenMax.to(p2, .3, {
x: p2.x + d,
y: p2.y - d,
ease: Back.easeOut
}),
TweenMax.to(p3, .3, {
x: p3.x + d,
y: p3.y + d,
ease: Back.easeOut
}),
TweenMax.to(p4, .3, {
x: p4.x - d,
y: p4.y + d,
ease: Back.easeOut
}),
TweenMax.to(e.el, .3, {
zIndex: 10,
ease: Back.easeOut
});
}, function() {
TweenMax.killTweensOf(p1),
TweenMax.killTweensOf(p2),
TweenMax.killTweensOf(p3),
TweenMax.killTweensOf(p4);
TweenMax.to(p1, .7, {
x: p1.x + d,
y: p1.y + d,
ease: Back.easeOut
}),
TweenMax.to(p2, .7, {
x: p2.x - d,
y: p2.y + d,
ease: Back.easeOut
}),
TweenMax.to(p3, .7, {
x: p3.x - d,
y: p3.y - d,
ease: Back.easeOut
}),
TweenMax.to(p4, .7, {
x: p4.x + d,
y: p4.y - d,
ease: Back.easeOut
}),
TweenMax.to(e.el, .7, {
zIndex: 0,
ease: Back.easeOut
});
});
},
update: function() {
var e = this;
var pts = t.p;
var p1 = pts[e.i + Math.floor(i / 4)],
p2 = pts[e.i + Math.floor(i / 4) + 1],
p3 = pts[e.i + Math.floor(i / 4) + 6],
p4 = pts[e.i + Math.floor(i / 4) + 5];
BLEND.TransformElement(
{
el: e.el[0],
src: [{x: 0, y: 0}, {x: w, y: 0}, {x: w, y: h}, {x: 0, y: h}],
dest: [
{x: p1.x - e.elX,
y: p1.y - e.elY},
{x: p2.x - e.elX,
y: p2.y - e.elY},
{x: p3.x - e.elX,
y: p3.y - e.elY},
{x: p4.x - e.elX,
y: p4.y - e.elY},
]
});
}
};
t.grid = new m.Grid();
};
generateGrid(284, 284);
BLEND.TransformElement（el，src，dest）在我的代码中给出了CSS3D矩阵，它的工作正常。我需要正确更新顶点。
BLEND.TransformElement(el,src,dest) in my code gives CSS3D matrix, it's working fine. I need to update vertices properly.
这是我的html和CSS：
Here is my html and CSS:
<style>
.box{
float: left;
background: #2b5349;
transform-origin: 0px 0px;
}
</style>
<div class="w" style=" margin-bottom:190px;display:inline-block;width: calc(284px * 4); margin:100px auto;">
<div class="box" style="background: red"></div>
<div class="box" style="background: #2b5349"></div>
<div class="box" style="background: green"></div>
<div class="box" style="background: blue"></div>
<div class="box" style="background: darkgoldenrod"></div>
<div class="box" style="background: fuchsia"></div>
<div class="box" style="background: lightpink"></div>
<div class="box" style="background: mediumspringgreen"></div>
<div class="box" style="background: burlywood"></div>
<div class="box" style="background: orange"></div>
<div class="box" style="background: gold"></div>
<div class="box" ></div>
</div>
我从头开始做所有这一切，而不使用任何外部插件的特定效果。请建议一些解决方案。
I am doing all this this from start without using any external plugin for that particular effect. Please suggest some solution.
我已经存储所有磁贴的所有顶点，并在鼠标悬停时更新它。只要我从一个瓦片到另一个动画，将顶点值从新的重置到原始停止。
I have stored all the vertices of all tiles and updating it on mouseover. as soon as I mouseover from one tile to another animation for resetting vertices values from new one to original stops. How can I fix vertices update problem on mouseenter and mouseleave envent.
推荐答案
我解决了这个问题。问题是没有更新顶点值到原来的mouseout事件。要将顶点值还原为原始问题，我必须保留这样的顶点的额外值。
I Solved the problem. Problem was with not updating vertices value to the original on mouseout event. to revert vertices value to original question i have to keep extra value of vertices like this.
var l = {
x: Math.floor(i % c) * 284,
y: Math.floor(i / c) * 284,
x2: Math.floor(i % c) * 284,
y2: Math.floor(i / c) * 284,
};
在鼠标悬停时，为每个坐标改变这样的顶点值
On mouseover change the vertice value like this for every coordinate
TweenMax.to(p1, .3, {
x: p1.x2 + d,
y: p1.y2 - d,
ease: Back.easeOut
})
并在mouseout重置原始位置
and on mouseout reset original position
TweenMax.to(p2, .3, {
x: p2.x,
y: p2.y,
ease: Back.easeOut
})
这篇关于MouseOver使用javascript的CSS3D效果的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
