模仿360导航栏,我们要做的效果:
鼠标移上去的时候,会显示出一个”百度一下,你就知道”的提示框。
可以直接写在原html中,为了练习jQuery的节点操作,我们动态生成。
HTML结构:
<div class="one">
<ul>
<li><a href="#"><img src="./images/01.JPG" alt=""></a></li>
<li><a href="#"><img src="./images/02.JPG" alt=""></a></li>
<li><a href="#"><img src="./images/03.JPG" alt=""></a></li>
<li><a href="#"><img src="./images/04.JPG" alt=""></a></li>
<li><a href="#"><img src="./images/05.JPG" alt=""></a></li>
<li><a href="#"><img src="./images/06.JPG" alt=""></a></li>
<li><a href="#"><img src="./images/07.JPG" alt=""></a></li>
<li><a href="#"><img src="./images/08.JPG" alt=""></a></li>
</ul>
</div>
JS:
$(".one li")
.append('<div></div><p>百度一下,你就知道</p>')
.children('div')
.fadeTo(100, 0.5)
.next()
.each(function (index, ele) {
$(this).css({
"background-position": '1px -' + ( (index - 1) * 25 - 2) + 'px'
})
})
.parent()
.mouseenter(function(){
$(this).children('div,p').stop().animate({
'bottom': 5
});
})
.mouseleave(function(){
$(this).children('div,p').stop().animate({
'bottom': -28
})
})
效果图:
移上去的时候:
注意点:
在使用链式链接后,当用了children(‘div’),那么后面的操作都是对div操作,如果想回到对父元素的操作,必须用parent(),回到对父元素操作事件