jQuery实现百度图片移入移出内容提示框上下左右移动的效果


Posted in jQuery onJune 05, 2018

闲来无聊,看到百度图片hover的时候提示框的效果,遂想试一试自己能否实现。

百度图片hover的效果:

jQuery实现百度图片移入移出内容提示框上下左右移动的效果

需求:

1. 当鼠标从图片上部移入的时候,提示框从上部移到正常位置。从上部移出的时候,提示框从正常位置移到上部。

2. 当鼠标从图片左部移入的时候,提示框从左部移到正常位置。从左部移出的时候,提示框从正常位置移到左部

3. 当鼠标从图片右部移入的时候,提示框从右部移到正常位置。从右部移出的时候,提示框从正常位置移到右部

4. 当鼠标从图片下部移入的时候,提示框从下部移到正常位置。从下部移出的时候,提示框从正常位置移到下部

先上实现的效果图:

jQuery实现百度图片移入移出内容提示框上下左右移动的效果

实现原理:

1. 把图片看做一个矩形,把这个矩形,按对角线分成四份,每一份对应上下左右的部分。

2. 获取鼠标移入div之后的坐标,获取该div离浏览器顶部和左部的距离,就能知道在该div中,鼠标移入的坐标。

3. 以div左上角为原点,水平和竖直方向做坐标轴。

4. 算出移入的点与x轴的夹角 β 和 θ。再与 α 角做比较,最后判断是在哪个范围内的。

如图:

jQuery实现百度图片移入移出内容提示框上下左右移动的效果

 说明:

1) β,θ是移入的点与x轴的夹角,求这两个角与 α 的关系,才能知道到底是在哪个区域

2)已知条件:x,y,x0,y0。分别代表图片宽和高,移入的x,y坐标。

3)不管是鼠标从哪个区域移入或移出,只要求到移入的点与 x 轴的夹角的大小关系,就能正确判断。

夹角判断所在区域: 

 

当 0 < β  ≤  α,移入的点在 1 和 4 区域,

当 α < β  ≤ 90,移入的点在 2 和 3 区域,

当 0 < θ  ≤  α,移入的点在 1 和 2 区域,

当 α < θ  ≤ 90,移入的点在 3 和 4 区域,

那么,要判断在 1 区域里面的话,满足的条件就必须为:0 < β  ≤  α,0 < θ  ≤  α  以此类推。。。

原理搞清楚了,就可以上代码了。

1. html

<div class="box">
 <img src="upimg/comm.png"/>
 <div class="innerBox">
  <div class="inner"></div>
 </div>
</div>

说明:box是装图片的一个列表,innerBox是装提示框的盒子,inner是提示框的内容,inner也要设置绝对定位是因为只有这样才能设置top和left值。实际上就相当于给人错觉提示框innerBox在移动,实际上是提示框里的内容inner在移动。

2. css

*{
 padding:0;
 margin: 0;
}
.box{
 width: 300px;
 height: 300px;
 background: skyblue;
 float: left;
 position: relative;
 overflow: hidden;
 margin:10px 10px 0 0;
}
.innerBox{
 position: absolute;
 bottom: 0;
 left: 0;
 width: 100%;
 height: 40px;
}
img{
 width: 100%;
}
.inner{
 position: absolute;
 top:40px;
 left: 0;
 width: 100%;
 height: 40px;
 background: red;
}

3. js

$('.box').hover(function(e){
 getIn($(this),e)
},function(e){
 getOut($(this),e)
})
//获取在第几区域
function getdirection(obj,e){
 var bleft=obj.offset().left;//距离左部的大小
 var btop=obj.offset().top;//距离顶部的大小
 var li_w=obj.width();//每个图片的宽度
 var li_h=obj.height();//每个图片的高度
 var evt=e||window.event;
 var x=evt.pageX-bleft;//鼠标在该图片中的x坐标
 var y=evt.pageY-btop;//鼠标在该图片中的y坐标
 x=Math.abs(x);//这里是防止移出的时候,x的值为负(bleft的值大于pageX)
 y=Math.abs(y);//与上同理
 if(x>li_w){
  x=li_w-(x-li_w);//这里是防止在第四部分移出的时候,pageX的值大于图片的长度,所以需要用到长度减去多余的部分就是在第四区域的对称位置
 }
 var Alltan=Math.atan(li_h/li_w);//这是α
 var leftTan=Math.atan(y/x);//这是β
 var rightTan=Math.atan(y/(li_w-x));//这是θ
 if(0<=leftTan&&leftTan<=Alltan&&0<=rightTan&&rightTan<=Alltan){
  console.log("在第一部分")
  return 1;
 }else if(Alltan<=leftTan&&leftTan<=Math.asin(1)&&0<=rightTan&&rightTan<=Alltan){
  console.log("在第二部分");
  return 2;
 }else if(Alltan<=leftTan&&leftTan<=Math.asin(1)&&Alltan<=rightTan&&rightTan<=Math.asin(1)){
  console.log("在第三部分");
  return 3;
 }else if(0<=leftTan&&leftTan<=Alltan&&Alltan<=rightTan&&rightTan<=Math.asin(1)){
  console.log("在第四部分");
  return 4;
 }
}
//移入
function getIn(obj,e){
 var statu=getdirection(obj,e);
 var li_w=obj.width();
 var that=obj.find('.inner');
 var child_h=that.height();
 if(statu===1){
  that.css({
   "left":0,
   "top":-child_h
  }).stop().animate({
   "top":0
  },200)
 }else if(statu===2){
  that.css({
   "left":-li_w,
   "top":0
  }).stop().animate({
   "left":0
  },200)
 }else if(statu===3){
  that.stop().animate({
   "top":0
  },200)
 }else if(statu===4){
  that.css({
   "left":li_w,
   "top":0
  }).stop().animate({
   "left":0
  },200)
 }
}
//移出
function getOut(obj,e){
 var statu=getdirection(obj,e);
 var li_w=obj.width();
 var that=obj.find('.inner');
 var child_h=that.height();
 if(statu===1){
  that.stop().animate({
   "top":-child_h
  },200,function(){
   $(this).css({
    "left":0,
    "top":child_h
   })
  })
 }else if(statu===2){
  that.stop().animate({
   "left":-li_w
  },200,function(){
   $(this).css({
    "left":0,
    "top":child_h
   })
  })
 }else if(statu===3){
  that.stop().animate({
   "top":child_h
  },200)
 }else if(statu===4){
  that.stop().animate({
   "left":li_w
  },200,function(){
   $(this).css({
    "left":0,
    "top":child_h
   })
  })
 }
}

