jQuery实战_360导航效果（节点操作练习）

╰+攻爆jí腚メ 2022-05-22 12:41 176阅读 0赞

模仿360导航栏，我们要做的效果：  
![这里写图片描述][70]  
鼠标移上去的时候，会显示出一个”百度一下，你就知道”的提示框。  
可以直接写在原html中，为了练习jQuery的节点操作，我们动态生成。  
  
**HTML结构：**

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
                    })
                })

**效果图：**  
![这里写图片描述][70 1]  
移上去的时候：  
![这里写图片描述][70 2]  
  
**注意点：**  
  在使用链式链接后，当用了children(‘div’)，那么后面的操作都是对div操作，如果想回到对父元素的操作，必须用parent()，回到对父元素操作事件

[70]: /images/20220522/0cc75b3943074543bd3f58f0fce6eccc.png
[70 1]: /images/20220522/4b5bcb88c48744058e461be30c646824.png
[70 2]: /images/20220522/760b2aca405c454e9608b4913eea2783.png