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

闲着无聊，看到百度图片悬停时提示框的效果，想试试能不能实现。

百度图片悬停效果：

要求：

1.当鼠标从图片顶部移入时，提示框从顶部移至正常位置。从上部移出时，提示框从正常位置移到上部。

2.当鼠标从图片左侧移动进来时，提示框从左侧移动到正常位置。从左侧移出时，提示框从正常位置向左移动

3.当鼠标从图片的右边移动进来时，提示框从右边移动到正常位置。从右侧移出时，提示框从正常位置向右移动

4.当鼠标从图片下部移入时，提示框从下部移至正常位置。从下部移出时，提示框从正常位置移至下部

效果图首先实现了：

实施原则：

1.把图片想象成一个长方形，把长方形对角分成四个部分，分别对应上、下、左、右四个部分。

2.获取鼠标移动到div后的坐标，并获取div与浏览器顶部和左侧部分的距离，那么就可以知道鼠标在div中移动的坐标。

3.以div的左上角为原点，水平、垂直做坐标轴。

4.计算移动点和X轴之间的夹角和。然后和角度比较，最后判断它在哪个范围内。

如图所示：

描述：

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.超文本标记语言

div class=' box ' img src=' http : UPI mg/comm . png '/div class=' innerBox ' div class=' inner '/div/div/div说明：Box是图片的列表，inner Box是提示框的框，inner是提示框的内容，inner也需要设置绝对定位，因为只有这样才能置顶。其实相当于给人一种提示框innerBox在动的错觉，但是提示框里面的内容其实在动。

2.钢性铸铁

* { padding:0margin : 0；}.box { width: 300pxheight: 300px背景skyblue向左浮动：相对位置：飞越：隐藏；margin:10px 10px 0 0}.innerBox{ position:绝对值；bottom : 0；left : 0；宽度： 100%；高度： 40px；} img { width : 100%；}.内部{ position:绝对值；top:40pxleft : 0；宽度： 100%；高度： 40px；背景：红色；}3.射流研究…

$('.方框')。悬停（函数(e){ getIn($(this，e)}，函数(e){ getOut($(this，e)})//获取在第几区域函数getdirection(obj，e){ var bleft=obj.offset().向左；//距离左部的大小var btop=obj.offset().顶部；//距离顶部的大小var Li _ w=obj。宽度()；//每个图片的宽度var Li _ h=obj。高度()；//每个图片的高度var evt=e | | window.eventvar x=evt。PageX-bleft；//鼠标在该图片中的x坐标var y=evt。pagey-btop；//鼠标在该图片中的y坐标x=数学。ABS(x)；//这里是防止移出的时候，x的值为负(bleft的值大于y=数学。ABS(y)；//与上同理if(xli _ w){ x=Li _ w-(x-Li _ w)；//这里是防止在第四部分移出的时候，pageX的值大于图片的长度，所以需要用到长度减去多余的部分就是在第四区域的对称位置} var Alltan=Math。阿坦(里高/里低)；//这是var LeftTan=数学。atan(y/x)；//这是var右tan=数学。atan(y/(Li _ w-x))；//这是if(0=左tan左tan=全tan 0=右tan右tan=全tan){ console。日志('在第一部分)返回1;} else if(Alltan=leftanleftan=Math。asin(1)0=右tan右tan=Alltan){控制台。日志('在第二部分');返回2;} else if(Alltan=left tan left tan=math。asin(1)Alltan=右tan右tan=数学。asin(1)){控制台。日志('在第三部分');返回3;} else if(0=leftTanleftTan=all tanalltan=right tanrighttan=math。asin(1)){控制台。日志('在第四部分');返回4;}}//移入函数getIn(obj，e){ var statu=getdirection(obj，e)；var Li _ w=obj。宽度()；那=obj.find(.inner’)；var child _ h=该。高度()；如果(状态===1){那。CSS({ ' left ' :0，' top':-child_h }).停止()。动画({ 'top':0 }，200)} else if(status===2){ that。CSS({ '左' :-Li _ w，'顶' :0 }).停止()。动画({ 'left':0 }，200)} else if(status===3){ that。停止().动画({ 'top':0 }，200)} else if(status===4){ that。CSS({ '左' : Li _ w，'顶' :0 }).停止()。动画({ 'left':0 }，200) }}//移出函数getOut(obj，e){ var statu=getdirection(obj，e)；var Li _ w=obj。宽度()；那=obj.find(.inner’)；var child _ h=该。高度()；如果(状态===1){那。停止().animate({ 'top':-child_h }，200，function(){ $(this).css({ 'left':0，' top ' : child _ h })})else if(status===2){ that。停止().animate({ 'left':-li_w }，200，function(){ $(this).css({ 'left':0，' top ' : child _ h })})else if(status===3){ that。停止().动画({ 'top':child_h }，200)} else if(status===4){ that。停止().animate({ 'left':li_w }，200，function(){ $(this).css({ 'left':0，' top':child_h }) }) }}说明：Math.asin(1)表示90度的反正弦值，由于tan90不存在，所以换成sin90了。

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

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