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

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

网页定位导航特效

                
                姜维
            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:54

scroll

查看全部

0 采集收起来源：特效设计
2016-05-02
鲈先森

$(document).ready(function () { $(window).scroll(function () { var top = $(document).scrollTop(); var menu = $("#menu"); var items = $("#content").find(".item"); // 请补充此处代码，让导航菜单实现在滚动条滚动的时候自动设置焦点 var currentId = ""; items.each(function(){ var $this = $(this); if (top>$this.offset().top){ currentId = "#"+$this.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"); } }); });

查看全部

0 采集收起来源：编程挑战
2018-03-22
鲈先森

$(document).ready(function(){ //当滚动条发生动作 $(window).scroll(function(event) { var top = $(document).scrollTop();//滚动栏的高度 var menu = $("#menu"); var items = $(".item"); var currentId = "";//用于记录当前的item的id items.each(function(index, el) { var currentClass = menu.find(".current");//找到设置了默认样式的元素 var $this = $(this); var itemTop = $this.offset().top;//当前的item距离浏览器的高度 if (top>itemTop-200){ currentId = "#"+$this.attr("id");//记录当前的item的id }else { return false; }//判断当前有没有加样式 if (currentId&&currentClass.attr("href") != currentId){ currentClass.removeClass("current"); //找到与item一致的元素并加上样式 $("#menu a").each(function(index, el) { if($(this).attr("href")==currentId){ $(this).addClass('current'); } });} });}); })

查看全部

0 采集收起来源：编程练习
2018-03-22
慕仙0974441

解决问题流程：分析—设计——实现

查看全部

0 采集收起来源：网页定位导航设计
2016-04-27
qq_火翼_0

解决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-04-26
guduzhuaimengzhe

IETester包含多个版本的IE，可以方便的用来进行兼容性测试，获取下载或者更多信息可以访问：http://www.my-debugbar.com/wiki/IETester/HomePage

查看全部

0 采集收起来源：练习题
2016-04-24
雨路 01:53

网页定位导航特效所需掌握技术点

查看全部

0 采集收起来源：特效设计
2016-04-24
李夜

function getByClass(className,obj){ obj = obj||document; var arr = obj.getElementsByTagName('*'); var elements = []; var reg = new RegExp("\\b"+className+"\\b"); for(var i=0,len=arr.length; i<len;i++){ if(arr[i].className.search(reg)!=-1){ elements.push(arr[i]); } } return elements; }

查看全部

0 采集收起来源：使用JS获取元素
2018-03-22
李夜

/*ie6 hack*/ * html, * html body { background-image: url(about:blank); background-attachment: fixed; } * html #menu { /*position: fixed;*/ position: absolute; top: expression(((e=document.documentElement.scrollTop)?e:document.body.scrollTop)+100+'px'); }

查看全部

0 采集收起来源：浏览器调试
2016-04-23
玉米南瓜粥

浏览器调试：IETest测试工具，一般情况下ie7下通过了ie8,ie9也没有问题，特别的ie6不支持position的fixed属性，做一个hack()。通过给样式额外添加hack，以达到ie兼容问题。具体操作是在相应样式前添加“* html”来实现，同时如果有某些属性为ie所不能兼容的，将以特殊表达式来实现，例如：fixed属性。通过给body添加空白图片的技巧来稳定fixed导航的跳动。 /*IE6 hack*/ *html, *html body{ background-image:url(about:blank); background-attachment:fixed; } * html #menu{ /*position:fixed;*/ position:absolute; top:expression(((e=documentElement.scrollTop)?e:document.body.scrollTop)+100+'px'); }

查看全部

0 采集收起来源：浏览器调试
2016-04-21
yushenxin

内边距会使盒子变大，而不是盒子大小不变里面空出边距

查看全部

0 采集收起来源：编程挑战
2016-04-21
yushenxin

absolute相对定位的父元素要设置高度，在此例中，在设置absolute定位前，父元素被子元素（图片）撑开，子图片设置absolute定位后，脱离文档流，父元素缩小到不可见，导致子图片挤在一起

查看全部

0 采集收起来源：编程挑战
2016-04-21
yushenxin

IETester包含多个版本的IE，可以方便的用来进行兼容性测试，获取下载或者更多信息可以访问：http://www.my-debugbar.com/wiki/IETester/HomePage

查看全部

0 采集收起来源：练习题
2016-04-19
yushenxin

menu.find("[href="+currentId+"]").addClass("current");选择器中加变量的方法由于html的属性不影响解析的情况下可以不加引号，因此currentId未加引号也可，但严格来讲menu.find("[href="+"'"+currentId+"'"+"]").addClass("current");才对

查看全部

0 采集收起来源：编程练习
2018-03-22
yushenxin

对each而言：return true=continue return false=break

查看全部

0 采集收起来源：编程练习
2016-04-19