准备工作：学习animate函数
animate(params,options)
用于创建自定义动画的函数。
这个函数的关键在于指定动画形式及结果样式属性对象。这个对象中每个属性都表示一个可以变化的样式属性（如“height”、“top”或“opacity”）。
注意：所有指定的属性必须用骆驼形式，比如用marginLeft代替margin-left.
而每个属性的值表示这个样式属性到多少时动画结束。如果是一个数值，样式属性就会从当前的值渐变到指定的值。如果使用的是“hide”、“show”或“toggle”这样的字符串值，则会为该属性调用默认的动画形式。
准备工作：学习animate函数
animate(params,options)
用于创建自定义动画的函数。
这个函数的关键在于指定动画形式及结果样式属性对象。这个对象中每个属性都表示一个可以变化的样式属性（如“height”、“top”或“opacity”）。
注意：所有指定的属性必须用骆驼形式，比如用marginLeft代替margin-left.
而每个属性的值表示这个样式属性到多少时动画结束。如果是一个数值，样式属性就会从当前的值渐变到指定的值。如果使用的是“hide”、“show”或“toggle”这样的字符串值，则会为该属性调用默认的动画形式。
开始制作：图片的放大浏览效果
HTML代码
| 代码如下 | 复制代码 |
|
<body> <div class="imageContainer"> <div id="imageList"> <img class="img_1" src="Images/apple1.jpg" /> <img class="img_2" src="Images/20060603121527136.jpg" /> <img class="img_3" src="Images/20060603121527962.jpg" /> <img class="img_4" src="Images/200611280258374376_T72cAqiHMfS6.jpg" /> </div> </div> </body> |
|
CSS代码
| 代码如下 | 复制代码 |
|
.imageContainer{position:relative;height:200px;width:600px;background:#234} #imageList{height:200px; position:absolute} #imageList img{height:100%;width:150px; position:absolute;} .img_1{left:0;} .img_2{left:150px;} .img_3{left:300px;} .img_4{left:450px;} |
|
/*
说明：
本例中CSS起到非常关键的作用，特别是.imageContainer和#imageList的position样式的取值，不懂的可以研究下position的relative和absolute的作用和相互作用的威力。
*/
JS代码
| 代码如下 | 复制代码 |
|
$("#imageList img").mouseover(function () { $(this).css("z-index", 99999); $(this).animate({ height: "150%", width: 150 * 1.5 }, { queue: false, duration: 1500}); }).mouseout(function () { |
|
/*说明：
1.鼠标移到img上时，height和width放大1.5倍，动画的时间为1500毫秒，z-index最大，保证图片在最上层
2.鼠标移出img时，还原height和width，动画时间为1000毫秒，z-index还原
*/
