网页定位导航特效_学习笔记

首页免费课网页定位导航特效笔记

网页定位导航特效

                
                姜维
            Web前端工程师

                    查看讲师更多课程 
                    姜维讲师的其他课程
                
jQuery插件——Validation Plugin
中级·65871
免费课程
                                
jQM Web App –列车时刻表
中级·38491
免费课程
                                
基于bootstrap的网页开发
中级·187669
免费课程
                                
WEB调试工具---Firebug
初级·77662
免费课程
                                
用JS实现放大镜特效
初级·30102
免费课程
                                
                难度初级
            
                时长 1小时 1分
            
                学习人数
            
综合评分9.77
                            332人评价
                        查看评价
                                9.9
                                内容实用
                            
                                9.7
                                简洁易懂
                            
                                9.7
                                逻辑清晰

最热最新

溱源 01:37

特效难点 1、css 2、scrollTo($("div").height)?

查看全部

0 采集收起来源：网页定位导航设计
2018-03-22
溱源 00:40

导航栏-特效分析

查看全部

0 采集收起来源：网页定位导航设计
2015-04-14
维C

1.zencoding插件：可简化敲代码 (1) ul>li*5>a 按tab键 (2) 按住ALT键，就可以竖向选择 2.超链接悬浮或者座位焦点时(a.current 这里的current是设置第一个为默认)文字变白给个背景色 3.定位小技巧：固定menu的位置的时候fixed完成之后 left:50% 先让要定位的元素居中显示； margin-left:400px;再根据要相对定位的元素的宽度对要定位元素进行位置偏移。

查看全部

0 采集收起来源：使用jQuery实现网页定位导航（上）
2018-03-22
chase丶Z

JS原生实现网页定位导航

查看全部

0 采集收起来源：编程练习
2015-04-13
x兔子

html5取消了name属性

查看全部

0 采集收起来源：使用jQuery实现网页定位导航（中）
2015-04-13
黎酱

1.zencoding插件：可简化敲代码 (1) ul>li*5>a 按tab键 (2) 按住ALT键，就可以竖向选择 2.超链接悬浮或者座位焦点时(a.current 这里的current是设置第一个为默认)文字变白给个背景色 3.定位小技巧：固定menu的位置的时候fixed完成之后 left:50% 先让要定位的元素居中显示； margin-left:400px;再根据要相对定位的元素的宽度对要定位元素进行位置偏移。

查看全部

4 采集收起来源：使用jQuery实现网页定位导航（上）
2018-03-22
winterhello

使用id做锚点链接

查看全部

0 采集收起来源：使用jQuery实现网页定位导航（中）
2015-04-11
winterhello 02:00

scroll()

查看全部

0 采集收起来源：特效设计
2015-04-10
More_imooc 05:29

ie6 hack

查看全部

0 采集收起来源：浏览器调试
2015-04-09
More_imooc 02:00

scroll()

查看全部

0 采集收起来源：特效设计
2015-04-09
接下来看啥 01:52

scorll()函数

查看全部

0 采集收起来源：特效设计
2015-04-09
凤仪

$(function(){ //滚动条发生滚动 $(window).scroll(function(){ var top = $(document).scrollTop();//console.log(top); var menu = $("#menu"); var items = $("#content").find(".item");//效率高 var currentId = "";//当前所在的楼层（item）#id items.each(function() { var m = $(this); var itemTop = m.offset().top;//console.log(itemTop); if(top>itemTop-200){//对于临界值的处理为了优化用户体验所以要减去一点像素 currentId = "#" + m.attr("id"); }else{ return false; } //给相应楼层的a 设置current ，取消其他链接的current var currentLink = menu.find(".current"); if(currentId&&currentLink.attr("href")!=currentId){ currentLink.removeClass("current"); menu.find("[href="+currentId +"]").addClass("current"); } }); }); }); 说明： ①判断currentId是否有值还有是否改变再改变右侧焦点 ②对于临界值的处理为了优化用户体验所以要减去一点像素 ③$("selector").find("[attribute=value]"); 获得属性值为特定值的节点

查看全部

0 采集收起来源：使用jQuery实现网页定位导航（下）
2018-03-22
凤仪

1.引入jQuery库： <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script> 2.锚点链接：设a标签的href="item1"后，之前的锚点是通过，name=“item1”。 html5的锚点是通过，id=“item1”标记。 3.$(window).scroll()滚动条滚动的时候 4.var top=$(document).scrollTop();滚动条滚动的距离 5.console.log(top)控制台输出显示 6.var items=$(#content).find(".item");获取所有的item 或者写$(#content .item");或者$(".item"); jQuery通过id来筛选永远比通过class来筛选效率要高很多，所以第一种写法效率最高推荐使用 7.items.each()遍历每一个item 8.m.offset().top是获取所有item距离顶端的距离 9.$(document).scrollTop()获取滚动条距离页面顶端的距离 10.然后当前滚动条依次与item的距离比较 11.each遍历item所以this的值也在变化 12.currentId获取当前的ID 13.return false跳出循环

查看全部

0 采集收起来源：使用jQuery实现网页定位导航（中）
2018-03-22
凤仪

1.zencoding插件：可简化敲代码 (1) ul>li*5>a 按tab键 (2) 按住ALT键，就可以竖向选择 2.超链接悬浮或者座位焦点时(a.current 这里的current是设置第一个为默认)文字变白给个背景色 3.定位小技巧：固定menu的位置的时候fixed完成之后 left:50% 先让要定位的元素居中显示； margin-left:400px;再根据要相对定位的元素的宽度对要定位元素进行位置偏移。

查看全部

0 采集收起来源：使用jQuery实现网页定位导航（上）
2018-03-22
来这干嘛 01:27

对于不支持position:fixed的IE6浏览器的解决方法

查看全部

0 采集收起来源：浏览器调试
2015-04-07