[Java教程]电子相册特效

0 2015-05-17 20:00:20

引言

初入前端这行不久，对很多东西还是很陌生，页面布局、合理使用Html标签、CSS属性、js书写习惯等等还都不是很熟悉，所以看到感兴趣的东西就想看看源码，看看实现原理，用来学习。 前几天看到tattoo写的一个jquery版结婚电子请帖，对首页的相册效果感兴趣，所以把源码打开看了两遍，自己再敲了一遍。

思路分析

1、页面使用embed标签内置了音乐。 只是没有循环播放。

2、CSS3使用了属性box-shadow、border-radius属性。

3、相册总体使用了postion布局， 共12张图片，分别用position:absolute固定位置。

4、图片按照索引顺序放大和缩小。图片从容器中心位置开始放大，放大后间隔2秒，回到容器左上角，再依次回到原始位置。

效果

关键代码1 var sceneObject={ 2 init:function(){ 3 this._enterAlbum(); 4 }, 5 6 _enterAlbum:function(){ 7 var timer=""; 8 9 autoPicWall();10 timer=setInterval(autoPicWall,4000);11 12 }13 }14 15 var picPage=0, //当前第几张图片正在进行放大或缩小。16 picLeft,17 picTop;18 19 function autoPicWall(){20 var $pictureWallPic=$(".pictureWall div"),21 $own =$pictureWallPic.eq(picPage),22 isBig=$own.hasClass('bigCenter'),23 hasClassPicRow=$own.hasClass('picRow');24 25 becomeBig($own,hasClassPicRow);26 27 //图片放大后，间隔2秒自动缩小。28 setTimeout(becomeSmall($own,hasClassPicRow),2000);29 30 if(picPage= 120; i-=40){68 $own.find("img").animate({"width": i+"px", "height": i/1.5+"px"},2);69 /* 图片缩小到中心位置 */70 $own.animate({"left": (pictureWallWidth-i)/2+"px", "top": (pictureWallHeight-i/1.5)/2+"px"},2);71 }72 }else{73 for(var i = 480; i >= 80; i-=40){74 $own.find("img").animate({"width": i+"px", "height": i*1.5+"px"},2);75 /* 图片缩小到中心位置 */76 $own.animate({"left": (pictureWallWidth-i)/2+"px", "top": (pictureWallHeight-i*1.5)/2+"px"},2);77 }78 }79 80 /* 图片缩小到中心位置后，回到原始位置 */81 $own.animate({"left": picLeft, "top": picTop},400,function(){82 $mask.fadeOut(); /* 隐藏遮罩层 */83 $own.toggleClass("bigCenter"); /* 去除放大的class属性 */84 });85 }86 87 $(function(){88 sceneObject.init();89 });

总结

需要下载源代码的直接去原作者软文里下。http://www.cnblogs.com/tattoo/p/4500329.html

本文网址：http://www.shaoqun.com/a/117048.html

*特别声明：以上内容来自于网络收集，著作权属原作者所有，如有侵权，请联系我们：admin@shaoqun.com。

0