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

特效代码 潘老师 4个月前 (12-10) 91 ℃ (0) 扫码查看



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>

资源下载


版权声明:本站文章,如无说明,均为本站原创,转载请注明文章来源。如有侵权,请联系博主删除。
本文链接:https://www.panziye.com/project/tx/12361.html
喜欢 (0)
请潘老师喝杯Coffee吧!】
分享 (0)
用户头像
发表我的评论
取消评论
表情 贴图 签到 代码

Hi,您需要填写昵称和邮箱!

  • 昵称【必填】
  • 邮箱【必填】
  • 网址【可选】