jquery实现企业定位式导航效果

2024-12-23 12:26:55

本文实例为大家分享了jquery实现企业定位式导航的具体代码，供大家参考，具体内容如下

完整代码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
*{margin:0;padding:0;}
.nav{width:100%;position:absolute;top:150px;}
.nav ul{width:1200px;height:50px;margin:0 auto;background:#ccc;}
.nav ul li{width:150px;height:50px;line-height:50px;text-align:center;list-style:none;float:left;cursor:pointer;}
.nav ul li:hover{background:#666;}
.nav ul li a{color:#000;font-size:18px;text-decoration:none;}
.nav .active{background:#666;}
.cont{width:1200px;height:4500px;margin:0 auto;}
.cont ol{width:1200px;height:4500px;margin:0 auto;}
.cont ol li{width:1200px;height:500px;list-style:none;}
.cont ol li p{color:#000;font-size:48px;}
</style>
</head>
<body>
<div style="height:200px;width:100%;"></div>
<div class="nav">
  <ul>
    <li class="active">page1</li>
    <li>page2</li>
    <li>page3</li>
    <li>page4</li>
    <li>page5</li>
    <li>page6</li>
    <li>page7</li>
    <li>page8</li>
  </ul>
</div>
<div class="cont">
  <ol>
    <li style="background:#aaa"><p>page1</p></li>
    <li style="background:#999"><p>page2</p></li>
    <li style="background:#666"><p>page3</p></li>
    <li style="background:#333"><p>page4</p></li>
    <li style="background:#bbb"><p>page5</p></li>
    <li style="background:#aaa"><p>page6</p></li>
    <li style="background:#ccc"><p>page7</p></li>
    <li style="background:#000"><p>page8</p></li>
  </ol>
</div> 

<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript"> 

$(".nav ul li").click(function(){
    var index=$(this).index();
    var i=150+index*501+'px'
    $("html,body").animate({scrollTop:i},500) 

  }) 

$(window).scroll(function(){
    if($(window).scrollTop()>150){
      $(".nav").css({"position":"fixed","top":"0px"})
    }
    else{
      $(".nav").css({"position":"absolute","top":"150px"})
    } 

  for(var x=0;x<8;x++){
    var i=150+x*500
  if($(window).scrollTop()>i && $(window).scrollTop()<i+500){
    $(".nav ul li").eq(x).addClass("active").siblings().removeClass("active")}
  } 

})
</script>
</body>
</html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

jQuery仿京东商城楼梯式导航定位菜单

实现京东商城楼梯式导航定位菜单:滚动定位菜单项和点击定位菜单项! 涉及知识点:find().parent().offset().scroll()等jQ函数,请自觉复习各种函数! html代码:  <div id="menu"> <ul> <li>1F<span>服饰</span></li> <li>2F<span>美妆</span></
jQuery导航条固定定位效果实例代码

实现效果图: 向下滑动时,导航栏固定代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } img{ display: block; margin: 0 auto; } img#search
jquery实现网页定位导航

不知道大家有没有注意到有的网页由于页面信息量太大所以使用了页面定位导航来实现跳转,点击旁边的菜单的某一项页面就跳到那一项对应的内容,而且我们滚动滚动条,当滚动到某一项内容,旁边菜单对应的那一项也会高亮显示.今天我就来讲讲这样的效果是如何实现的. 先贴上显示效果: 实现: 这个的页面布局很简单,大家下去多试试就OK了,值得注意的是需要在菜单布局里的每一个li里面添加a标签并且给a标签的 href 赋上对应的id号,可以让其点击立即跳到id对应的内容然后就是jquery是如何实现的: 1.我们需
基于JQuery和原生JavaScript实现网页定位导航特效

慕课网的一个小课程,练习了一遍,不足之处,欢迎指正(照片在本地,大家可以着重看代码哈): <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>爱淘气购物网-JQuery网页定位导航特效</title> <style> /*All tag*/ html, body, div, ul, li, img
基于jQuery实现定位导航位置效果

本文实例为大家分享了Android九宫格图片展示的具体代码,供大家参考,具体内容如下当滚动条滚动到内容区域的时候,侧边导航条定位到屏幕,不再动,并且点击导航条跳转到内容所在的位置: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=d
jQuery网页定位导航特效实现方法

本文实例讲述了jQuery网页定位导航特效实现方法.分享给大家供大家参考,具体如下: 描述:左右联动的导航,非常适合展示页面内容多,区块划分又很明显的,点击右边固定导航项时,左边的内容跟着切换.滑动滚动条的时候,右边的导航也随着左边的展示而进行高亮切换. 思路:比较滚动距离和楼层距离(相对于顶部),如果滚动距离大于等于楼层距离,即进入了相应楼层,然后通过一个变量来记录该楼层的信息,最后传递给右边高亮显示 1.点击右边固定导航项时,左边的内容跟着切换. 只需将右边a的href设置为左边区块的id加
jquery实现企业定位式导航效果

本文实例为大家分享了jquery实现企业定位式导航的具体代码,供大家参考,具体内容如下完整代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style type="text/css"> *{margin:0;padding:0;} .nav{width:100%;position:absolute;top:150px;} .nav ul
jQuery实现带滚动线条导航效果的方法

本文实例讲述了jQuery实现带滚动线条导航效果的方法.分享给大家供大家参考.具体分析如下: 最早见到这种导航是在魅族的官网,当时(去年)觉得挺不错的但自己不会JavaScript,因此那时"可望而不可及".今日去手机QQ for Android官网,又发现类似这样的导航,反正自己也没啥事,所以就尝试用jQuery做出这样的效果. 效果如下: 首页说说日志相册 CSS: body,ul,li{margin:0;padding:0;} #testnav{;height:80
jquery实现的横向二级导航效果代码

本文实例讲述了jquery实现的横向二级导航效果代码.分享给大家供大家参考.具体如下: 这是一款灰色和黑色共同搭配做出的水平横向网站菜单,网页横向菜单代码,包括二级子菜单,使用了几张图片,用的朋友自己顺路径另存为吧.本菜单兼容性不错,而且设计清新.漂亮.简约,鼠标移动到主菜单上,即可下滑出二级子菜单项. 先来看看运行效果截图: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-black-bg-nav-menu-style-codes/ 具体代码如下:
jQuery动态添加.active 实现导航效果代码思路详解

代码思路: 页面4: 页面5: 代码思路: 通过jq获取你打开页面的链接 window.location.pathname: 在HTML中给自己的li加入一个ID id的命名与网址链接中的href相同通过jq包含方法找到相对应的li给他加入active类名然后..就没有然后了... jq代码: $(function () { var li = $(".title_ul").children("li"); for (var i = 0; i < li.l
jQuery实现网页顶部固定导航效果代码

本文实例讲述了jQuery实现网页顶部固定导航效果代码.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/
jQuery实现简单下拉导航效果

本文实例讲述了jQuery实现简单下拉导航效果.分享给大家供大家参考.具体如下: 这里粗略做一款基于jquery的下拉导航菜单效果,我觉得挺不错,虽然没有怎么美化,但是代码易懂,另外修补的空间也比较大,相信对学习CSS以及jquery的朋友有不小的帮助. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-xl-down-show-nav-codes/ 具体代码如下: <!DOCTYPE HTML> <html> <
jQuery超酷平面式时钟效果代码分享

本文实例讲述了jQuery超酷平面式时钟效果代码.分享给大家供大家参考.具体如下: jQuery制作的超酷平面式时钟效果,把日期和时间通过横向刻度条展现,经测试效果非常酷,是一个很不错的学习实例. 这里我们还要提到之前实现的另一个特别新颖的时间显示样式:js实现温度计时间样式,两者都完全突破了传统的时钟概念,感兴趣的各位可不要错过了哈. 运行效果图:----------------------查看效果下载源码----------------------- 小提示:浏览器中如果不能正常运行,可以
jQuery实现的滑块滑动导航效果示例

本文实例讲述了jQuery实现的滑块滑动导航效果.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>www.jb51.net jquery滑动导航</title> <style> *{margin: 0;padding: 0;box-sizing: border
jQuery实现简单的列表式导航菜单效果代码

本文实例讲述了jQuery实现简单的列表式导航菜单效果代码.分享给大家供大家参考.具体如下: 这里使用jQuery实现简单的列表式导航菜单,是根据网上的一个教程,边看边写的,经过了修正,拷贝代码即可使用.主要实现包括三个部分,一是CSS.二是引入jQuery.三是编写JS代码进行jQuery控件. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-simple-list-style-nav-menu-codes/ 具体代码如下: <h
jQuery滚动监听实现商城楼梯式导航效果

话不多说,上局部效果图: html结构,左侧定位的导航需要一个ul,中间内容,我是直接截得图片,为了效果省事,也是用的ul,最后你们要用的话也可以用ul,或者div,但是每个区域得是一个div,例如,精选的放一个div,女装的放一个div,所有的区域都套在一个大的div里面,也就是类似于ul>li的结构(只提供html结构和jQuery,样式的话根据设计稿): <div class="menu"> <ul> <li class="on&qu

jquery实现企业定位式导航效果

相关推荐

随机推荐