1.右下角广告案例学到的知识点：
children（） 选择自己的子集元素，只会选择子集 ，下面一辈不会选择
parent（）自己的父级元素
slideDown（） 下滑 Up 上滑
fadeIn() 淡入 Out 淡出
总结 ：首先利用absolute的绝对定位 定位于自己的父级，然后 将xx这个图片绑定一个点击事件，当点击了这个的时候那么父级就滑出。夹带着子集也没了 开始的时候是要这两个图片先滑下去 然后滑上来一下 由于 第一个图片包含了第二个图片 所以他们会一起划入和划出
2.淘宝服饰精品广告学到的知识点：
text-align: center; 左右居中
$("#left li").mouseenter(function () {
$("#center li").eq($(this).index()).show().siblings("li").hide();
}); 这个代码是这个广告的核心代码 就是运用了eq（）索引功能，索引第几个图片 然后显示出来show是显示 然后用siblings（）将他的兄弟元素隐藏hide（）
#left li a:hover,#right li a:hover{
background-image: url(images/abg.gif);
} 这个代码是之前学的 鼠标碰到后就执行里面的函数 这里是设置背景颜色
总结： 首先第一步是清除样式 * 然后清除ul 和a标签的样式，定义一个盒子 class为wrapper 这个是用于包裹你的广告的 大小 边距 还有超出部分隐藏，在就是将文字和图片都设置为浮动元素 分类选择是，，， 子集选择是空格 然后设置a标签 首先设置他为块级元素 然后大小边距 还有水平剧中和竖直居中 最后设置颜色，然后控制鼠标碰到文字后就显示出来的图片，然后设置中间图片的左边框和右边框，然后开始script的方法 就是jquery eq通过索引 来将两个链接起来 显示 然后将他的兄弟元素隐藏，第二个就是加上9就好了 因为不是同一个ul。 淘宝服饰精品广告到此结束！！！
3三级轮播图学到的知识点：
margin
:
100
px auto
0
; 这个一般是将一个广告居中的方法
list-style
:
none
; 清除ul ol的样式
$
(
".wrap > ol > li"
).
mouseenter
(
function
() {
zIndex++
;
$
(
this
).
addClass
(
"active"
).
siblings
().
removeClass
(
"active"
)
;
$
(
".wrap > ul > li"
)
.
eq
(
$
(
this
).
index
())
.
css
({
"z-index"
: zIndex
,
"left"
:
650
}) 这里就是那个轮播图的核心代码，首先z-index这个是z坐标的一个隐含的表达方式通过将下一个你要点击的图案放到之前的前面 这就实现了轮播图的效果，然后 引用animate这个动画效果
.
animate
({
"left"
:
0
}
,
1000
)
;
$
(
this
).
addClass
(
"active"
).
siblings
().
removeClass
(
"active"
)
;还有这个方法 就是给当前的ol li给绑定active这个动画 然后他的兄弟取消active这个class 这是一个要常用的方法 用于样式的
总结： 首先还是第一步先把margin个padding都归零，然后 先把框架做出来 就是一个div里面包裹了两个东西 一个ul li 一个ol li ul是图片 ol是那个索引 ， 那个ol还要给一个设上class。框架做好了该做主流了 先给他们做上样式 wrap的高度 宽度剧中 定位 超出部分隐藏 然后图片设置成块级元素 ul也要设置高度 和定位 再加上索引 ol 定位就为absolute 然后 z坐标比ul要高一点 ul li也设置 这个设置为absolute 然后top为0 left也为0 ol li 也要设置一系列参数 设置浮动就好了 ，active 这个参数是设置他鼠标碰到ol里面的li时产生的效果 css之前就设定了active的效果 然后利用zIndex在z轴上面的空间设置出轮播的效果 至于动画 就是第一个先把它放到最右边 然后第二个操作就是把他的left=0 时间设置为1000 就这样 轮播图就完成了
4.手风琴效果学到的知识点
$
(
".wrap li"
).
each
(
function
(i
,
ele) { 这里就是利用率each（）这个方法 i就是each（）中的参数 他是从0开始的 然后下一个参数就是 dom操作所操作的对象 他也可以只接受一个参数 一个参数的话就是那个索引 index
animate
({
width
:
600
}
,
500
) 这个动画要善加利用
$
(ele).
css
(
"background"
,
"url(images/"
+ (i +
1
) +
".jpg)"
)
; 通过each来显示当前应该放第几个照片 这是显示图片的一种方式
总结： 首先把框架做出来 这个框架比较简单 就是一个div里面包裹一个ul li就好了 然后就是设置他们的css样式 首先是div的样式 宽度和高度都是必不可少的 然后就是他的 margin 外边框了 一般情况下都是设置他的上面的边框 然后左右边框为 auto 下边框为0 这就设置好了 div这个熟悉了 第二部就是设置li因为li是在div里面的 所以他被div包裹了，我们可以设置下li的宽度 还有他的高度 因为 这个div是没有设置高度的 所以 他就设置了一下图片的初始高度 然后接下来是这个手风琴的核心代码，就是利用each（）这个函数 里面放一个函数 函数里面接受一个参数 第一个是索引 第二个是元素，然后让元素对应图片 排列起来 ，然后确定两个事件 一个事 移到了图片的事件一个是移开了图片的事件 移到了 就是停止这个图片的动画 然后设置另一个动画，将它全屏显示 设置好事多少毫秒 ，然后将他的兄弟元素 动画停止 将兄弟元素的width设置为100 时间也设置好，然后移开的时候将这个动画停止 开始一个将他的wdith改编为200这个动画 就这样 手风琴就完成了
5.tab栏切换所学到的知识点
body,div,ul,li,ol,dl,dt,p,dd,img,input,a,span,h1,h2,h3,h4
{
padding
:
0
;
margin
:
0
;
border
:
0
;
list-style
:
none
;
} 这个是一般企业级的项目 做的第一步动作
cursor
:
pointer
; 这个的意思是鼠标移动到上面的时候他会显示一个小手
.
products
.
main
{
float
:
left
;
display
:
none
;
}
.
products
.
main
.
selected
{
display
:
block
;
} 这两个的意思是 将其余的先隐藏 将第一个显示出来再说 ，日后通过索引然后更改他们的类名就好了
.
tab
li
.
active
{
border-color
:
red
;
border-bottom
:
0
;
} 同样这个的存在的意义也是这样的 通过切换然后得到自己想要的东西
$this.
addClass
(
"active"
).
siblings
(
"li"
).
removeClass
(
"active"
)
;
$
(
".products div"
).
eq
(index).
addClass
(
"selected"
).
siblings
(
"div"
).
removeClass
(
"selected"
)
; 首先我们要熟悉这两段代码 这两个代码的意思都是车不多的 第一个是改变文字下面的一条小横刚 把当前点击的加入进去，没点击的取消 然后下面的就是匹配元素 eq（）这个函数就是用来将两个li来匹配的因为我们的this是文字 然后通过eq 索引到0.1.2 然后就将两个形成链接了
总结： 首先我们来讲html的框架代码 首先ul 下面接4个li 就是他们的文字信息 然后另一个用div来包裹 用另外4个div来执行图片 4个div里面嵌套a标签 a标签放图片就好了 然后开始style的代码首先将一系列东西都弄好 浮动什么大小定位，然后就开始了java的核心代码 当移动到了那个文字的时候就先改变一下文字下面小红线的位置 这个方法用类名来实现 用一个addClass 然后索引元素 eq（）来得到然后更改类名 他就得到了一个元素的熟悉 然后其他的类名就取消掉 这个类名之间也是要有什么不同的，好了 这就是tab栏所学到的知识点
6.360图片导航效果的知识点
background
:
url
(
images/bg.png
)
no-repeat
5
px
0
;
//
不平铺 这个的意思就是这个照片不平铺 放一个就好了
var
div =
$
(
"<div></div>"
)
,
speed =
388
,
$p =
$
(
".wrapper p"
)
;
$p.
before
(div)
; 这里是在js里面就直接添加html代码 这里的意思是在p标签旁边放上 div这个标签
$p.
each
(
function
(index
,
ele){
var
y = index *
25
;
$
(ele).
css
(
"background-position"
,
"5px -"
+ y +
"px"
)
;
})
; 这里算是他的小核心代码了 就是首先将p标签的each一下 获得他的索引 然后 y=索引*25 这个的意思就是为了让log按照一定得方式显示出来 首先第一个5px的意思是 在x坐标上面向右移动5xp 然后-是为了y坐标做准备的 第一个y就是0第二个就是-25px就相当于吧图片向上面拉了25个px
var
div =
$
(
"<div></div>"
)
,
speed =
388
,
$p =
$
(
".wrapper p"
)
;
$p.
before
(div)
; 这是创建div的代码
$
(
this
).
children
(
"div,p"
).
stop
().
animate
({
"bottom"
:
0
}
,
speed)
; 这啷个就是动画了 当你碰到了得时候 那么久让他底部等于0 然后熟读设置好了
$
(
this
).
children
(
"div,p"
).
stop
().
animate
({
"bottom"
:-
26
}
,
speed)
; 然后这是他的下一步
总结： 这个和前面的都是差不多的 首先来说html的代码 这又是一个ul li的格式 只是li里面还加上一个p标签 p标签是用来放log的 其实还有一个div的 但是这个div他让他到js里面实现了，现在我们来看css的代码 首先还是不可避免的 wrap的格式 还有li的格式 最后就是p标签和 div的格式了他们是在底部的 还有div是不平铺的 代码为 no-repeat 然后就是开始了js的代码 首先创建div 因为开始html里面史美仪div的，然后放在p标签的旁边 before这个是dom操作 然后用feadto来控制它的不透明度，再有运用到了each的方法了 就是将元素和索引链接起来 从而得到log 方法就是运营background-position 解决了这个问题后就是最后一个问题了 就是 当你碰到了那个后就弹出下面的弹出框 方法是创建一个函数 当你碰到的时候就建立一个动画将他的底部=0，然后逗号 另一个函数就是底部等于-26 就拉下来了 这个的意思就是当你鼠标移开的时候他就是这个后果。所以这个就是所有解析
$
(
".wrapper div"
).
fadeTo
(
0
,
0.5
)
; 这是调整不透明度的 时间为0 然后不透明度为0.5 没学过的东西
7.两侧跟随的广告的知识点
$
(
function
(){
$
(
window
).scroll(
function
() { 这里是全局下面的scroll 这个是鼠标的滚轮的意思
var
scrollTop =
$
(
document
).
scrollTop
()
; 这个是创建一个变量 来存储这个鼠标从竖直方向下滚动了多少的距离
$
(
".left,.right"
).
stop
().
animate
({
"top"
: scrollTop +
50
}
,
600
)
;
})
; 然后这里就是 将两边的港澳在顶端加上这个鼠标滚动的距离 然后设置一个时间在这个时间内家上去使之形成一个动画
})
;
其实啊 就是这两串代码
总结：首先是先创建两个a标签 打开着两个图片 然后就是n个我们的开始是最长的电影 然后开始了css的style的部分首先着两个图片要把定位元素变成absolute 然后设置一个左边 一个右边 这样css的代码就完毕了 然后开始js的代码首先求出他的鼠标滚动的距离 当然这些都是在一个全局scroll里面的函数进行的 首先在里面要算出它滚动了多少的距离 ，然后很简单了 ，下一步就是将两个图片的动画取消 然后开始新的动画 动画就是 将这个的顶端加上鼠标滚动的距离就好哦了 这样这个两栏跟随的广告就完毕了
8.仿京东侧边栏的知识点
<div
class=
"jd dian"
>
<img
src=
"images/dian.png"
alt=
""
/>
</div> 首先 这里我们学到了一个知识点 就是class里面如果有空格的话 那么他就是两个class
left
:
50
%
; left50%的意思就是 之间这个图片在靠中间这个缝
background
:
url
(
images/bg.png
)
no-repeat
; 这里运用的就是我们昨天的知识点 就是不平铺的意思
$sideBarMenu.
each
(
function
(index
,
ele) {
num = index *
55
;
$
(ele).
css
(
"background-position"
,
"0 -"
+num +
"px"
)
;
})
; 这里也是昨天的那个方法就是用于 log的图片的切换的
if
(TOP >=
$
(
".mei"
).
offset
().
top
){
$sideBarMenu.
eq
(
3
).
addClass
(
"current"
).
siblings
().
removeClass
()
;这一句话也是挺重要的 意思是当鼠标划过的距离 大鱼这个mei这个顶端的坐标的时候 那么这个mei 就加入一个class 然后他的兄弟就减少这个class
}
else if
(TOP >
0
){
$subbnav.
fadeIn
()
; 着两句话的意思是当鼠标滑动的距离大于1 的时候那么 就淡入 否则就淡出
}
else
{
$subbnav.
fadeOut
()
;
}
$sideBarMenu.
click
(
function
() {
$
(
"html,body"
).
stop
().
animate
({
// 给具有相同效果的元素添加 共同的样式 jd
"scrollTop"
:
$
(
".jd"
).
eq
(
$
(
this
).
index
()).
offset
().
top
}
,
1000
)
;
})
; 这里就是当点击到了这个li的时候那么久给她添加一个效果 就是网页的滑轮放到这个图片的顶端上面 就是定位了 这个发方法我也要学会的 back结束 就是 把滑轮放到0的那个位置 时间你自己设置就好了 当然animate这个是动画的方法
总结：其实看懂了也没有那么难 ，差不多就是那几个核心代码 然后你再懂一些就可以了 首先第一步 我们先把图片放进去 ，图片要多个这个是用来定位用的，然后图片是要两个标签 第一个标签大家是一样的 ，第二个标签大家不一样 不一样的标签用来区分图片的位置 一样的标签用来输出他的样式， 好了 我们开始css的部分 首先是将他们的自带样式都给清楚掉 然后图片也按照一定的规格摆放起来，下一步就是ul的样式了 首先确定他的位置 然后是不显示的模式 ul里面的li呢 颜色设置好，框框 再还有背景颜色 背景颜色也要设置成不平铺的模式，最后就是设置他的碰到了 出来的东西 就是字体变下字体颜色变下边框什么什么的都要变 这里添加了
current 这个标签 你就当他有就好了
然后就开始了js的部分 首先我们是要把那个log图片给显示出来 这就是each（）这个方法 接受两个参数第一个是索引第二个是参数 然后弄好了这个就开始了下一步 就是滚动的时候当你的滚动到了一定的高度的时候他就自动切换current 这个方法就相当于鼠标碰到了后就显示的东西 临界点事这个图片的顶部 然后没有碰到的时候 就把这个淡出 最后一步就是点击了的时候 就给他们索引 到当前的元素 然后把他的滑轮移动到那个图片的顶端 当点击返回的时候就把那个滑轮移动到top==0的时候 好了 这就是他的所有方法
9.仿腾讯固定导航栏
$
(
window
).scroll(
function
() {
var
docSccrollTop =
$
(
document
).
scrollTop
()
;
if
(docSccrollTop > H){
$
(
".nav"
).
css
({
"position"
:
"fixed"
,
"top"
:
0
})
;
// 此时 nav的位置固定，如果不设置 main部分的margin-top的话，将有一部分内容被挡住 nav的高度+开始设置的20
$
(
".main"
).
css
(
"margin-top"
,
106
)
;
}
else
{
$
(
".nav"
).
css
({
"position"
:
"static"
})
;
/*静态定位*/
$
(
".main"
).
css
(
"margin-top"
,
20
)
;
} 这里就是 当没有移动的时候那个 nav就是静态的效果 main继续距顶端20x
})
;
总结：这个的方法还是简单的 就是首先定义三个图片 然后让一个图片在在滑轮滑到第一个图片的高度的时候中间那个图片就固定 然后第三个图片就把他的top定位到一个坐标 把好了 完毕