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

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

网页定位导航特效

                
                姜维
            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
                                逻辑清晰

最热最新

空之境界丶

menu.find("[href="+currentId+"]").addClass("current"); jQuery 属性选择器 jQuery 使用 XPath 表达式来选择带有给定属性的元素。 $("[href]") 选取所有带有 href 属性的元素。 $("[href='#']") 选取所有带有 href 值等于 "#" 的元素。 $("[href!='#']") 选取所有带有 href 值不等于 "#" 的元素。 $("[href$='.jpg']") 选取所有 href 值以 ".jpg" 结尾的元素。就跟拼接字符串一样，currentId是个对象，不加加号的话menu.find("[href = currentId ]")表示找href属性为"currentId"的，很显然没有，只有href属性为"item1"、"item2"、....这样的。

查看全部

0 采集收起来源：使用jQuery实现网页定位导航（下）
2018-03-22
空之境界丶

锚点链接：html5使用id进行锚点链接，html5取消了name属性 ((之前的方法：name="1" <a href="1">1</a>)) 滚动条定位：jQuery库引用 <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script> @@网页定位导航特效知识要点 jQuery中通过id筛选永远比用class筛选的效率要高的多所以通过$("#").find()更有效率 $(window).scroll()滚动条滚动的时候 $(document).scrollTop()获取匹配元素（这里也就是页面）距离滚动条顶端（也就是那个小三角）的距离 items是所有item的集合 each遍历所有item m.offset().top是获取所有item距离顶端的距离然后当前滚动的距离与item的距离比较 console.Log(元素)在控制台看该元素的值 each遍历item所以this的值也在变化 return false跳出each循环

查看全部

0 采集收起来源：使用jQuery实现网页定位导航（中）
2018-03-22
空之境界丶

网页定位导航设计 1.解决问题流程：分析—设计——实现 2.特效分析分为左右两部分： 1）.左侧的内容，右侧悬浮的导航菜单 2）.左侧滚动，右侧不改变位置 3）.点击右侧，左侧定位相应栏目 4).左侧滚到相应栏目，右侧定位到对应链接 3.重难点 1）.左侧栏目和右侧导航菜单的显示样式实现 2）.导航与滚动条之间的定位关联 css scrollTop 4.导航与滚动条之间的定位关联滚动条与右侧导航条（高亮设置）滚动条在BC之间，2F；AB之间就是1F；以此类推找到内容与导航的关联点，就能将两者联系起来，使滚动内容相应于导航作出相应反应

查看全部

0 采集收起来源：网页定位导航设计
2016-11-10
哈士奇二二

锚点（anchor）：又叫命名锚记，，是网页制作中操作中的一种超连接

查看全部

0 采集收起来源：特效设计
2016-11-08
陈宇汐文

解决IE6不兼容fixed属性的方法，在css中加入： /*ie6 hack*/ *html,*html body{ background-image:url(about:blank); background-attachment:fixed; } *html menu{ position:absolute; top:expression(((e=document.documentElement.scrollTop)?e:document.body.scrollTop)+100+'px'); }

查看全部

0 采集收起来源：浏览器调试
2016-11-05
慕嘿

怎么好多不懂了，最后的运动会，天冷了

查看全部

0 采集收起来源：编程挑战
2016-11-04
qq_留恋阳光_0

锚点（anchor）,页面内的超链接

查看全部

0 采集收起来源：特效设计
2016-11-03
说了不说_ 05:37

ie6 hack 技巧

查看全部

0 采集收起来源：浏览器调试
2016-11-03
Trytolove4043962 01:27

scroll方法

查看全部

0 采集收起来源：特效设计
2016-10-29
zjhjszwx 01:39

所需掌握的技术点

查看全部

0 采集收起来源：特效设计
2016-10-28
zjhjszwx 00:57

特效设计

查看全部

0 采集收起来源：特效设计
2016-10-28
云彩无色3804005

解决IE6不兼容fixed属性的方法，在css中加入： /*ie6 hack*/ *html,*html body{ background-image:url(about:blank); background-attachment:fixed; } *html menu{ position:absolute; top:expression(((e=document.documentElement.scrollTop)?e:document.body.scrollTop)+100+'px'); }

查看全部

0 采集收起来源：浏览器调试
2016-10-27
云彩无色3804005

var currentLink = menu.find(".current"); if (currentId && currentLink.attr("href") != currentId) { currentLink.removeClass("current"); menu.find("[href=" + currentId + "]").addClass("current"); } 不好理解

查看全部

0 采集收起来源：使用jQuery实现网页定位导航（下）
2018-03-22
用指尖改变世界4062338

html5取消了name属性作为锚点链接，支持id,<a href="#id">

查看全部

0 采集收起来源：使用jQuery实现网页定位导航（中）
2018-03-22
用指尖改变世界4062338 01:59

特效所需要掌握的技术点

查看全部

0 采集收起来源：特效设计
2016-10-22