电子相册特效
引言
初入前端这行不久,对很多东西还是很陌生,页面布局、合理使用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<$pictureWallPic.length-1){ 31 picPage++; 32 }else if(picPage == $pictureWallPic.length - 1){ 33 picPage=0; 34 } 35 } 36 37 function becomeBig($own,hasClassPicRow){ 38 var $mask=$('.mask'), 39 pictureWallWidth=$('.pictureWall').width(), 40 pictureWallHeight=$('.pictureWall').height(); 41 42 picLeft=$own.css('left'); 43 picTop=$own.css('top'); 44 45 $own.toggleClass('bigCenter'); 46 $mask.fadeIn(); //显示遮罩层。 47 //放大图片,移动div 48 if(hasClassPicRow){ 49 for(var i = 120; i < 720; i+=20){ 50 $own.find("img").animate({"width": i+"px", "height": i/1.5+"px"},2); 51 $own.animate({"left": (pictureWallWidth-i)/2+"px", "top": (pictureWallHeight-i/1.5)/2+"px"},2); 52 } 53 }else{ 54 for(var i = 80; i < 480; i+=20){ 55 $own.find("img").animate({"width": i+"px", "height": i*1.5+"px"},2); 56 $own.animate({"left": (pictureWallWidth-i)/2+"px", "top": (pictureWallHeight-i*1.5)/2+"px"},2); 57 } 58 } 59 } 60 61 function becomeSmall($own,hasClassPicRow){ 62 var $mask = $(".mask"), 63 pictureWallWidth = $(".picture-wall").width(), 64 pictureWallHeight = $(".picture-wall").height(); 65 66 if(hasClassPicRow){ 67 for(var i = 720; i >= 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.cnblogs.com/sword-successful/ |
博客版权: | 本文以学习、研究和分享为主,欢迎转载,但必须在文章页面明显位置给出原文连接。 如果文中有不妥或者错误的地方还望高手的你指出,以免误人子弟。如果觉得本文对你有所帮助不如【推荐】一下!如果你有更好的建议,不如留言一起讨论,共同进步! 再次感谢您耐心的读完本篇文章。 |