仿拉勾网动画效果-鼠标进入图片的方向滑动特效
来源：互联网 发布：冯大辉 知乎 匿名用户 编辑：程序博客网 时间：2024/06/05 23:03
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>用jquery判断鼠标划入方向</title> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <style> #box{ width: 100px; height: 100px; background: #dddddd; margin: 100px; } #jqbox{ position: relative; width: 100px; height: 100px; margin: 100px; overflow: hidden; } #client , #hidden{ width:100%; height:100%; background: #dddddd; position: absolute; } #client{ left:0; top:0; } #hidden{ background: #6bc30d; left:-100%; top:-100%; } </style></head><body><div id="jqbox"> <div id="client"></div> <div id="hidden"></div></div><div id="box"></div><script> var wen_direction = (function () { var jqDirection; function Direction(id) { this.id = document.getElementById(id) || id ; } Direction.prototype.init = function (enterObj, leaveObj) { //鼠标滑入元素 var self = this; this.id.addEventListener('mouseenter', function (e) { var directionNumber = self.main(e); //返回数字 返回0:上方进入， 返回1:右方进入，返回2：下方进入，返回3：左方进入 var funArray = [enterObj.top, enterObj.right, enterObj.bottom, enterObj.left]; funArray[directionNumber](self.id); },false); this.id.addEventListener('mouseleave', function (e) { var directionNumber = self.main(e); //返回数字 返回0:上方离开， 返回1:右方离开，返回2：下方离开，返回3：左方离开 var funArray = [leaveObj.top, leaveObj.right, leaveObj.bottom, leaveObj.left]; funArray[directionNumber](self.id); },false); }; /*主函数 返回数字来判断从哪个方向进入*/ Direction.prototype.main = function (e) { var w = this.id.scrollWidth; var h = this.id.scrollHeight; var x = (e.offsetX - (w / 2)) * (w > h ? (h / w) : 1); var y = (e.offsetY - (h / 2)) * (h > w ? (w / h) : 1); var number = Math.round((((Math.atan2(y, x) * (180 / Math.PI)) + 180) / 90) + 3) % 4; return number; }; /*基于jquery的事件对象*/ Direction.prototype.jqRun=function(e) { var directionNumber = this.jqMain(e); var obj = {}; switch(directionNumber) { case 0://from top obj.left = 0; obj.top = "-100%"; break; case 1://from right obj.left = "100%"; obj.top = 0; break; case 2://from bottom obj.left = 0; obj.top = "100%"; break; case 3://from left obj.left = "-100%"; obj.top = 0; break; } return obj; }; Direction.prototype.jqMain = function (e) { var w = this.id.width(); var h = this.id.height(); /*计算x和y得到一个角到elem的中心，得到相对于x和y值到div的中心*/ var x = (e.pageX - this.id.offset().left - (w / 2)) * (w > h ? (h / w) : 1); var y = (e.pageY - this.id.offset().top - (h / 2)) * (h > w ? (w / h) : 1); /** 鼠标从哪里来 / 角度 和 方向出去顺时针（得出的结果是TRBL 0 1 2 3 * 首先计算点的角度， * 再加上180度摆脱负值 * 除于90得到的象限（象限，又称象限角，意思就是一个圆之四分之一等份） * 加上3，做一个模（求模 求余数）4的象限转移到一个适当的顺时针 得出 TRBL 0 1 2 3（上/右/下/左） **/ var number = Math.round((((Math.atan2(y, x) * (180 / Math.PI)) + 180) / 90) + 3) % 4; return number; }; return { run: function (id, enterObj, leaveObj) {//这个接口用于原生js var directionChild = new Direction(id); directionChild.init(enterObj, leaveObj); }, jqRun: function(id, e){//暴露的这个接口是基于jquery的 if(!jqDirection){ jqDirection = new Direction(id); } return jqDirection.jqRun(e);//返回一个样式对象{left：string，top：string} } } })(); //测试用例 var enterObject = { left: function(self) { self.innerHTML = "从左边进入"; console.log("从左边进入"); }, right: function(self) { self.innerHTML = "从右边进入"; console.log("从右边进入"); }, top: function(self) { self.innerHTML = "从上边进入"; console.log("从上边进入"); }, bottom: function(self) { self.innerHTML = "从下边进入"; console.log("从下边进入"); } }; var leaveObject = { left: function(self) { self.innerHTML = "从左边离开"; console.log("从左边离开"); }, right: function(self) { self.innerHTML = "从右边离开"; console.log("从右边离开"); }, top: function(self) { self.innerHTML = "从上边离开"; console.log("从上边离开"); }, bottom: function(self) { self.innerHTML = "从下边离开"; console.log("从下边离开"); } }; wen_direction.run('box',enterObject, leaveObject); var jqbox = $("#jqbox"); var hidden = jqbox.children("#hidden"); jqbox.hover(function(e) { hidden.css(wen_direction.jqRun(jqbox,e)).stop(true,true).animate({left: '0', top: '0'},200); },function(e) { hidden.stop(true, true).animate(wen_direction.jqRun(jqbox,e), 200); });</script></body></html>
<!DOCTYPE html><html lang="ch"><head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css" > .ct{ height: 100px; width: 100px; border:1px red solid; position: relative; overflow: hidden; position: absolute; top:50%; left: 50%; } .hot_info{ position: absolute; background: #333; background: rgba(0,179,138,.9); filter: alpha(opacity=90); width: 100%; height: 100%; transition: all 300ms ease } </style></head><body><div class="ct" onmouseover="fun1(event);" onmouseout="fun2(event);"> <div class="hot_info" style="display: block; left: -100%; top: 0px; transition: all 300ms ease; text-align: center; color: #fff"> <h5 title="凯泰铭">MTM</h5> <em></em> <p title="车险反欺诈领导者，立足互联网车险市场"> 中国医疗管理品牌领导者 </p> </div></div><script type="text/javascript"> //当然这样绑定事件函数是不对的 var div=document.getElementsByTagName("div")[0]; var div2=document.getElementsByClassName("hot_info")[0]; function fun1(event){ var x=event.pageX-div.offsetLeft;//(得到鼠标在框中的坐标) var y=event.pageY-div.offsetTop;//(得到鼠标在框中的坐标) var H=div.clientHeight; var W=div.clientWidth; var k=Math.floor(H/W);//为了防止不能整除 if((k*x)>=y && (H-k*x)>=y){//这是判断从上方进入,这边简化处理不对等于情况做特别处理 console.log("从上方进入"); div2.style.left="0px" div2.style.top="0px" } if((k*x)<y && (H-k*x)<y){ console.log("从下方进入"); div2.style.left="0px" div2.style.top="0px" } if((k*x)<y && (H-k*x)>y){ console.log("从左边进入"); div2.style.left="0px" div2.style.top="0px" //todo } if((k*x)>y && (H-k*x)<y){ console.log("从右边进入"); div2.style.left="0px" div2.style.top="0px" } } function fun2(event){ var x=event.pageX-div.offsetLeft;//(得到鼠标在框中的坐标) var y=event.pageY-div.offsetTop;//(得到鼠标在框中的坐标) var H=div.clientHeight; var W=div.clientWidth; var k=Math.floor(H/W);//为了防止不能整除 if((k*x)>=y && (H-k*x)>=y){//这是判断从上方进入,这边简化处理不对等于情况做特别处理 console.log("从上方离开"); //div2.style.top="-100px" div2.style.left="0px" div2.style.top="-100px" } if((k*x)<y && (H-k*x)<y){ console.log("从下方离开"); div2.style.left="0px" div2.style.top="100px" } if((k*x)<y && (H-k*x)>y){ console.log("从左边离开"); div2.style.left="-100px" div2.style.top="0px" } if((k*x)>y && (H-k*x)<y){ console.log("从右边离开"); div2.style.left="100px" div2.style.top="0px" } }</script></body></html>
阅读全文
0 0
- 仿拉勾网动画效果-鼠标进入图片的方向滑动特效
- 仿拉勾网动画效果-----鼠标进入和离开元素4个方向对应的相关操作(非常炫酷)
- HTML动画滑动图片特效
- CSS3鼠标滑动动画按钮特效
- 窗口进入退出的 简单滑动动画效果
- 方向感知鼠标悬停效果动画
- JS特效：用鼠标事件实现图片的渐显效果
- flash特效原理：图片滑动放大效果
- 鼠标滑动导致图片从模糊转清晰的效果
- JS判断鼠标进入或离开容器的方向做出特殊hover效果
- javascript获取鼠标进入div的方向
- Jquery确定鼠标进入div的方向
- js判断鼠标进入容器的方向
- js判断鼠标进入容器的方向
- 如何判断鼠标进入元素的方向
- 判断鼠标进入容器的方向
- 判断鼠标进入容器的方向
- 判断鼠标进入div容器的方向
- java基础--两种简单的死循环程序
- Java遍历Map的几种方法
- 个人博客项目笔记
- 数位dp（涉及到处理前导0问题）
- rpm包管理详解(4)
- 仿拉勾网动画效果-鼠标进入图片的方向滑动特效
- Android Selector的使用
- Vue错误提示
- 单链表
- Android 技术重温系列 （10）- UI 组件
- Liquibase使用
- 分数化为埃及分数 跨度为5
- poj 3691 DAN repair
- C语言-一个简单的计算器。。。。。
