-
位移距离查看全部
-
done查看全部
-
锚点（anchor）：锚点是网页制作中超链接的一种 jQuery中的 scroll事件查看全部
-
通过对离页面顶端的距离计算来判断我们滚动到了哪里查看全部
-
通过给样式额外添加hack，以达到ie兼容问题。具体操作是在相应样式前添加“* html”来实现，同时如果有某些属性为ie所不能兼容的，将以特殊表达式来实现，例如：fixed属性。 通过给body添加空白图片的技巧来稳定fixed导航的跳动。 /*ie6 hack*/ *html #menu { position:absolute; top:expression(((e=document.documentElement.scrollTop)?e:document.body.scrollTop)+100+'px') } /*ie6跳动bug*/ *html,*html body { background-image:url(about:blank); background:-attachment:fixed;查看全部
-
解决问题：分析-设计-实现 页面定位导航设计（例如：天猫首页） 1.特效分析 分为左右两部分： 左侧内容，右侧悬浮的导航菜单 左侧滚动，右侧内容不改变位置 点击右侧链接，左侧定位到相应栏目 左侧滚动到相应栏目，右侧定位到对应链接 重难点： 1)样式实现；2)导航与滚动内容之间的定位关联（根据左侧栏目内容距离页面顶部的高度，根据滚动距离将相应栏目内容设置为焦点） 2.特效设计 技术点： 1)锚点:一种页面内的超级链接,使用命名锚记可以在文档中设置标记（html中用name值，html5中废弃了name改用id值），这些标记通常放在文档的特定主题处或顶部；2)关于滚动条定位的事件和方法（借助jQuery）:1.$(selector).scroll(func),用户滚动指定元素（所有可滚动的元素和window对象即浏览器窗口）时，发生scroll事件。2.$(selector).scrollTop([val]),获取/设置指定元素相对于滚动条顶部的偏移。3.$(selector).offset([{top:val1,left:val2}|func])返回/设置匹配元素相对于文档的偏移(返回的对象包含两个整型属性：top 和 left，以像素计),func返回被选元素新偏移坐标的函数。 3.特效实现 1）整体代码编写 2）浏览器调试：IETest测试工具（一款Web browser，包含多个版本的IE，用来测试兼容性），一般情况下ie7下通过了ie8,ie9也没有问题，低版本浏览器若出现兼容问题，用hack解决。 如：ie6不支持position的fixed属性 通过给body添加空白图片的技巧来解决滚动时导航的跳动。 *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'); }/*实现position：fixed的效果，但有个小问题：滚动时导航条跳动（闪烁）*/查看全部
-
offset是相对于整个页面，当前元素所在的位置 scrollTop是指滚动条相对于整个页面所在的位置。 jQuery的offset()方法将返回的是一个包含top和left属性的对象查看全部
-
jquery 用id获取元素比用 样式选择元素效率高查看全部
-
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">查看全部
-
网页定位导航效果扩展案例查看全部
-
js实现 天猫购物网--网页定位导航效果查看全部
-
特效技术点 。查看全部
-
特效技术点查看全部
-
天猫购物网--网页定位导航效果查看全部
-
http://img1.sycdn.imooc.com//5485935a0001e04a12000530-120-68.jpg查看全部
举报
0/150
提交
取消