http://www.sufeinet.com/plugin.php?id=keke_group

苏飞论坛

 找回密码
 马上注册

QQ登录

只需一步,快速开始

分布式系统框架(V2.0) 轻松承载百亿数据,千万流量!讨论专区 - 源码下载 - 官方教程

HttpHelper爬虫框架(V2.7-含.netcore) HttpHelper官方出品,爬虫框架讨论区 - 源码下载 - 在线测试和代码生成

HttpHelper爬虫类(V2.0) 开源的爬虫类,支持多种模式和属性 源码 - 代码生成器 - 讨论区 - 教程- 例子

查看: 2959|回复: 0
打印 上一主题 下一主题

[Jquery] jQuery-实现滑块滑动导航效果

[复制链接]
跳转到指定楼层
楼主
发表于 2021-6-19 17:33:15 | 只看该作者 |只看大图 回帖奖励 |正序浏览 |阅读模式
    做项目遇到了一个滑块导航的效果,就动手写了一下,分享给大家参考一下,具体代码如下:
   先看下效果,具体滑动效果动手测试一下:


1.HTML 代码:
[HTML] 纯文本查看 复制代码
<div class="nav">
  <ul class="clearfix">
    <li><a href="javascript:void(0)">HTML</a></li>
    <li><a href="javascript:void(0)">CSS</a></li>
    <li><a href="javascript:void(0)">JS</a></li>
    <li><a href="javascript:void(0)">JAVA</a></li>
    <li><a href="javascript:void(0)">C#</a></li>
    <li><a href="javascript:void(0)">PHP</a></li>
    <li id="navSlide"></li>
  </ul>
</div>


2.css样式:
[CSS] 纯文本查看 复制代码
*{margin: 0;padding: 0;box-sizing: border-box;-moz-box-sizing: border-box;}
body {
  font: 16px/20px 'Microsoft yahei,微软雅黑';
  color: #AFBBBB;
}
ul {
  list-style-type: none;
}
ul li {
  float: left;
}
a {
  text-decoration: none;
  color: #AFBBBB;
}
a:hover {
  color: #ffffff;
  cursor: pointer;
}
.clearfix:before,.clearfix:after {
  content:"";
  clear: both;
  display: table;
  height: 0;
  zoom: 1;
  overflow: hidden;
}
.nav {
  width:519px;
  margin: 50px auto;
}
.nav ul {
  background: #0C83F0;
  height: 35px;
  line-height: 35px;
  position: relative;
  padding: 0 5px;
}
.nav ul li {
  position: relative;
  padding: 0 25px;
}
.nav ul li>a {
  position: relative;
  z-index: 100; /*将a元素的z-index设置比li大,这样hover效果才不会无效*/
        color: #fff;
}
   
.nav ul li:last-child {
  width: 98px;
  height: 90%;
  position: absolute;
  z-index: 50;
  left: 5px;
  bottom: 0;
  top: 0;
  margin: auto;
  background: #ddedfd;
  border-radius: 5px;
}


3.js代码:
[JavaScript] 纯文本查看 复制代码
$(function(){
    $("ul li:not(:last)").hover(function(){
      $("#navSlide").stop();  //停止正在运行的动画
      var curliWidth=$(this).outerWidth(),curleft=$(this).offset().left-$(this).parent().offset().left; //当前li的偏移量减去当前ul的偏移量就是li距离ul的距离
      // alert("curleft:"+curleft);
      $("#navSlide").animate({"width":curliWidth,"left":curleft},500);
    },function(){
      $("#navSlide").stop();
      $("#navSlide").animate({"width":98,"left": 5},200);
    });
});



以上就是滑动导航的全部代码了,如需源码,请点击》》 滑块导航.zip (29.74 KB, 下载次数: 5)




1. 开通SVIP会员,免费下载本站所有源码,不限次数据,不限时间
2. 加官方QQ群,加官方微信群获取更多资源和帮助
3. 找站长苏飞做网站、商城、CRM、小程序、App、爬虫相关、项目外包等点这里
您需要登录后才可以回帖 登录 | 马上注册

本版积分规则

QQ|手机版|小黑屋|手机版|联系我们|关于我们|广告合作|苏飞论坛 ( 豫ICP备18043678号-2)

GMT+8, 2024-11-8 15:32

© 2014-2021

快速回复 返回顶部 返回列表