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将标签元素的高设为屏幕的百分比
Apr 19 jQuery
jQuery实现jQuery-form.js实现异步上传文件
Apr 28 jQuery
jquery版轮播图效果和extend扩展
Jul 18 jQuery
jquery+css实现简单的图片轮播效果
Aug 07 jQuery
jquery实现楼层滚动效果
Jan 01 jQuery
jQuery中ajax请求后台返回json数据并渲染HTML的方法
Aug 08 jQuery
jQuery AJAX 方法success()后台传来的4种数据详解
Aug 08 jQuery
JS实现点击生成UUID的方法完整实例【基于jQuery】
Jun 12 jQuery
jQuery位置选择器用法实例分析
Jun 28 jQuery
jQuery操作选中select下拉框的值代码实例
Feb 07 jQuery
jQuery zTree如何改变指定节点文本样式
Oct 16 jQuery
jquery实现加载更多&quot;转圈圈&quot;效果(示例代码)
Nov 09 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
THINKPHP+JS实现缩放图片式截图的实现
2010/03/07 PHP
使用PHP+AJAX让WordPress动态加载文章的教程
2015/12/11 PHP
PHP判断当前使用的是什么浏览器(推荐)
2019/10/27 PHP
解决PhpStorm64不能启动的问题
2020/06/20 PHP
兼容Mozilla必须知道的知识。
2007/01/09 Javascript
javascript设计模式 接口介绍
2012/07/24 Javascript
js中文逗号转英文实现
2014/02/11 Javascript
JavaScript 学习笔记之变量及其作用域
2015/01/14 Javascript
JS实现简洁、全兼容的拖动层实例
2015/05/13 Javascript
jquery常用函数与方法汇总
2015/09/01 Javascript
使用JavaScript脚本无法直接改变Asp.net中Checkbox控件的Enable属性的解决方法
2015/09/16 Javascript
Web前端开发工具——bower依赖包管理工具
2016/03/29 Javascript
js验证框架实现代码分享
2016/05/18 Javascript
JavaScript实现图片懒加载(Lazyload)
2016/11/28 Javascript
深入理解Vue-cli搭建项目后的目录结构探秘
2017/07/13 Javascript
vue实现未登录跳转到登录页面的方法
2018/07/17 Javascript
一次Webpack配置文件的分离实战记录
2018/11/30 Javascript
详解JavaScript中关于this指向的4种情况
2019/04/18 Javascript
[02:44]DOTA2英雄基础教程 魅惑魔女
2014/01/07 DOTA
Python深入学习之上下文管理器
2014/08/31 Python
用Python展示动态规则法用以解决重叠子问题的示例
2015/04/02 Python
Python函数参数类型*、**的区别
2015/04/11 Python
Python collections.defaultdict模块用法详解
2020/06/18 Python
opencv 图像滤波(均值,方框,高斯,中值)
2020/07/08 Python
Python hashlib模块的使用示例
2020/10/09 Python
python 利用Pyinstaller打包Web项目
2020/10/23 Python
css3实现一个div设置多张背景图片及background-image属性实例演示
2017/08/10 HTML / CSS
CSS+jQuery实现的在线答题功能
2015/04/25 HTML / CSS
当我正在为表建立索引的时候,SQL Server 会禁止对表的访问吗
2014/04/28 面试题
年终考核实施方案
2014/05/26 职场文书
总经理助理岗位职责范本
2014/07/20 职场文书
违纪学生保证书
2015/02/27 职场文书
单位工作证明范本
2015/06/15 职场文书
篮球赛新闻稿
2015/07/17 职场文书
英文诗歌翻译方法(赏析)
2019/08/16 职场文书
Python实现抖音热搜定时爬取功能
2022/03/16 Python