-
ie6 position:fixed 兼容写法查看全部
-
通过className获取元素针对IE的兼容查看全部
-
网页定位导航特效 6-3 使用JS实现函数--- addclass和removeclass的方法 JS中没有addclass和removeclass的方法 使用正则表达式判断class的存在: obj.className.match(new RegExp("(\\s^)" + cls + "(\\s$)")) 注意：RegExp的参数是字符串，\\是把\转义 注意addclass的时候要加空格 chrome :document.documentElement.scrollTop = 0; var top = document.documentElement ? document.documentElement.scrollTop : document.body.scrollTop;//不兼容 var top = document.documentElement.scrollTop window.pageYOffset document.body.scrollTop; //查看全部
-
xxx.href得到的是http:....#item1这样的地址，所以不好和之前的currentId （item1）比较，所以运用split()方法借助"#"分段，把xxx.href拆成数组，然后取数组最后一个元素，就是item1这样的字符串了，方便与currentId比较 JS中没有each用for循环，用for循环时用break跳出循环 Ps1：documentElement 和 body 相关说明： -body 是DOM对象里的body子节点，即 <body> 标签； -documentElement 是整个节点树的根节点root，即<html> 标签； 解析：DOM把层次中的每一个对象都称之为节点，就是一个层次结构，你可以理解为一个树形结构，就像我们的目录一样，一个根目录，根目录下有子目录，子目录下还有子目录。以HTML超文本标记语言为例：整个文档的一个根就是,在DOM中可以使用document.documentElement来访问它，它就是整个节点树的根节点。而body是子节点，要访问到body标签，在脚本中应该写：document.body。 Ps2： /*因为兼容性问题，要用如下的方法。使用原生方法，要注意兼容性*/ 1.var top = document.documentElement ? 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) { //如果有多个class这是不成立的。 result.push(element[i]); } } return result; } } Ps3：在JavaScript中获取的href是整个地址栏的完整地址，所以需要拆分（以“#”拆分）。查看全部
-
1.var top = document.documentElement ? 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 ? document.documentElement.scrollTop : document.body.scrollTop;查看全部
-
<!--运用锚点，实现导航定位。--> <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> 通过id查询要比class查询效率高，即使是间接通过id查询来选择class也比直接选择一个class要快 .find查询要比$("")内通过子选择器查询效率要高 算法： 1、通过$(document).scrollTop(),获得滚动条据顶部的高度top 2、find（）找到所有的class为“item”标签 3、通过offset（）.top获得标签距离顶部的高度 4、通过each()循环比较两个高度值，找出当前显示div 5、重置选中状态 6、通过find("[href="+N+"]").addClass()实现修改选中标签 1 position:fixed 绝对定位，相对于浏览器窗口进行定位 2 find()获得当前元素集合中每个元素的后代 3 attr()获取或设置属性 首先监听页面滚动，然后遍历菜单，以获得相应位置的id，最后替换当前显示动作 1、$(selector).scroll(function(){})--滚动条滚动监听方法 2、$(selector).scrollTop()--滚动条垂直偏移量设置和获取方法 3、$(selector).offset().top/.left--文档的竖直和横向偏移量 重点： 1、用$().each(function(){})方法遍历所需要的每个元素 2、比较滚动条的偏移量和文档偏移量的大小 技巧： 1、通过ID获取元素，比通过class获取元素效率更高 2、尽量将要多次使用的值存储在变量中，可以提高效率查看全部
-
jQuery的offset()方法会返回一个对象，包含top和left属性，对应匹配元素的top和left相对偏移查看全部
-
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"、....这样的。查看全部
-
$(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"); //遍历并进行楼层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"); } }); }); });查看全部
-
锚点链接：html5使用id进行锚点链接，html5取消了name属性 滚动条定位： @@网页定位导航特效 知识要点 jQuery中通过id筛选永远比用class筛选的效率要高的多所以通过$("#").find()更有效率 $(元素).scroll():元素的滚动条滚动时,触发事件 $(document).scrollTop():获取滚动条距离页面顶端的距离 $(元素).offset().top:获取元素相对于文档顶部的偏移（位置）。 console.Log(元素)在控制台看该元素的值 return false跳出循环,减少程序循环或判断所用时间+运算量 jQuery中通过id筛选永远比用class筛选的效率要高的多所以通过$("#").find()更有效率 $(window).scroll()滚动条滚动的时候 $(document).scrollTop()获取滚动条距离页面顶端的距离 items是所有item的集合 each遍历所有item m.offset().top是获取所有item距离顶端的距离 然后当前滚动条依次与item的距离比较 console.Log(元素)在控制台看该元素的值 each遍历item所以this的值也在变化 currentId获取当前的ID，return false跳出循环查看全部
-
先left:50%定位到水平居中，然后再跟进content定位到content右侧，比如#content的width是800px那就margin-left：400px;查看全部
-
fixed查看全部
-
1.zencoding插件：可简化敲代码 (1) ul>li*5>a 按tab键 (2) 按住ALT键，就可以竖向选择 2.超链接悬浮或者座位焦点时(a.current 这里的current是设置第一个为默认)文字变白给个背景色 3.定位小技巧： 固定menu的位置的时候fixed完成之后 left:50% 先让要定位的元素居中显示； margin-left:400px;再根据要相对定位的元素的宽度对要定位元素进行位置偏移。 CSS中块级、内联元素的应用： 利用CSS我们可以摆脱上面表格里HTML标签归类的限制，自由地在不同标签/元素上应用我们需要的属性。 主要用的CSS样式有以下三个： •display:block -- 显示为块级元素 •display:inline -- 显示为内联元素 •dipslay:inline-block -- 显示为内联块元素，表现为同行显示并可修改宽高内外边距等属性 我们常将<ul>元素加上display:inline-block样式，原本垂直的列表就可以水平显示了。 题外话：最近整理有关块级元素和内联元素区别的有关知识，网上找了不少相关的文章，发现大家的理解似乎都有误，我自己亲自测试了下，发现了不少的问题： 1.内联元素的margin-left / margin-right及padding-left / padding-rigtht是可以控制的，所以可以通过这4个属性来控制内联元素的宽度。 2.内联元素的内部也可以放块级元素标签，而且内部的块级元素标签会撑大外部的内联标签，所以可以通过放块元素来控制内联元素的高度(网上介绍的是内联元素只能放文本及其他内联元素)查看全部
-
锚点的描述: 锚点是网页制作中超级链接的一种 锚点可以在网页页面内部迅速定位 使用锚点可以在文档中设置标记，这些标记通常放在文档的顶部 锚点的英文名是anchor查看全部
-
scroll([data],fn):当用户滚动制定的元素时，会发生scroll事件。 scroll事件适用于所有可滚动的元素和window对象（浏览器窗口）。 例如：当页面滚动条变化时，执行函数... ...: $(window).scroll(function(){/*... ...*/}); scrollTop([val])：获取/设置匹配元素相对滚动条顶部的偏移。 offset():获取匹配元素的相对偏移。返回的对象包含两个整形属性： top和left，以像素计。查看全部
举报
0/150
提交
取消