JQuery实现电梯导航效果
本文实例为大家分享了JQuery实现电梯导航效果的具体代码，供大家参考，具体内容如下
分享一个基于JQuery实现的电梯导航效果，效果如下：
以下是代码实现：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>基于JQuery实现电梯导航特效</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
font-family: 'microsoft yahei';
}
#loutinav {
width: 35px;
position: fixed;
top: 100px;
left: 50px;
border: 1px solid #ddd;
display: none;
}
#loutinav ul li {
width: 35px;
height: 32px;
border-bottom: 1px dotted #DDDDDD;
list-style: none;
font-size: 12px;
text-align: center;
position: relative;
cursor: pointer;
padding: 10px 0;
background: #918888;
color: #fff;
}
#loutinav ul li span {
width: 35px;
height: 32px;
padding: 10px 0;
position: absolute;
top: 0;
left: 0;
}
#loutinav ul li.last {
background: #5e4a4a;
color: #fff;
border-bottom: 1px solid #ddd;
}
#loutinav ul li.active span {
background: #c00;
color: #fff;
display: block;
}
#loutinav ul li:hover span {
background: #c00;
color: #fff;
display: block;
}
#header {
width: 1000px;
height: 1000px;
background: #cc6633;
margin: 0 auto;
font-size: 50px;
line-height: 1000px;
text-align: center;
color: #000;
}
#main {
width: 1000px;
background: #66ff66;
margin: 0 auto;
}
#main .louti {
height: 600px;
width: 1000px;
font-size: 50px;
color: #fff;
font-weight: bold;
text-align: center;
line-height: 600px;
}
#footer {
width: 1000px;
height: 400px;
background: red;
margin: 0 auto;
font-size: 50px;
line-height: 400px;
text-align: center;
color: #000;
}
</style>
</head>
<body>
<div id="loutinav">
<ul>
<li class="active">
<span>享品质</span>
</li>
<li>
<span>服饰美妆</span>
</li>
<li>
<span>电脑数码</span>
</li>
<li>
<span>3C运动</span>
</li>
<li>
<span>爱吃</span>
</li>
<li>
<span>母婴居家</span>
</li>
<li>
<span>图书汽车</span>
</li>
<li>
<span>虚拟</span>
</li>
<li>
<span>还没逛够</span>
</li>
<li class="last">顶部</li>
</ul>
</div>
<div id="header">
向下滚动鼠标查看效果
</div>
<div id="main">
<div class="louti" style="background: #cc0033;">
享品质
</div>
<div class="louti" style="background: #999933;">
服饰美妆
</div>
<div class="louti" style="background: #ccff33;">
电脑数码
</div>
<div class="louti" style="background: #006633;">
3C运动
</div>
<div class="louti" style="background: #6666cc;">
爱吃
</div>
<div class="louti" style="background: #ff6600;">
母婴居家
</div>
<div class="louti" style="background: #ffff00;">
图书汽车
</div>
<div class="louti" style="background: #3333ff;">
虚拟
</div>
<div class="louti" style="background: #ff00cc;">
还没逛够
</div>
</div>
<div id="footer">
网站底部
</div>
<script src="js/jquery-1.8.3.min.js"></script>
<script>
$(function () {
$(window).on('scroll', function () {
var $scroll = $(this).scrollTop();
// 显示楼层标签
if ($scroll >= 800) {
$('#loutinav').show();
} else {
$('#loutinav').hide();
}
// 拖动滚轮，点亮对应的楼层标签
$('.louti').each(function () {
var $loutitop = $('.louti').eq($(this).index()).offset().top + 400;
// 楼层的top大于滚动条的距离
if ($loutitop > $scroll) {
$('#loutinav li').removeClass('active');
$('#loutinav li').eq($(this).index()).addClass('active');
// 中断循环
return false;
}
});
});
// 获取每个楼梯的offset().top,点击楼层让对应的内容模块移动到对应的位置
var $loutili = $('#loutinav li').not('.last');
$loutili.on('click', function () {
$(this).addClass('active').siblings('li').removeClass('active');
var $loutitop = $('.louti').eq($(this).index()).offset().top;
// 获取每个楼梯的offsetTop值
// $('html,body')兼容问题body属于chrome
$('html,body').animate({
scrollTop: $loutitop
})
});
// 回到顶部
$('.last').on('click', function () {
// $('html,body')兼容问题body属于chrome
$('html,body').animate({
scrollTop: 0
})
});
})
</script>
</body>
</html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
jQuery实现电梯导航案例详解(切换 网页区域)
目录 前言: 一:效果展示 二:实现原理剖析 2.1 网页结构: 2.2 显示隐藏函数 实现分析: 2.3 点击导航滚至对应板块 实现分析: 2.4 页面滚动导航对应选择实现分析: 2.5 互斥锁 实现分析: 三:完整代码 前言: 日常生活中用手机,电脑浏览网页时,滑到了页面下端后想返回顶部 或 跳转到页面别的版块,用鼠标滚动很麻烦,网页电梯导航 就可以很方便的精准到达目标版块. 一:效果展示 [gif 动图演示]格式转换有些不清晰请谅解!功能实现包含以下: 点击电梯导航切换到对应板块 移动光标
-
JQuery实现电梯导航特效
本文分享一个基于JQuery实现的电梯导航效果,效果如下: 以下是代码实现: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>基于JQuery实现电梯导航特效</title> <style type="text/css"> *
-
jQuery实现电梯导航模块
本文实例为大家分享了jQuery实现电梯导航模块的具体代码,供大家参考,具体内容如下 功能模块 1.当页面滚动到电器的模块, 显示电梯导航 2.点击电梯导航中的 li, 页面滚动到对应的内容区域 3.为当前点击的 li 添加 current 类 4.页面内容滚动到第几个区域, 左侧的电梯导航自动高亮对应的 li 5.为页面滚动设置节流阀(点击 li 时, 不进行第4步判断) html部分结构 <ul class="sidebar"> <li>手机模块</l
-
使用jquery库实现电梯导航效果
一般来说,一些大型的电商网站首页,页面内容很多,页面会很长,这时候大部分网站都选择使用电梯导航,使页面跳转到相应位置或者返回顶部. 下面使用jquery库来实现电梯导航 基本思路 电梯导航基本上就是使用元素距离页面头部的高度offsetTop和页面滚动的距离scrollTop来进行比较事项相应的效果. 1.页面滚动到相应的位置,实现电梯导航的显示与隐藏2.页面滚动到相应的位置,电梯导航的按钮添加或者移出相应的类3.点击电梯导航按钮,实现页面的滚动和为按钮添加或者移出相应的类4.点击顶部按钮,返回
-
JQuery实现电梯导航效果
本文实例为大家分享了JQuery实现电梯导航效果的具体代码,供大家参考,具体内容如下 分享一个基于JQuery实现的电梯导航效果,效果如下: 以下是代码实现: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>基于JQuery实现电梯导航特效</title> <styl
-
jQuery实现菜单栏导航效果
本文实例为大家分享了jQuery实现菜单栏导航效果的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> *{ padding: 0px; margin: 0px; } #top{width: auto;height: 30px;background: #eee;pos
-
jquery 实现斜导航效果
运行后刷新一下,才可以,也可以保存本地直接运行也可. jquery导航菜单 #menu1 { width:970px;height:45px;} #menu1,#menu1 a , #menu1 a span{ background-image:url(http://img.jb51.net/demo/images/daohao.gif);} #menu1 a{ display:block;float:left;height:45px;} #menu1 a span{ float:right;w
-
jQuery实现侧边导航栏及滑动电梯效果(仿淘宝)
效果图 实现代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=devi
-
jquery仿京东导航/仿淘宝商城左侧分类导航下拉菜单效果
在网站建设中,特别是做商城和产品网站,通常会用到导航弹出菜单,像是jquery写的仿京东导航菜单,一个经典的左侧多级导航菜单,学会了可以任意改变布局.京东菜单已经有不少JS前端爱好者仿写过,今天蚂蚁网络重新与大家分享一款仿京东商城的商品多级分类菜单,精简版代码 先看下jquery仿京东导航效果: 前端html代码如下: 复制代码 代码如下: <ul> <li><a href="#">baidu</a></li> <div
-
jquery鼠标悬停导航下划线滑出效果
本文实例为大家分享了jquery鼠标悬停导航下划线滑出效果的具体代码,供大家参考,具体内容如下 <!doctype html> <html> <head> <meta charset="utf-8"> <title>jquery鼠标悬停导航下划线滑出效果</title> <style> *{ margin:0; padding:0; list-style:none;} img{ border:0;} .
-
jQuery实现带滚动线条导航效果的方法
本文实例讲述了jQuery实现带滚动线条导航效果的方法.分享给大家供大家参考.具体分析如下: 最早见到这种导航是在魅族的官网,当时(去年)觉得挺不错的但自己不会JavaScript,因此那时"可望而不可及".今日去手机QQ for Android官网,又发现类似这样的导航,反正自己也没啥事,所以就尝试用jQuery做出这样的效果. 效果如下: 首页 说说 日志 相册 CSS: body,ul,li{margin:0;padding:0;} #testnav{;height:80