Tôi đang cố gắng để đạt được hiệu ứng mouseOver như thế này.Hiệu ứng MouseOver CSS3D với javascript
tôi có thể tạo ra ma trận css3d cần thiết cho mỗi gạch theo vị trí của họ.
Tôi đã đạt được hiệu ứng này với chuyển động chậm của chuột, nhưng nếu tôi đang di chuyển nhanh từ một ô này sang ô xếp khác, nó sẽ không hoạt động chính xác. hiển thị khoảng cách giữa các ô. Cách tốt nhất để cập nhật tất cả các ngói/ngói phối hợp trên di chuột để tôi có được hiệu quả nhất quán là gì?
đây là mã js của tôi:
$('.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) trong mã của tôi cho ma trận CSS3D, nó làm việc tốt. Tôi cần phải cập nhật đỉnh đúng cách.
Dưới đây là html và CSS của tôi:
<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>
tôi đang làm tất cả điều này này từ đầu mà không sử dụng bất kỳ plugin bên ngoài cho rằng hiệu ứng đặc biệt. Vui lòng đề xuất một số giải pháp.
Tôi đã lưu trữ tất cả các đỉnh của tất cả các ô và cập nhật nó khi di chuột qua. ngay sau khi tôi di chuyển từ một ô này sang một hoạt ảnh khác để đặt lại các giá trị đỉnh từ giá trị mới sang điểm dừng ban đầu. Làm thế nào tôi có thể sửa chữa vấn đề cập nhật đỉnh trên mouseenter và mouseleave envent.
Tôi đã chỉnh sửa câu hỏi để chỉ định sự cố. Tôi đang sử dụng mã js ở trên để cập nhật các lát nhưng có một số vấn đề mà tôi cần trợ giúp. – Dramorian
"Bản trình diễn làm việc" của bạn không hoạt động (404 Không tìm thấy). – Oriol
@Dramorian Nếu có thể tạo [fiddle] (http://jsfiddle.net/) với mã của bạn – Aminul