说明:Math.asin(1) 表示 90度的反正弦值,由于tan90不存在,所以换成sin90了。

总结:对比自己做的和百度的图片效果,发现百度的动画给人明显的要舒服点,估计是因为移出的时候,我直接设置css,导致动画不连贯原因,还有个就是stop()导致动画直接结束,所以还有可以修改的地方。这里只介绍一个思路

以上所述是小编给大家介绍的jQuery实现百度图片移入移出内容提示框上下左右移动的效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

jQuery 相关文章推荐
jQuery实现的手风琴侧边菜单效果
Mar 29 jQuery
详解如何在 vue 项目里正确地引用 jquery 和 jquery-ui的插件
Jun 01 jQuery
jquery拖动改变div大小
Jul 04 jQuery
jQuery 中msgTips 顶部弹窗效果实现代码
Aug 14 jQuery
jQuery Layer弹出层传值到父页面的实现代码
Aug 17 jQuery
jquery鼠标悬停导航下划线滑出效果
Sep 29 jQuery
浅谈jquery中ajax跨域提交的时候会有2次请求的问题
Nov 10 jQuery
jQuery简单实现向列表动态添加新元素的方法示例
Dec 25 jQuery
js与jQuery实现获取table中的数据并拼成json字符串操作示例
Jul 12 jQuery
jQuery实现table表格信息的展开和缩小功能示例
Jul 21 jQuery
jquery 动态遍历select 赋值的实例
Sep 12 jQuery
JS+JQuery实现无缝连接轮播图
Dec 30 jQuery
jQuery实现的简单对话框拖动功能示例
Jun 05 #jQuery
jQuery实现的滑块滑动导航效果示例
Jun 04 #jQuery
jQuery实现常见的隐藏与展示列表效果示例
Jun 04 #jQuery
jQuery实现的简单获取索引功能示例
Jun 04 #jQuery
JS与jQuery实现ListBox上移,下移,左移,右移操作功能示例
May 31 #jQuery
jQuery基于Ajax实现读取XML数据功能示例
May 31 #jQuery
jQuery实现动态加载select下拉列表项功能示例
May 31 #jQuery
You might like
浅析php header 跳转
2013/06/17 PHP
php计算两个坐标(经度,纬度)之间距离的方法
2015/04/17 PHP
配置Nginx+PHP的正确思路与过程
2016/05/10 PHP
PHP调用Mailgun发送邮件的方法
2017/05/04 PHP
redis+php实现微博(一)注册与登录功能详解
2019/09/23 PHP
JQuery判断HTML元素是否存在的两种解决方法
2013/12/26 Javascript
jquery 构造函数在表单提交过程中修改数据
2015/05/25 Javascript
JavaScript对Cookie进行读写操作实例
2015/07/25 Javascript
jQuery实现鼠标经过弹出提示信息的地图热点效果
2015/08/07 Javascript
JS实现浏览器状态栏显示时间的方法
2015/10/27 Javascript
vue-cli项目中怎么使用mock数据
2017/09/27 Javascript
Js面试算法详解
2018/04/08 Javascript
JS 实现微信扫一扫功能
2018/09/14 Javascript
js图数据结构处理 迪杰斯特拉算法代码实例
2019/09/11 Javascript
JavaScript中的null和undefined用法解析
2019/09/30 Javascript
vue+swiper实现左右滑动的测试题功能
2020/10/30 Javascript
[07:52]2014DOTA2 TI逗比武士游V社解说背后的故事
2014/07/10 DOTA
分析Python的Django框架的运行方式及处理流程
2015/04/08 Python
python使用fileinput模块实现逐行读取文件的方法
2015/04/29 Python
浅谈python多线程和队列管理shell程序
2015/08/04 Python
python实现FTP服务器服务的方法
2017/04/11 Python
Python数据可视化正态分布简单分析及实现代码
2017/12/04 Python
python http接口自动化脚本详解
2018/01/02 Python
利用python的socket发送http(s)请求方法示例
2018/05/07 Python
通过PHP与Python代码对比的语法差异详解
2019/07/10 Python
django 2.2和mysql使用的常见问题
2019/07/18 Python
python网络编程 使用UDP、TCP协议收发信息详解
2019/08/29 Python
导入tensorflow时报错:cannot import name 'abs'的解决
2019/10/10 Python
在Python中使用filter去除列表中值为假及空字符串的例子
2019/11/18 Python
仓管员岗位责任制
2014/02/19 职场文书
学校交通安全责任书
2014/08/25 职场文书
教师节学生演讲稿
2014/09/03 职场文书
史上最牛辞职信
2015/05/13 职场文书
婚礼家长致辞
2015/07/27 职场文书
python Tkinter模块使用方法详解
2022/04/07 Python
mysql 子查询的使用
2022/04/28 MySQL