jQ实现百度新闻的导航条

最新推荐文章于 2022-04-10 17:04:34 发布

Alicesa

最新推荐文章于 2022-04-10 17:04:34 发布

阅读量449

点赞数 1

分类专栏：前端jQuery 文章标签： css html jquery

本文链接：https://blog.csdn.net/Alicesa/article/details/108278166

版权

前端jQuery 专栏收录该内容

26 篇文章 1 订阅

订阅专栏

代码实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>百度新闻导航</title>
    <style>
        body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, b, del, dfn, em, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, dialog, figure, footer, header, hgroup, nav, section {margin: 0;padding:0;border: 0;font-size: 100%;font: inherit;vertical-align: baseline;font: 12px arial,宋体,sans-serif;text-decoration:none;}a{}

        .navigation{
           
            position: relative;
            z-index: 1;
        }
        #blk{
            position: absolute;
            width: 10px;
            height: 60px;
            background-color: red;
            width: 10px;
            height: 38px;
            top: 0;
            left: -38px;
            z-index: 0;
        }
.navigation li{display:inline;height:100%;float:left; }
.nav1{line-height:38px;}.nav1 a{color:#fff;background-color:#ec4b37;font-family: "microsoft yahei","宋体","arial";font-size:15px;padding-left:15px;padding-right:15px;padding-top:15px;padding-bottom:10px;}
.nav{line-height:38px;}
.nav a{font-family: "microsoft yahei","宋体","arial";font-size:15px;padding-left:15px;padding-right:15px;padding-top:15px;padding-bottom:10px;}
.nav {
    
   
    color: white;
}
.navigation {
     
      background-color: cadetblue;
   }
    </style>
</head>
<body>
    <div id="box">
    <ul class="navigation"><li class="nav1"><a href="#">首页</a></li> <li class="nav"><a href="#">明星</a></li> <li class="nav"><a href="#">美女</a></li> <li class="nav"><a href="#">壁纸</a></li> <li class="nav"><a href="#">搞笑</a></li><li class="nav"><a href="#">资讯</a></li> <li class="nav"><a href="#">动漫</a></li><li class="nav"><a href="#">宠物</a></li><li class="nav"><a href="#">摄影</a></li> <li class="nav"><a href="#">设计</a></li> <li class="nav"><a href="#">旅游</a></li> <li class="nav"><a href="#">更多</a></li></ul>
    <div id="blk"></div>
</div>
</body>
<script src="dist/jquery.js"></script>
<script>
    $(function(){
        var $blk=$('#blk')
        var $li=$('#box>ul>li')
        var blkf=$blk.position().left
        $li.mouseenter(function(){
            var lt=$(this).position().left
            var lw=$(this).innerWidth();
            $blk.stop().animate({left:lt,width:lw})
        }).mouseleave(function () {
            $blk.stop().animate({left:blkf}) 
        })

    })
</script>
</html>

视图

Alicesa

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQ实现百度新闻的导航条

代码实现<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>百度新闻导航</title> <style> body, div, span
复制链接

扫一扫

专栏目录