jquery+css3实现熊猫电视导航效果

时间：2023-04-05 23:44:19 HTML5

效果展示及实现原理请看下面源码。

主页All...

绿色框对应的代码是一个类为ph-nav_shadow的div。使用jquery改变遮罩层（.ph-nav_shadow）的left和width值，css3加上动画效果实现绿框动画。调用jquery增删li标签类改变文字颜色。(.ph-nav_item--current)。专门写html代码r">

主页

智能家居

案例展示

智创能源

问答

合作

写csscode.header_nav{width:592px;高度：50px；位置：相对；}.header_nav_shadow{位置：绝对;顶部：0；左：0；底部：0；宽度：72px；背景：#F29400；过渡：所有缓入缓出.3s；z-index:1;}.header_navulli{display:block;向左飘浮;溢出：隐藏；高度：50px；行高：50px；过渡：所有缓入缓出.3s；位置：相对；z-index:2;}.??header_nav_li-hovera{color:#fff;}.header_navullia{display:block;填充：020px；高度：50px；行高：50px；transition:allease-in-out.3s;}编写js代码（主要）$(document).ready(function(){$(".header_navulli").hover(function(){varchange=getLiData($(this));$(".header_nav_shadow").css('left',change[0]).width(change[1]);$(".header_navul").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_navul").children("li:first-child").addClass("header_nav_li-hover");});});//根据这个li得到需要改变长度和偏移函数getLiData(li){varleft=0;for(leti=0;i

上一篇：UnderstandingObjectsandDescriptiveFeaturesofObjects

下一篇：用CSS渐变绘制黑白背景条

jquery+css3实现熊猫电视导航效果相关文章