使用jQuery实现网页定位导航
来源:互联网 发布:淘宝礼物卖家自我分析 编辑:程序博客网 时间:2024/05/16 08:11
如今网上购物对人们来说已经是家常便饭了,越来越多的网上商城也更注重用户体验,这篇文章就以天猫这样的购物商城为例子,教你如何编写代码实现网页定位导航。由于博主资质尚浅,所以只能分享我学习的一点基础,大家多多提出建议!首先就是要实现表现和形式的分离,我们根据导航的样式设计一个导航菜单和每个部分导航条对应的商品展示,这里我只简单利用几张相同的图片来实现效果。
1.导航条的设计
这里采用class=”current”表示默认初始状态1F是选中状态,会显示高亮。此处涉及到锚点的使用,可以迅速定位到相应位置。 <li><a href="#item1" class="current">1F</a></li>
<div id="menu"> <ul> <li><a href="#item1" class="current">1F</a></li> <li><a href="#item2">2F</a></li> <li><a href="#item3">3F</a></li> <li><a href="#item4">4F</a></li> <li><a href="#item5">5F</a></li> </ul> </div>
2.不同购物楼层产品的展示,只要写了一个部分,剩下的都是类似的原理。所有的楼层都用了同样的class样式,方便CSS样式的实现。
<div id="item1" class="item">
这里使用id=”item1”而不是name=”item1”,因为HTML5取消了name的使用,统一使用id进行锚点链接的设置。
<div id="content"> <h1>定位导航的使用</h1> <div id="item1" class="item"> <h2>1F</h2> <ul> <li><a href="#"><img src="http://img.blog.csdn.net/20160716225549981" alt=""/></a></li> <li><a href="#"><img src="http://img.blog.csdn.net/20160716225549981" alt=""/></a></li> <li><a href="#"><img src="http://img.blog.csdn.net/20160716225549981" alt=""/></a></li> <li><a href="#"><img src="http://img.blog.csdn.net/20160716225549981" alt=""/></a></li> <li><a href="#"><img src="http://img.blog.csdn.net/20160716225549981" alt=""/></a></li> <li><a href="#"><img src="http://img.blog.csdn.net/20160716225549981" alt=""/></a></li> <li><a href="#"><img src="http://img.blog.csdn.net/20160716225549981" alt=""/></a></li> <li><a href="#"><img src="http://img.blog.csdn.net/20160716225549981" alt=""/></a></li> <li><a href="#"><img src="http://img.blog.csdn.net/20160716225549981" alt=""/></a></li> </ul> </div> <div id="item2" class="item"> <h2>2F</h2> <ul> <li><a href="#"><img src="http://img.blog.csdn.net/20160716225454230" alt=""/></a></li> <li><a href="#"><img src="http://img.blog.csdn.net/20160716225454230" alt=""/></a></li> <li><a href="#"><img src="http://img.blog.csdn.net/20160716225454230" alt=""/></a></li> <li><a href="#"><img src="http://img.blog.csdn.net/20160716225454230" alt=""/></a></li> <li><a href="#"><img src="http://img.blog.csdn.net/20160716225454230" alt=""/></a></li> <li><a href="#"><img src="http://img.blog.csdn.net/20160716225454230" alt=""/></a></li> <li><a href="#"><img src="http://img.blog.csdn.net/20160716225454230" alt=""/></a></li> <li><a href="#"><img src="http://img.blog.csdn.net/20160716225454230" alt=""/></a></li> <li><a href="#"><img src="http://img.blog.csdn.net/20160716225454230" alt=""/></a></li> </ul> </div> <div id="item3" class="item"> <h2>3F</h2> <ul> <li><a href="#"><img src="http://img.blog.csdn.net/20160716225357989" alt=""/></a></li> <li><a href="#"><img src="http://img.blog.csdn.net/20160716225357989" alt=""/></a></li> <li><a href="#"><img src="http://img.blog.csdn.net/20160716225357989" alt=""/></a></li> <li><a href="#"><img src="http://img.blog.csdn.net/20160716225357989" alt=""/></a></li> <li><a href="#"><img src="http://img.blog.csdn.net/20160716225357989" alt=""/></a></li> <li><a href="#"><img src="http://img.blog.csdn.net/20160716225357989" alt=""/></a></li> <li><a href="#"><img src="http://img.blog.csdn.net/20160716225357989" alt=""/></a></li> <li><a href="#"><img src="http://img.blog.csdn.net/20160716225357989" alt=""/></a></li> <li><a href="#"><img src="http://img.blog.csdn.net/20160716225357989" alt=""/></a></li> </ul> </div> <div id="item4" class="item"> <h2>4F</h2> <ul> <li><a href="#"><img src="http://img.blog.csdn.net/20160716225245899" alt=""/></a></li> <li><a href="#"><img src="http://img.blog.csdn.net/20160716225245899" alt=""/></a></li> <li><a href="#"><img src="http://img.blog.csdn.net/20160716225245899" alt=""/></a></li> <li><a href="#"><img src="http://img.blog.csdn.net/20160716225245899" alt=""/></a></li> <li><a href="#"><img src="http://img.blog.csdn.net/20160716225245899" alt=""/></a></li> <li><a href="#"><img src="http://img.blog.csdn.net/20160716225245899" alt=""/></a></li> <li><a href="#"><img src="http://img.blog.csdn.net/20160716225245899" alt=""/></a></li> <li><a href="#"><img src="http://img.blog.csdn.net/20160716225245899" alt=""/></a></li> <li><a href="#"><img src="http://img.blog.csdn.net/20160716225245899" alt=""/></a></li> </ul> </div> <div id="item5" class="item"> <h2>5F</h2> <ul> <li><a href="#"><img src="http://img.blog.csdn.net/20160716225033349" alt=""/></a></li> <li><a href="#"><img src="http://img.blog.csdn.net/20160716225033349" alt=""/></a></li> <li><a href="#"><img src="http://img.blog.csdn.net/20160716225033349" alt=""/></a></li> <li><a href="#"><img src="http://img.blog.csdn.net/20160716225033349" alt=""/></a></li> <li><a href="#"><img src="http://img.blog.csdn.net/20160716225033349" alt=""/></a></li> <li><a href="#"><img src="http://img.blog.csdn.net/20160716225033349" alt=""/></a></li> <li><a href="#"><img src="http://img.blog.csdn.net/20160716225033349" alt=""/></a></li> <li><a href="#"><img src="http://img.blog.csdn.net/20160716225033349" alt=""/></a></li> <li><a href="#"><img src="http://img.blog.csdn.net/20160716225033349" alt=""/></a></li> </ul> </div> </div>
接下来就是利用CSS实现页面的样式设计,这里不做详细介绍,大家可以学习CSS网页布局基础就可以理解以下代码。
<style type="text/css"> *{margin:0;padding:0;} body{font-size:12px;line-height:1.7;} li{list-style:none;} #content{ width:800px;margin:0 auto;padding:20px; } #content h1{ color:#08b; } #content .item{ padding:20px;margin-bottom:20px;border:1px dotted #08b; } #content .item h2{ font-size:16px;font-weight: bold;border-bottom:2px solid #086;margin-bottom:10px; } #content .item li{display:inline;margin-right:10px;} #content .item li a img{ width:230px;height:230px;border:none; } #menu{ position:fixed;top:100px;left:50%;margin-left:400px;width:80px; } #menu ul li a{ display: block;margin:5px 0;font-size:14px;font-weight: bold;width:80px;height:50px;line-height:50px;text-decoration: none;color:#333;text-align: center; } #menu ul li a:hover,#menu ul li a.current{ color:#fff;background:#08b; } </style>
这里重点讲解以上代码中的一个重要精髓,满满的都是套路。
#menu{ position:fixed;top:100px;left:50%;margin-left:400px;width:80px; }
这段代码实现了导航菜单固定在右侧,left:50%;margin-left:400px;
原理是先使菜单居中,然后再根据外部content设置左边距,这里设置的400px刚好是content部分宽度的一半,所以巧妙地实现了导航菜单固定在右侧的效果。
接下来我们要使用jQuery来实现滑动滚动条时,左边栏目与导航相对应的效果。当然,首先要引入jquery.min.js。然后分别获取滚动条滚动的位置和每个楼层相对页面顶部的距离,这里用到jQuery中的两个知识点,offset()获取匹配元素的相对位移,返回包含top属性和left属性的一个对象;scrollTop(val)可以获取或者设置匹配元素相对滚动条顶部的偏移。具体实现如下:
<script> $(document).ready(function(){ $(window).scroll(function(){ var menu=$("#menu"); var items=$("#content").find(".item");/*这里也可以写成$("content .item")或者$(".item"),但相比之下效率就不那么高了,因为id是唯一的,通过id查找的效率因此就高一点*/ var top=$(document).scrollTop(); var currentId=""; items.each(function(){ var m=$(this); var itemTop=m.offset().top; if(top>itemTop-200){/*当大部分内容出现时,导航条焦点就会跳到相应位置,增强了用户体验*/ currentId="#"+m.attr("id"); } else{ return false; } }); var currentLink=menu.find(".current"); if(currentId && currentLink.attr("href")!=currentId){ currentLink.removeClass("current"); menu.find("[href='"+currentId+"']").addClass("current"); }/*这里特别注意引号的书写,刚开始我少写了一对引号,一直不成功,修改之后才成功了。不过这个引号的使用原理我还不清楚,明白的小伙伴们可以留言告诉我哟!*/ }); }); </script>
对于IE6版本的浏览器,我们要考虑兼容性问题,上面CSS设计中固定定位fixed在IE6中是不支持的,所以要使用到特殊的工具hack。
*html #menu{position:absolute;top:expression(((e=document.documentElement.scrollTop)?e:document.body.scrollTop)+100+'px');}
还要解决IE6闪烁跳变的问题,我们可以通过设置一个空图片来解决
*html,*html body{ background-image:url(about:blank); background-attachment:fixed; }
写到这里就差不多大功告成了,博主实现的知识很简陋的页面,希望大家多多包涵,有什么纰漏欢迎大家指正!
下一节,博主将分享通过原生JavaScript来实现同样的效果!
- 使用jQuery实现网页定位导航
- jquery实现网页定位导航
- jquery实现网页定位导航特效
- 使用原生JavaScript实现网页定位导航
- 使用jQuery做网页定位导航特效(下)
- jquery实现定位导航效果
- jquery左侧导航滑动网页定位效果
- 网页定位导航特效--jQuery学习
- jquery实现网页导航特效
- javascript网页定位导航的实现
- 网页定位导航特效的实现
- 20150805 (网页定位导航+瀑布流布局+信息排列)JS+JQuery+CSS3效果实现笔记
- JavaScript和jQuery实现定位导航功能
- jquery控制导航定位,浮动窗跟随网页变化
- [实例]网页定位导航
- 网页定位导航
- 网页定位导航
- 网页定位导航特效
- servlets&jsp 读书笔记第一篇
- 利用redis缓存对 list集合中的数据 进行分页操作(一)
- 深拷贝与浅拷贝区别
- git 撤销commit
- 开发常用框架
- 使用jQuery实现网页定位导航
- UVA442Matrix Chain Multiplication
- mysql 手工注入 字符类型
- JavaScript获取节点类型、节点名称和节点值
- JZOJ4632. 【SCOI2016】幸运数字
- Git 学习笔记
- DICOM:fo-dicom、dcm4che14、dcm4chee等开源库持续自我维护
- ALAssetsLibrary的使用
- iOS开源加密相册Agony的实现(六)