3D翻转效果jQuery和css3鼠标悬停图片特效代码

jQuery基于css3 animation transform属性制作网格列表图片悬停3D翻转动画效果代码。跟随鼠标滑入方向，不同翻转效果代码。核心js代码function Index(node) { this.node = node; this.init();};Index.prototype.init = function () { var self = this; this.nodes = []; Array.prototype.slice.call(self.node, 0).forEach(function (item, index) { self.nodes.push(self.update(item)); self.bindEvents(item, index); });};Index.prototype.update = function (item) { return { w: item.offsetWidth, h: item.offsetHeight, l: item.offsetLeft, t: item.offsetTop }};Index.prototype.bindEvents = function (item, index) { var self = this; $(item).on('mouseenter', function (e) { self.addClass(e, item, 'in', index); return false; }) $(item).on('mouseleave', function (e) { self.addClass(e, item, 'out', index); return false; })};Index.prototype.addClass = function (e, item, state, index) { var direction = this.getDirection(e, index); var class_suffix = ''; switch (direction) { case 0: class_suffix = '-top'; break; case 1: class_suffix = '-right'; break; case 2: class_suffix = '-bottom'; break; case 3: class_suffix = '-left'; break; } item.className = ''; item.classList.add(state + class_suffix);};Index.prototype.getDirection = function (e, index) { var w = this.nodes[index].w, h = this.nodes[index].h, x = e.pageX - this.nodes[index].l - w / 2 , y = e.pageY - this.nodes[index].t - h / 2 ; // 取到x,y两点坐标 d=(Math.round(((Math.atan2(y, x) * (180 / Math.PI)) + 180) / 90)+3) % 4; return d;//d的数值用于判断方向上下左右。};new Index($('li'));

在线演示        积分下载        6毛下载        砍两刀下载