jquery+css3实现熊猫tv导航代码分享


Posted in jQuery onFebruary 12, 2018

jquery+css3实现熊猫tv导航代码分享

实现原理

请看以下源代码

<div class="ph-nav" data-pdt-block="pheader-n">
      <div class="ph-nav_shadow" style="left: 0px; width: 62px;"></div>
      <ul>
        <li class="ph-nav_item ph-nav_item--current">
          <a href="/" rel="external nofollow" >
          首页
          
          </a>
        </li>
        <li class="ph-nav_item">
          <a href="/all" rel="external nofollow" >
          全部
          </a>
        </li>
        ...
      </ul>
</div>

绿色的框对应的代码是class为ph-nav_shadow的div。

通过jquery来改变遮罩层(.ph-nav_shadow)的left与width值,css3加上动画效果实现绿色框的动画。

通话jquery对li标签类的添加与删除实现文字颜色的变化。(.ph-nav_item--current)。

具体实现

编写html代码

<header>
    <div class="w">
      <div class="header_logo l"><img src="img/logo.png" alt=""></div>
      <div class="header_nav r">
         <div class="header_nav_shadow"></div>
         <ul>
           <li class="header_nav_li-hover"><a href="">首页</a></li>
           <li><a href="">智能家居</a></li>
           <li><a href="">案例展示</a></li>
           <li><a href="">致创能源</a></li>
           <li><a href="">答疑解惑</a></li>
           <li><a href="">合作加盟</a></li>    
        </ul>
      </div>
    </div> 
  </header>

编写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<li.index();i++){
    left+=$(".header_nav ul li:eq("+i+")").width();
  }
  var change=[left,li.width()];
  return change;
}
jQuery 相关文章推荐
JQuery实现定时刷新功能代码
May 09 jQuery
jQuery实现点击关注和取消功能
Jul 03 jQuery
jquery手机触屏滑动拼音字母城市选择器的实例代码
Dec 11 jQuery
jQuery中each方法的使用详解
Mar 18 jQuery
jQuery实现table表格checkbox全选的方法分析
Jul 04 jQuery
解决jquery的ajax调取后端数据成功却渲染失败的问题
Aug 08 jQuery
jQuery选择器之基本过滤选择器用法实例分析
Feb 19 jQuery
jQuery添加新内容的四个常用方法分析【append,prepend,after,before】
Mar 19 jQuery
jquery实现动态改变css样式的方法分析
May 27 jQuery
jQuery子选择器与可见性选择器实例分析
Jun 28 jQuery
JavaScript实现的滚动公告特效【基于jQuery】
Jul 10 jQuery
jquery css实现流程进度条
Mar 26 jQuery
jQuery实现定时隐藏对话框的方法分析
Feb 12 #jQuery
JS/jQuery实现DIV延时几秒后消失或显示的方法
Feb 12 #jQuery
集成vue到jquery/bootstrap项目的方法
Feb 10 #jQuery
jQuery实现的简单图片轮播效果完整示例
Feb 08 #jQuery
jQuery 防止相同的事件快速重复触发方法
Feb 08 #jQuery
jQuery实现动态显示select下拉列表数据的方法
Feb 05 #jQuery
jQuery Dom元素操作技巧
Feb 04 #jQuery
You might like
2020最新CPU的性能排名
2020/04/02 数码科技
PHPMailer 中文使用说明小结
2010/01/22 PHP
浅析PHP程序防止ddos,dns,集群服务器攻击的解决办法
2013/06/18 PHP
CURL状态码列表(详细)
2013/06/27 PHP
PHP数据库万能引擎类adodb配置使用以及实例集锦
2014/06/12 PHP
PHP+jQuery 注册模块开发详解
2014/10/14 PHP
php获取系统变量方法小结
2015/05/29 PHP
jquery中常用的SET和GET
2009/01/13 Javascript
Ext 表单布局实例代码
2009/04/30 Javascript
JavaScript中函数声明优先于变量声明的实例分析
2012/03/01 Javascript
jQuery操作元素css样式的三种方法
2014/06/04 Javascript
浅谈javascript中for in 和 for each in的区别
2015/04/23 Javascript
AngularJS基础学习笔记之指令
2015/05/10 Javascript
jQuery中ajax的load()与post()方法实例详解
2016/01/05 Javascript
微信小程序 MD5加密登录密码详解及实例代码
2017/01/12 Javascript
详解Vue学习笔记进阶篇之列表过渡及其他
2017/07/17 Javascript
安装vue-cli报错 -4058 的解决方法
2017/10/19 Javascript
vue 插值 v-once,v-text, v-html详解
2018/01/19 Javascript
Vue.js 2.0和Cordova开发webApp环境搭建方法
2018/02/26 Javascript
jQuery实现导航样式布局操作示例【可自定义样式布局】
2018/07/24 jQuery
jQuery实现鼠标移入移出事件切换功能示例
2018/09/06 jQuery
深入理解NumPy简明教程---数组1
2016/12/17 Python
Python爬虫文件下载图文教程
2018/12/23 Python
在Pandas中处理NaN值的方法
2019/06/25 Python
Python+OpenCV+pyQt5录制双目摄像头视频的实例
2019/06/28 Python
使用Numpy对特征中的异常值进行替换及条件替换方式
2020/06/08 Python
意大利在线大学图书馆:Libreria universitaria
2019/07/16 全球购物
小学美术教学反思
2014/02/01 职场文书
大学生个人求职口试自我评价
2014/02/16 职场文书
国际经济与贸易专业求职信
2014/07/10 职场文书
2014审计局领导班子民主生活会对照检查材料思想汇报
2014/09/20 职场文书
软件研发工程师岗位职责
2014/09/30 职场文书
个人查摆问题整改措施
2014/10/04 职场文书
安全承诺书
2015/01/19 职场文书
技术员岗位职责
2015/02/04 职场文书
公文写作:工伤事故分析报告怎么写?
2019/11/05 职场文书