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实现Select下拉列表进行状态选择功能
Mar 30 jQuery
jQuery实现简单的计时器功能实例分析
Aug 29 jQuery
jQuery实现的页面遮罩层功能示例【测试可用】
Oct 14 jQuery
jquery animate动画持续运动的实例
Nov 29 jQuery
浅谈ajax在jquery中的请求和servlet中的响应
Jan 22 jQuery
jQuery实现滚动到底部时自动加载更多的方法示例
Feb 18 jQuery
jQuery length 和 size()区别总结
Apr 26 jQuery
jQuery.validate.js表单验证插件的使用代码详解
Oct 22 jQuery
JQuery 实现文件下载的常用方法分析
Oct 29 jQuery
Jquery属性的获取/设置及样式添加/删除操作技巧分析
Dec 23 jQuery
jQuery实现点击滚动到指定元素上的方法分析
Mar 19 jQuery
jQuery实现手风琴特效
Jan 11 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
php正则过滤html标签、空格、换行符的代码(附说明)
2010/10/25 PHP
Php output buffering缓存及程序缓存深入解析
2013/07/15 PHP
php格式化日期实例分析
2014/11/12 PHP
php使用ZipArchive函数实现文件的压缩与解压缩
2015/10/27 PHP
php字符集转换
2017/01/23 PHP
js获取提交的字符串的字节数
2009/02/09 Javascript
30个最好的jQuery 灯箱插件分享
2011/04/25 Javascript
jquery制作弹窗提示窗口代码分享
2014/03/02 Javascript
IE中图片的onload事件无效问题和解决方法
2014/06/06 Javascript
js简单实现点击左右运动的方法
2015/04/10 Javascript
纯javascript实现分页(两种方法)
2015/08/26 Javascript
重新理解JavaScript的六种继承方式
2017/03/24 Javascript
详解vue项目构建与实战
2017/06/27 Javascript
Vue Spa切换页面时更改标题的实例代码
2017/07/15 Javascript
微信小程序组件之srcoll-view的详解
2017/10/19 Javascript
JS实现的数组去除重复数据算法小结
2017/11/17 Javascript
基于vue cli重构多页面脚手架过程详解
2018/01/23 Javascript
npm配置国内镜像资源+淘宝镜像的方法
2018/09/07 Javascript
vue遍历生成的输入框 绑定及修改值示例
2019/10/30 Javascript
js常用方法、检查是否有特殊字符串、倒序截取字符串操作完整示例
2020/01/26 Javascript
微信小程序手动添加收货地址省市区联动
2020/05/18 Javascript
安装ElasticSearch搜索工具并配置Python驱动的方法
2015/12/22 Python
Python使用正则表达式实现文本替换的方法
2017/04/18 Python
Python错误: SyntaxError: Non-ASCII character解决办法
2017/06/08 Python
Python使用正则表达式过滤或替换HTML标签的方法详解
2017/09/25 Python
Python实现感知器模型、两层神经网络
2017/12/19 Python
PyQt5实现简单数据标注工具
2019/03/18 Python
Pandas之groupby( )用法笔记小结
2019/07/23 Python
安装2019Pycharm最新版本的教程详解
2019/10/22 Python
python主线程与子线程的结束顺序实例解析
2019/12/17 Python
使用python修改文件并立即写回到原始位置操作(inplace读写)
2020/06/28 Python
12月小学生校园广播稿
2014/02/04 职场文书
争先创优心得体会
2014/09/12 职场文书
python实现高效的遗传算法
2021/04/07 Python
SONY AN-LP1 短波有源天线放大器
2021/04/22 无线电
第四次工业革命,打工人与机器人的竞争
2022/04/21 数码科技