jquery+css3实现熊猫tv导航效果

worldligang 发布于2019-08-26 11:43 / 1121人阅读

摘要：效果展示实现原理请看以下源代码。通过来改变遮罩层的与值，加上动画效果实现绿色框的动画。通话对标签类的添加与删除实现文字颜色的变化。

效果展示 实现原理

请看以下源代码。

绿色的框对应的代码是class为ph-nav_shadow的div。
通过jquery来改变遮罩层（.ph-nav_shadow）的left与width值，css3加上动画效果实现绿色框的动画。
通话jquery对li标签类的添加与删除实现文字颜色的变化。（.ph-nav_item--current）。

具体实现

编写html代码

编写css代码

.header_nav{
    width: 592px;
    height: 50px;
    position: relative;
}
.header_nav_shadow{
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 72px;
    background: #F29400;
    transition: all ease-in-out .3s;
    z-index: 1;
}
.header_nav ul li{
    display: block;
    float: left;
    overflow: hidden;
    height: 50px;
    line-height: 50px;
    transition: all ease-in-out .3s;
    position: relative;
    z-index: 2;
}
.header_nav_li-hover a{
    color: #fff;
}
.header_nav ul li a{
    display: block;
    padding: 0 20px;
    height: 50px;
    line-height: 50px;
    transition: all ease-in-out .3s;
}

编写js代码（主要）

$(document).ready(function() { 
    $(".header_nav ul li").hover(function() { 

        var change =  getLiData($(this));
        $(".header_nav_shadow").css("left",change[0]).width(change[1]);
        $(".header_nav ul").children("li:first-child").removeClass("header_nav_li-hover"); 
        $(this).addClass("header_nav_li-hover"); 
    }, function() { 
        $(".header_nav_shadow").css("left",0).width("72");
        $(this).removeClass("header_nav_li-hover"); 
        $(".header_nav ul").children("li:first-child").addClass("header_nav_li-hover");
    }); 
});
// 根据this li 获取需要改变的长度和偏移量
function getLiData(li){
    var left = 0;
    for(let i=0;i
这里只贴了部分代码，所有代码下载：链接：https://pan.baidu.com/s/1o9vyQDk 密码：k86z
我是新手，有不足的问题希望提出。

云服务器超融合服务器熊猫tv cdn jquery与css3 html3 css3 js jquery 导航栏tab切换效果

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/107421.html

jquery+css3实现熊猫tv导航效果

摘要：效果展示实现原理请看以下源代码。通过来改变遮罩层的与值，加上动画效果实现绿色框的动画。通话对标签类的添加与删除实现文字颜色的变化。效果展示 showImg(https://segmentfault.com/img/bV3PdP?w=612&h=65); 实现原理请看以下源代码。 ...

李增田 2019-08-30 13:56 评论0 收藏0
jquery+css3实现熊猫tv导航效果

摘要：效果展示实现原理请看以下源代码。通过来改变遮罩层的与值，加上动画效果实现绿色框的动画。通话对标签类的添加与删除实现文字颜色的变化。效果展示 showImg(https://segmentfault.com/img/bV3PdP?w=612&h=65); 实现原理请看以下源代码。 ...

LancerComet 2019-08-01 18:34 评论0 收藏0
神奇的选择器 :focus-within

摘要：的伪类选择器和伪元素选择器，让有了更为强大的功能。划重点，它或它的后代获得焦点。另外，划重点，这个伪类是仍处于实验室的方案。最后感谢耐心读完。CSS 的伪类选择器和伪元素选择器，让 CSS 有了更为强大的功能。伪类大家听的多了，伪元素可能听到的不是那么频繁，其实 CSS 对这两个是有区分的。有个错误有必要每次讲到伪类都提一下，有时你会发现伪类元素使用了两个冒号 (::) 而不是一个冒...

clasnake 2019-04-23 13:30 评论0 收藏0
前端常用插件、工具类库汇总

摘要：页面调试腾讯开发维护的代码调试发布，错误监控上报，用户问题定位。同样是由腾讯开发维护的代码调试工具，是针对移动端的调试工具。前端业务代码工具库。动画库动画库，也是目前通用的动画库。本人微信公众号：前端修炼之路，欢迎关注本篇文章整理自己使用过的和看到过的一些插件和工具，方便日后自己查找和使用。另外，感谢白小明，文中很多的工具来源于此。弹出框 layer：http://layer....

GitCafe 2019-08-23 13:57 评论0 收藏0