News Contents
信息中心

jQuery动态下划线导航

发表日期:2019/1/10      浏览次数:

效果图示:


20180610172411700.gif


代码如下:


<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>jQuery动画导航</title>

    <style>

/*start nav*/

.nav{ position:relative;margin: 100px auto; width:960px;}

.nav a{padding:10px 20px;text-decoration: none;color:#666;}

.nav .active, .nav .active:hover{color:#f33;}

.nav .line{position:absolute;border-top:solid 2px red;width:100%; left:0;top:0;}

/*end nav*/

</style>

</head>

<body>

<!--start nav-->

<div class="nav">

<a class="active" href="#">首页</a>

<a href="#">产品</a>

<a href="#">新闻中心</a>

<a href="#">关于我们</a>

<a href="#">联系我们</a>

<div class="line"></div>

</div>

<!--end nav-->

<!--引入jQuery官方类库-->

<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>

<script>

function navLine(o, bo){

   var x = '' + (o.position().top + o.outerHeight() - 20) + 'px';

   var y = '' + (o.position().left + 18) + 'px';

   var w = '' + (o.outerWidth() - 78) + 'px';

   var h = '2px';

   $('.nav .line').stop();

   if (bo){

       $('.nav .line').css({width:w, height:h, top:x, left:y});

   }else{

       $('.nav .line').animate({width:w, height:h, top:x, left:y});

   }

}

$(function(){

   navLine($('.nav .active'), true);

   $('.nav a').hover(function(){

       navLine($(this));

   }, function(){

       navLine($('.nav .active'));

   });

});

</script>

</body>

</html>




盛大建站承接个人、公司、企业的网站建设、网页设计、网店制作、独立商城制作、外贸网站制作,也承接同行介绍的业务,欢迎联系!
本站承接主要业务如下:
1、提供免备案虚拟主机(网站空间),有独立国内服务器、高速美国服务器、香港服务器、韩国服务器、日本服务器,>> http://www.fuanxx.com
2、网站建设:个人网店制作、企业建站、公司网站、新闻、下载等;论坛、博客网站搭建,承接外贸英文站制作
3、承接阿里巴巴、京东、淘宝、天猫等的商品数据采集
4、网站防钓鱼,可以过360、QQ、搜狗、金山、微信拦截
5、要就发IP网站限制访问系统,防止同行抄袭并保障海外客户访问不受影响,>> http://www.198ip.com
  下一篇:没有了!
十年如一日,我们专注于提供高品质 定制网站建设服务!
您的信任,我们的责任,期待与您的合作!