jquery网页定位导航特效
<!DOCTYPE html>
<html lang="en">
<head>
<script src="http://code.jquery.com/jquery-1.11.3.js"></script>
<meta charset="UTF-8">
<script src="main.js"></script>
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<div id="content">
<div id="floor1" class="item" >
<h2>1F</h2>
<ul>
<li><a href="#"><img src="data:image/1.jpg" alt="未显示"></a></li>
<li><a href="#"><img src="data:image/1.jpg" alt="未显示"></a></li>
<li><a href="#"><img src="data:image/1.jpg" alt="未显示"></a></li>
<li><a href="#"><img src="data:image/1.jpg" alt="未显示"></a></li>
<li><a href="#"><img src="data:image/1.jpg" alt="未显示"></a></li>
<li><a href="#"><img src="data:image/1.jpg" alt="未显示"></a></li>
<li><a href="#"><img src="data:image/1.jpg" alt="未显示"></a></li>
<li><a href="#"><img src="data:image/1.jpg" alt="未显示"></a></li>
<li><a href="#"><img src="data:image/1.jpg" alt="未显示"></a></li>
</ul>
</div>
<div id="floor2" class="item">
<h2>2F</h2>
<ul>
<li><a href="#"><img src="data:image/2.jpg" alt="未显示"></a></li>
<li><a href="#"><img src="data:image/2.jpg" alt="未显示"></a></li>
<li><a href="#"><img src="data:image/2.jpg" alt="未显示"></a></li>
<li><a href="#"><img src="data:image/2.jpg" alt="未显示"></a></li>
<li><a href="#"><img src="data:image/2.jpg" alt="未显示"></a></li>
<li><a href="#"><img src="data:image/2.jpg" alt="未显示"></a></li>
<li><a href="#"><img src="data:image/2.jpg" alt="未显示"></a></li>
<li><a href="#"><img src="data:image/2.jpg" alt="未显示"></a></li>
<li><a href="#"><img src="data:image/2.jpg" alt="未显示"></a></li>
</ul>
</div>
<div id="floor3" class="item">
<h2>3F</h2>
<ul>
<li><a href="#"><img src="data:image/3.jpg" alt="未显示"></a></li>
<li><a href="#"><img src="data:image/3.jpg" alt="未显示"></a></li>
<li><a href="#"><img src="data:image/3.jpg" alt="未显示"></a></li>
<li><a href="#"><img src="data:image/3.jpg" alt="未显示"></a></li>
<li><a href="#"><img src="data:image/3.jpg" alt="未显示"></a></li>
<li><a href="#"><img src="data:image/3.jpg" alt="未显示"></a></li>
<li><a href="#"><img src="data:image/3.jpg" alt="未显示"></a></li>
<li><a href="#"><img src="data:image/3.jpg" alt="未显示"></a></li>
<li><a href="#"><img src="data:image/3.jpg" alt="未显示"></a></li>
</ul>
</div>
<div id="floor4" class="item">
<h2>4F</h2>
<ul>
<li><a href="#"><img src="data:image/4.jpg" alt="未显示"></a></li>
<li><a href="#"><img src="data:image/4.jpg" alt="未显示"></a></li>
<li><a href="#"><img src="data:image/4.jpg" alt="未显示"></a></li>
<li><a href="#"><img src="data:image/4.jpg" alt="未显示"></a></li>
<li><a href="#"><img src="data:image/4.jpg" alt="未显示"></a></li>
<li><a href="#"><img src="data:image/4.jpg" alt="未显示"></a></li>
<li><a href="#"><img src="data:image/4.jpg" alt="未显示"></a></li>
<li><a href="#"><img src="data:image/4.jpg" alt="未显示"></a></li>
<li><a href="#"><img src="data:image/4.jpg" alt="未显示"></a></li>
</ul>
</div>
<div id="floor5" class="item">
<h2>5F</h2>
<ul>
<li><a href="#"><img src="data:image/5.jpg" alt="未显示"></a></li>
<li><a href="#"><img src="data:image/5.jpg" alt="未显示"></a></li>
<li><a href="#"><img src="data:image/5.jpg" alt="未显示"></a></li>
<li><a href="#"><img src="data:image/5.jpg" alt="未显示"></a></li>
<li><a href="#"><img src="data:image/5.jpg" alt="未显示"></a></li>
<li><a href="#"><img src="data:image/5.jpg" alt="未显示"></a></li>
<li><a href="#"><img src="data:image/5.jpg" alt="未显示"></a></li>
<li><a href="#"><img src="data:image/5.jpg" alt="未显示"></a></li>
<li><a href="#"><img src="data:image/5.jpg" alt="未显示"></a></li>
</ul>
</div>
</div>
<div id="fixed-tool">
<ul>
<li><a href="#floor1" class='current'>淘宝汇吃</a></li>
<li><a href="#floor2">极有加</a></li>
<li><a href="#floor3">格调</a></li>
<li><a href="#floor4">中国质造</a></li>
<li><a href="#floor5">亲宝贝</a></li>
</ul> </div>
</body>
</html>
<!-- 锚点实现的快速定位: 通过a里面+#每层的id名字-->
* {
margin:;
padding: 0
}
body {
font: normal 12/24px '宋体' arial;
}
.item {
width: 364px;
height: 382px;
border: 1px solid #bfbfbf;
margin-bottom: 20px;
position: relative;
left: 50%;
margin-left: -200px;
}
.item h2 {
width: 364px;
font-size: 16px;
font-weight: bold;
background: blue;
text-align: center;
}
/*#item ul{margin-left: 17px;margin-top: 20px;}*/
.item ul li {
list-style: none;
float: left;
border: 1px solid #ccc;
height: 120px;
}
.item ul li img {
width: 120px;
height: 120px;
}
#fixed-tool {
position: fixed;
left: 50%;
margin-left: 300px;
top: 100px;
}
#fixed-tool li{
list-style: none;
}
#fixed-tool li a {
padding:;
display: block;
text-decoration: none;
border-bottom: 1px dotted #ccc;
text-align: center;
width: 40px;
height: 40px;
color: #f93;
}
.current{
background: blue;
}
/*当margin:0 auto时，margin:left top right 之类的实效
居中显示left:50%;width: 400px;margin-left:-200px;
发现有多个a占据着120x16的高度，通过设置#item ul li高度使其直接占据。
margin:0 auto实效的原因
1.要给居中的元素一个宽度，否者无效。
2.该元素一定不能浮动，否者无效。*/
$(function() {
// $('.fixed-tool ul li a').each(function() {
// $(this).bind('click', function() {
// var $li = $(this).parent();
// $li.addClass('current').siblings().removeClass('current');
// });
// });
$(window).scroll(function() {
var top = $(document).scrollTop(); //屏幕滚动的距离
// console.log(top);
var $item = $('#content').find('.item'); //找到了div
var $menu = $('#fixed-tool'); //找到了工具条
var currentId = ''; //当前所在楼层的Id
$item.each(function() {
var m = $(this); //每个楼层所在的对象
var itemTop = m.offset().top;//为每个楼层的高度
//获取偏移 有左右
// console.log(m.offset().top);
if (top > itemTop-20) {//这里就解决了临界的问题
currentId = '#' + m.attr('id');//如果大于当前楼层的高度，就把当前楼层的高度赋给currentId
} else {
return false;
//如果已经找到了2,345就不用走了，直接跳出循环，提高效率
}
});
var currentLink=$menu.find('.current');
//如果top很低，则为空，后面的如果刚好为currentId时，就不需要取消
if(currentId&¤tLink.attr('href')!=currentId){
//1是当高度还很低，没达到时，使currentId为空,2是当前的current所对应的a的href属性不为本身时，
currentLink.removeClass('current');//去掉不正确的样式
$menu.find('[href="'+currentId+'"]').addClass('current');//找到正确的链接，加上样式
}
});
// 滚动监听
});
// /jquery通过id获取到的效率比class高/
// 思路是当滚动的距离大于一个楼层的高度时，换到下一个楼层
//这里不需要添加点击事件的原因是，有锚点了。通过锚点的快速定位。
jquery网页定位导航特效的更多相关文章
- [Jquery]网页定位导航特效
描述:左右联动的导航,非常适合展示页面内容多,区块划分又很明显的,点击右边固定导航项时,左边的内容跟着切换.滑动滚动条的时候,右边的导航也随着左边的展示而进行高亮切换. 思路:比较滚动距离和楼层距离( ...
- JQuery和原生JavaScript实现网页定位导航特效
慕课网的一个小课程,练习了一遍,不足之处,欢迎指正(照片在本地,大家可以着重看代码哈): <!DOCTYPE html> <html lang="en"> ...
- jQuery实现网页定位导航
代码: <!doctype html> <html> <head> <meta charset="UTF-8"> <title ...
- 慕课网中网页定位导航中js相关问题总结
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title> ...
- jQuery Tocify 定位导航
Tocify是一个jQuery插件,能够动态的生成文章目录,Tocify可以随意的设置Twitter Bootstrap 或者 jQueryUI Themeroller支持的可选动画和jQuery的显 ...
- jQuery实现电梯导航特效
功能描述: 当滚动条滑到某个位置时,显示电梯导航: 当用户滚动滚动条时,让电梯导航的选中状态和当前滚动到的区域保持一致: 当用户点击电梯导航时,滚动条滚动到被点击导航对应的区域 准备工作: 首先将jQ ...
- JavaScript定位导航滚动2
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- 20款jquery下拉导航菜单特效代码分享
20款jquery下拉导航菜单特效代码分享 jquery仿京东商城左侧分类导航下拉菜单代码 jQuery企业网站下拉导航菜单代码 jQuery css3黑色的多级导航菜单下拉列表代码 jquery响应 ...
- 纯CSS + 媒体查询实现网页导航特效
纯css+媒体查询实现网页导航特效 附上效果图: 代码如下,复制即可使用: <!DOCTYPE html> <html lang="en"> <hea ...
随机推荐
- git+可视化工具+github/码云
git (实际上git和TortoiseGIT是一回事,只是TortoiseGIT把git命令行功能做了一个可视化处理,所以下面git和TortoiseGIT实现功能是一样的) 1.如何使用Git上传 ...
- 带头结点的双向循环链表----------C语言
/***************************************************** Author:Simon_Kly Version:0.1 Date: 20170520 D ...
- Django+paramiko实现webshell
说明 基于 python3.7 + django 2.2.3 实现的 django-webshell,支持颜色显示,支持 tab 命令补全,项目地址:https://github.com/leffss ...
- 作用域 {}代码块 const修饰符 引用
简单分为:全局作用域.局部作用域.语句作用域 如果希望在局部变量的作用域内使用同名的全局变量,可以在该变量前加上“::” ::aver=20 #include<iostream> usin ...
- PAT_A1117#Eddington Number
Source: PAT A1117 Eddington Number (25 分) Description: British astronomer Eddington liked to ride a ...
- Kibana < 6.6.1 代码执行漏洞复现CVE-2019-7609
登陆kibana poc .es(*).props(label.__proto__.env.AAAA='require("child_process").exec("ba ...
- 配置Keepalived单实例实现单IP自动漂移接管
实验要求 ==> 实现Keepalived高可用对之间的故障切换过程,配置的vrrp实例的VIP为192.168.10.66,可以将其配置在网卡别名上. 实验环境 ==> CentOS 7 ...
- Oracle中NEXTVAL 和 CURRVAL的使用
能够通过在 SQL 语句中使用 NEXTVAL 或 CURRVAL 运算符来訪问序列的值.必须用以 sequence.NEXTVAL 或sequence.CURRVAL 格式驻留在同一个数据库中的序列 ...
- Xcode使用篇-重新安装Xcode
卸载Xcode sudo rm -rf /Applications/Xcode.app sudo rm -rf /Library/Preferences/com.apple.dt.Xcode.plis ...
- 富文本编辑器 CKeditor 配置使用+上传图片
参考文献: 富文本编辑器 CKeditor 配置使用 CKEditor与CKFinder的配置(ASP.NET环境),老版本可以参考 CKEditor+CKFinder ASP版在本地电脑中的配置 ...