-
xxx.href得到的是http:....#item1这样的地址，所以不好和之前的currentId （item1）比较，所以运用split()方法借助"#"分段，把xxx.href拆成数组，然后取数组最后一个元素，就是item1这样的字符串了，方便与currentId比较 JS中没有each用for循环，用for循环时用break跳出循环查看全部
-
1.var top = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop; 因为兼容性问题，要用如上的方法。 使用原生方法，要注意兼容性 2.IE浏览器对getElementByClassName()方法支持较差，解决方法(粗略)： 在外面重新写一个方法 function getByClassName(obj,cls){ var element = document.getElementsByTagName("*"); var result = []; for (var i = 0; i < element.length; i++) { if (element[i].className == cls) { result.push(element[i]); } } return result; } } 用原生态js编写代码，尤其要注意浏览器的兼容性。 如果某些浏览器不兼容，将可以通过编辑函数来实现或替代某些功能。 1、比如，使用document.getElementsByClassName()，IE对这个方法的支持很差。解决方法代码如下。 function getByClassName(obj,cls){ var element = document.getElementsByTagName("*"); var result = []; for (var i = 0; i < element.length; i++) { if (element[i].className == cls) { result.push(element[i]); } } return result; } } 注意但是这个方法不适用于多个class的时候 2、获取页面的滚动条距离顶部的高度可以用下面的方法(因为在XHTML中不支持documentElement所以要用body来获取scrollTop)： var top = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop;查看全部
-
浏览器调试： IETest测试工具，一般情况下ie7下通过了ie8,ie9也没有问题， 特别的ie6不支持position的fixed属性，做一个hack即通过一些特殊的编码解决这些问题。 【hack---不同浏览器设置不同的样式，已达到兼容的目的。】 通过给样式额外添加hack，以达到ie兼容问题。具体操作是在相应样式前添加“* html”来实现，同时如果有某些属性为ie所不能兼容的，将以特殊表达式来实现，例如：fixed属性。 通过给body添加空白图片的技巧来稳定fixed导航的跳动。 /* IE 6 hack */ /* 针对 IE6 不支持 position:fixed 出现的显示问题而使用的*/ * 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'); } CSS hack技巧大全 http://www.duitang.com/static/csshack.html查看全部
-
算法： 1、通过$(document).scrollTop(),获得滚动条据顶部的高度top 2、find（）找到所有的class为“item”标签 3、通过offset（）.top获得标签距离顶部的高度 4、通过each()循环比较两个高度值，找出当前显示div 5、重置选中状态 6、通过find("[href="+N+"]").addClass()实现修改选中标签 1、$(selector).scroll(function(){})--滚动条滚动监听方法 2、$(selector).scrollTop()--滚动条垂直偏移量设置和获取方法 3、$(selector).offset().top/.left--文档的竖直和横向偏移量查看全部
-
jQuery的offset()方法会返回一个对象，包含top和left属性。查看全部
-
$(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&¤tLink.attr("href")!=currentId){ currentLink.removeClass("current"); menu.find("[href="+currentId +"]").addClass("current"); } }); }); }); 说明： ①判断currentId是否有值还有是否改变 再改变右侧焦点 ②对于临界值的处理为了优化用户体验所以要减去一点像素 ③$("selector").find("[attribute=value]"); 获得属性值为特定值的节点 jQuery 属性选择器 jQuery 使用 XPath 表达式来选择带有给定属性的元素。 $("[href]") 选取所有带有 href 属性的元素。 $("[href='#']") 选取所有带有 href 值等于 "#" 的元素。 $("[href!='#']") 选取所有带有 href 值不等于 "#" 的元素。 $("[href$='.jpg']") 选取所有 href 值以 ".jpg" 结尾的元素。查看全部
-
思考逻辑： 首先都要获取页面滚动距离scrollTop和每个div距离顶部的值offset（）.top，然后对滚动条和遍历的div每个值进行判断，然后去确定到几楼，拿到它的id值，最后对当前div的class已经是“current”判断，如果不是，则进行removeClass,对相应的值进行赋值。查看全部
-
锚点链接：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循环查看全部
-
1.webStrom软件zencoding插件：可简化敲代码 (1) ul>li*5>a 按tab键 sublime也可以tab (2) 按住ALT键，就可以竖向选择 sublime是按住shift+右键 2.超链接悬浮或者座位焦点时(a.current 这里的current是设置第一个为默认)文字变白给个背景色 3.定位小技巧： 固定menu的位置的时候fixed完成之后 left:50% 先让要定位的元素居中显示； margin-left:400px;再根据要相对定位的元素的宽度对要定位元素进行位置偏移。查看全部
-
html5以后通过#id属性值来做锚点的连接 jq中，通过id来筛选，比通过class筛选的效率要高很多 $('#sel').find('.class')这种利用find的筛选方法比$('#sel .class')这样的css式的选择器效率要高很多查看全部
-
锚点(anchor)：锚点是网页制作中超链接的一种，又叫命名锚记。锚点是一种页面内的超级链接。 使用锚点可以在文档中设置标记，这些标记通常放在文档的中间或者底部查看全部
-
scoll([data],fn):当用户滚动指定的元素时，会发生scroll事件。scroll事件适用于所有可滚动的元素和window对象（浏览器窗口）。 例如 当页面滚动条发生变化时，执行函数......： $(window).scroll(function(){/*......*/}； scrollTop[vall]：获取/设置匹配元素相对滚动条顶部的偏移。 offset()：获取匹配元素的相对偏移。返回对象包含两个整形属性：top和left，以像素计查看全部
-
网页定位导航设计 1.解决问题流程：分析—设计——实现 2.特效分析分为左右两部分： 1）.左侧的内容，右侧悬浮的导航菜单 2）.左侧滚动，右侧不改变位置 3）.点击右侧，左侧定位相应栏目 4).左侧滚到相应栏目，右侧定位到对应链接 3.重难点 1）.左侧栏目和右侧导航菜单的显示样式实现 2）.导航与滚动条之间的定位关联 css scrollTop 4.导航与滚动条之间的定位关联 滚动条与右侧导航条（高亮设置） 滚动条在BC之间，2F；AB之间就是1F；以此类推 找到内容与导航的关联点，就能将两者联系起来，使滚动内容相应于导航作出相应反应查看全部
-
单页面的网页比较流行，让客户能够快速的浏览信息。但是不方便定位，所以要有良好的导航是至关重要的。 导航固定在屏幕的位置，并且滚动页面导航条的焦点也随之滚动 主流单页面。快速查看内容。 定位不便。所以需要导航快速跳转到我们想要的地方。查看全部
-
实现效果：查看全部
举报
0/150
提交
取消