[转]来自于慕课网学习整理。
一、实现网页定位导航特效
1、分析，设计
功能：滚动页面，右侧导航条随着内容变化而高亮不同的导航内容
导航与滚动条之间的定位关联，利用距离来判断 offset-top
说明：滚动条S1到了大于B小于C的位置，说明在二楼。
简写：ul>li*5>a，形成ul底下有5个li，每个li下有个a
用zencoding插件。
样式设置：注意，居中：width：固定宽度；margin:0 auto
图片横向排列：display:inline
导航偏移到主页面的右侧，position：fixed,left:50%,margin-left：400px
常用技巧，left先定位到页面中间，然后根据主页面的宽高，这是margin-left.
增加锚点链接：实现点击哪里主页内容到哪里。
2、JQuery实现
增加功能：滚动页面时依据主页内容的高度，高亮导航信息。
技巧：
计算滚动位置的楼层，把右侧导航信息相应楼层添加"current类"，current类的样式为高亮的。
$(window).scroll()事件 //每当滚动滚动条时触发。
$(document).scrollTop() //获取滚动距离top
遍历（each）每层（item），比较每层top(this.offset().top)与documeng.scrollTop
判断在n楼（itemn），把class=current赋予这层(href="#itemn")，去掉原来的class=current的位置(menu.find(".current"))。
解决Ie6兼容问题：不支持position:fixed
但是有跳变，所以增加如下：
IETester包含多个版本的IE，可以方便的用来进行兼容性测试，获取下载或者更多信息可以访问：http://www.my-debugbar.com/wiki/IETester/HomePage
3、Js实现
增加功能：滚动页面时依据主页内容的高度，高亮导航信息。
主体函数：
部分功能函数实现：
二、瀑布流布局
1、设计效果
2、分析
瀑布流的原理在于：
图片等宽不等高，利用绝对定位先计算再固定图片位置。
具体实现：因为图片等宽，所以第一行图片的列数固定，例如为6，之后的图片放在第一行图片中底边最靠上的图片的下面，再之后的图片放在上面图片中底边最靠上的图片下面，之后的也是如此。。。
图片与图片之间的距离在class="box"的div定义
每个图片内部有白色边距，在class="pic"的div定义
3、HTML
4、CSS
ps :
1）main设置为relative，因为其子元素的position需要绝对定位；
2）为class="box"的div设置padding而不是margin，使box与box之间拉开距离。
因为js获取计算图片位置时可通过每个数据块的高度=图片高+图片间的距离
用到的offsetHeight包括padding但不包括margin值；
因为box为会计元素，所以要设置float,浮动
3）设置每个图片块的样式：边框，圆角，阴影
4）设置图片的固定宽度，高度自动。
5、JS
封装getByClass（），实现传入父元素和要查找的class名字，返回class为某值得元素数组。
waterfall（），实现图片放在适当的位置：
计算第一行图片的高度，选出高度最矮的；
把下一个图片放到高度最矮的图片的下面，把新加入的图片累加到此列图片的高度上。
把下一个图片放到各列中高度最矮的图片下面,。。。。。。
1）后台提供需要加载的图片，存在dataInt中
2）发生滚动事件，判断是否需要加载后台的图片checkscrollside()（判断依据是：目前最后一张图片是否有超过一半的高度露在浏览器页面上）
3）加载后台图片:创建div,添加className，创建img,添加src属性。
4）调用waterfall(‘main’，‘pin’),功能：计算新图片摆放位置，并且摆放好。
waterfall(parent,pin)
5）获取HTML中的Pin元素数组:aPin，求得Pin元素块的宽offsetWidth（包括padding）
6）设置id为main的元素的样式：oPatent.style.cssText，width为固定宽度，margin为：0 auto;
7）把Pin元素的前六个高度值存入数组PinHArry中，选出数组中最小的值
Math.min.apply(null,pinHArr),把后面的Pin元素(aPin[i])放到数组中最小值所对应的的列的下面。
即，设置aPin[i]的position为：绝对定位，top为数组中最小值，left为数组中最小值对应列的offsetLeft
8）把新添加的元素块的高度offsetHeight,叠加到数组中最小的数值上
9）checkscrollside（）：判断是否需要加载后台的图片（判断依据是：目前最后一张图片是否有超过一半的度露在浏览器页面上）
蓝线的高度：lastPinH=aPin[aPin.length-1].offsetTop+Math.floor(aPin[aPin.length-1].offestHeight/2)
黑线的高度：滚走的距离+浏览器的距离
滚走的 距离：scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
浏览器的距离：documentH=document.documentElement.clientHeight
如果蓝线小于黑线（黑线变长，使滚动到了最后一个图片的一半时），返回TRUE，表明要加载后台图片。
6、JQuery实现
ps:
1、each的用法
each用法：each() 方法规定为每个匹配元素规定运行的函数。提示：返回 false 可用于及早停止循环。
$(selector).each(function(index,element))
| 参数 | 描述 |
|---|---|
| function(index,element) | 必需。为每个匹配元素规定运行的函数。
|
获取当前遍历的元素的方法：
$(value)或者 $aPin.eq( index )
三、搜索框制作
1、前期知识准备
1、按钮：
1）input 的使用：
type = submit时，有个不同于type = button 的属性就是，可以不借助任何js的代码，可以实现把表单内容提交到服务器。
此时，input 标签需要放置到 form 标签当中
form 标签的属性 action 表单将要提交到服务器的端口
target _blank 搜索的结果将在新的标签页显示
method 取值为get 或 post
2）input 的局限性
由于input是自闭合的标签，所以不能定义复杂样式的按钮，比如图文混排的按钮。如要实现图文混排的按钮效果，可以使用button 标签，把图片标签嵌套在button标签里面
2、简单搜索框制作
1）搭建框架：
效果： 
2）
效果： 
3）
效果： 
4）
效果： 
5）目前效果：
，使输入框和按钮对齐。
效果：
6）
效果：
7）
效果：
8）
效果：
3、智能提示搜索框制作
1）静态页面框架搭建：
（1）
把列表隐藏，为之后动态显示做准备。
（2）
（3）
2）jQuery实现动显示搜索建议列表
（1）jQuery实现在搜索框中输入时显示提示列表
（2）jQuery实现AJAX:从后台的的数据中拿到提示列表要显示的文本。
url:发送请求的url,
callback:
（3）点击其他的地方，列表隐藏
（4）点击建议列表中内容，实现跳转
3）JS实现动显示搜索建议列表
4）JS实现AJAX
ps:
向服务器发送请求
如需将请求发送到服务器，我们使用 XMLHttpRequest 对象的 open() 和 send() 方法：
xmlhttp.open("GET","test1.txt",true);
xmlhttp.send();
| 方法 | 描述 |
|---|---|
| open(method,url,async) | 规定请求的类型、URL 以及是否异步处理请求。
|
| send(string) | 将请求发送到服务器。
|
GET 还是 POST？
与 POST 相比，GET 更简单也更快，并且在大部分情况下都能用。
然而，在以下情况中，请使用 POST 请求：
- 无法使用缓存文件（更新服务器上的文件或数据库）
- 向服务器发送大量数据（POST 没有数据量限制）
- 发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠
4、淘宝搜索框
1）搭建框架：
HTML
css：
效果：
2）添加小图标
在CSS中使用字符集
url为字符集图片对应的字符路径
效果：
3）添加语音搜索
4）切换菜单制作（静态效果）
HTML实现：
css：
（1）
效果：
（2）
效果：
（3）
效果： 
5）切换菜单（动态效果）
（1）移入鼠标，展开菜单。原理：把高度从39px变成78px。
（2）鼠标移入到某li上，此li高亮。
（3）点击某li，把列表收起来，并且此li放入搜索位置左侧，另外的li隐藏。
4459
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
