-
特效分析 左侧的内容，右侧悬浮的导航菜单 左侧滚动时，右侧内容不改变位置 点击右侧链接，左侧定位到相应栏目 左侧滚动到相应栏目，右侧定位到对应链接 重难点 1.左侧栏目和右侧导航菜单的显示样式实现 2.导航与滚动条之间的定位关联 导航与滚动条之间的定位关联查看全部
-
浏览器调试：IETest测试工具，一般情况下ie7下通过了ie8,ie9也没有问题，特别的ie6不支持position的fixed属性，做一个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和jQuery，实现导航菜单在右侧绝对定位显示，并且可以在滚动时根据滚动条的位置自动设置导航菜单的焦点。查看全部
-
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"); } }); }); });查看全部
-
锚点：html5中不用name,用id查看全部
-
特效设计 技术点： 1.锚点（anchor）：锚点是网页制作中超链接的一种，又叫命名锚记。锚点是一种页面内的超级链接 2.关于滚动条定位的事件和方法（借助jQuery） 特效所需要掌握的技术点 scroll([data],fn):当用户滚动指定的元素时，会发生scroll事件 scroll事件适用于所有可滚动的元素和window对象（浏览器窗口） 例如 当页面滚动条变化时，执行函数....: $(window).scroll(function(){/*.......*/}); scrollTop([val])：获取/设置匹配元素相对滚动条顶部的偏移 offset()：获取匹配元素的相对偏移。返回的对象包含两个整形属性：top和left ，以像素计。查看全部
-
特效分析 左侧的内容，右侧悬浮的导航菜单 左侧滚动时，右侧内容不改变位置 点击右侧链接，左侧定位到相应栏目 左侧滚动到相应栏目，右侧定位到对应链接 重难点 1.左侧栏目和右侧导航菜单的显示样式实现 2.导航与滚动条之间的定位关联 导航与滚动条之间的定位关联查看全部
-
ie6hack查看全部
-
特效所需要掌握的技术点查看全部
-
mark查看全部
-
好帅啊 1. 让右侧广告正确显示 注意: 选择正确的尺寸和滚动条的隐藏。 2. 让导航菜单在左侧绝对定位显示 注意: 定位和选择正确的position。 3. 让导航菜单实现在滚动条滚动的时候自动设置焦点 注意：注意用到教程中所学的知识，遍历items设置currentId，然后给菜单设置current类查看全部
-
var top = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop;或var top = document.documentElement.scrollTop || document.body.scrollTop;用js实现滚动时根据滚动条的位置自动设置导航菜单的焦点 在chrome下document.documentElement.scrollTop为0，用var top = document.documentElement.scrollTop || document.body.scrollTop; 1.定义getByClassName函数，让函数实现根据class name获取对象并返回 提示：先获取obj中的所有标签，赋值给elements，然后遍历elements，找到className相符的元素存入数组result，最后返回result 2.定义addClass函数，让函数实现给对象增加class 提示：首先要判断是否已经有名为cls的class，如果没有，添加即可 3.补充代码，给正确的menu下的a元素class赋值current 提示：此处要遍历menus，对menus中的每一个元素判断href属性值和currentId是否相符，并根据判断结果决定是移除名为current的class，还是增加名为current的class。查看全部
-
注意调用方式也要改变查看全部
-
JS中没有addclass和removeclass的方法 使用正则表达式判断class的存在: obj.className.match(new RegExp("(\\s|^)" + cls + "(\\s|$)")) 注意：RegExp的参数是字符串，\\是把\转义 注意addclass的时候要加空格查看全部
举报
0/150
提交
取消