-
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; } }查看全部
-
ie6不支持position:fixed;可以用一下代码代替： * 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');查看全部
-
ie6不支持position:fixed;可以用一下代码代替： * 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');查看全部
-
$(document).ready(function(){ $(window).scroll(function(){ var top=$(document).scrollTop(); var menu=$("#menu"); var items=$("#content").find(".item"); var currentId=""; items.each(function(){ var m=$(this); var itemTop=m.offset().top; if(top>itemTop-200){ currentId="#"+m.attr("id"); }else{ return false; } }); var Link=menu.find(".current"); if(currentId&&Link.attr("href")!=currentId){ Link.removeClass("current"); menu.find("[href="+currentId+"]").addClass("current"); } }); });查看全部
-
监听滚动查看全部
-
原生JS代码获取元素查看全部
-
jquery通过ID来筛选要比通过class来筛选，效率要高很多。查看全部
-
特效技术要点查看全部
-
网页定位导航特效 6-3 使用JS实现函数--- addclass和removeclass的方法 JS中没有addclass和removeclass的方法 使用正则表达式判断class的存在: obj.className.match(new RegExp("(\\s|^)" + cls + "(\\s|$)")) 注意：RegExp的参数是字符串，\\是把\转义 注意addclass的时候要加空格查看全部
-
xxx.href得到的是http:....#item1这样的地址，所以不好和之前的currentId （item1）比较，所以运用split()方法借助"#"分段，把xxx.href拆成数组，然后取数组最后一个元素，就是item1这样的字符串了，方便与currentId比较 JS中没有each用for循环，用for循环时用break跳出循环查看全部
-
$(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" 结尾的元素。查看全部
-
1.zencoding插件：可简化敲代码 (1) ul>li*5>a 按tab键 (2) 按住ALT键，就可以竖向选择 2.超链接悬浮或者座位焦点时(a.current 这里的current是设置第一个为默认)文字变白给个背景色 3.定位小技巧： 固定menu的位置的时候fixed完成之后 left:50% 先让要定位的元素居中显示； margin-left:400px;再根据要相对定位的元素的宽度对要定位元素进行位置偏移。查看全部
-
<!--原生js的写法--> <script type='text/javascript'> window.onload = function(){ window.onscroll = function(){ var top = document.documentElement ? document.documentElement.scrollTop:document.body.scrollTop; var menus = document.getElementById('menu').getElementsByTagName('a'); var items = document.getElementById('content').getElementsByClassName('item');查看全部
-
/* 让导航菜单在右侧绝对定位显示*/ #menu { position:fixed; left:50%; margin-left:450px; }查看全部
-
<script type="text/javascript"> $(document).ready(function () { $(window).scroll(function () { var items = $("#content").find(".item"); //先根据#content再去查找.item 提高效率 var menu = $("#menu"); var top = $(document).scrollTop(); //console.log(top); var currentId = ""; //滚动条现在所在位置的item id items.each(function () { var m = $(this); //注意：m.offset().top代表每一个item的顶部位置 if (top > m.offset().top - 300) { currentId = "#" + m.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"); } }); }); </script>查看全部
举报
0/150
提交
取消