jQuery仿百度新闻标签云关键词模板代码

文
章
目
录

jQuery仿百度新闻标签云关键词模板代码是一款带动画特效的仿百度新闻热搜新闻关键词标签云，本代码模板效果很棒，蓝色大气简洁，鼠标滑过关键词有动画效果。

效果

核心代码

<div id = "wrap">
    <ul>
        <li class = "liB">
            <div class = "divA"></div>
            <a href="" class = "aa">三星堆呆萌马头</a>
            <div class = "divA2"></div>
        </li>
        
        <li class = "liB">
            <div class = "divA"></div>
            <a href="">世界最长寿女性去世</a>
            <div class = "divA1"></div>
        </li>
        
        <li class = "liB">
            <div class = "divA"></div>
            <a href="">8岁女孩放歌<br>G20</a>
            <div class = "divA1"></div>
        </li>
        
        <li class = "liB">
            <div class = "divA"></div>
            <a href="">延迟退休<br>或2021年实施</a>
            <div class = "divA2"></div>
        </li>
    </ul>
</div>
<script src="jquery/jquery-2.2.4.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(document).ready(function(){
    $('.divA1').eq($(this).index()).animate({top:'0'},5)
})
            $('li').mouseenter(function(){
        $(this).css('background-color','rgb(24,68,142)')
        $('.divA').eq($(this).index()).animate({top:'0'},300)
        $('.divA').eq($(this).index()).animate({top:'100%'},150)
        $('.divA1').eq($(this).index()).animate({top:'100%'},150)
        $(this).find('.divA2').animate({top:'100%'},300)
    })
    $('li').mouseleave(function(){
        $('.divA1').eq($(this).index()).animate({top:'0'},150)
        $('.divA').eq($(this).index()).animate({top:'-100%'},10)
        $(this).find('.divA2').animate({top:'0'},150)
        $(this).css('background','rgb(40,100,187)')
    })

</script>