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

最新推荐文章于 2024-02-04 17:30:00 发布

amohan

最新推荐文章于 2024-02-04 17:30:00 发布

阅读量489

点赞数

分类专栏：网站模版文章标签： javascript jquery css3

原文链接：https://yy123.ink/frontDetail/11665

版权

网站模版专栏收录该内容

3170 篇文章 31 订阅

订阅专栏

该博客介绍了如何利用jQuery结合CSS3的animation和transform属性，创建一个网格列表图片悬停时的3D翻转动画效果。当鼠标滑过图片时，图片会根据滑入方向呈现出不同的翻转效果，为用户体验增加互动性。

摘要由CSDN通过智能技术生成

下载地址

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"));