这是一款使用纯js和CSS3制作的仿宝丽莱Polaroid图片相册画廊。开始时所有的图片被制作为Polaroid图片,堆叠放在一起。当用户使用鼠标hover图片时,图片会展开。点击图片时,最上面的图片会切换到最下面去。
使用方法
HTML结构
该宝丽莱Polaroid图片相册画廊的基本HTML结构如下:
<div class='images'> <img class='image' src='img/1.jpg'> <img class='image' src='img/2.jpg'> <img class='image' src='img/3.jpg'> <img class='image' src='img/4.jpg'> <img class='image' src='img/5.jpg'> </div>
CSS样式
宝丽莱Polaroid图片相册画廊的基本CSS样式如下:
.image { position: absolute; top: 50%; left: 50%; height: 200px; width: 200px; margin-top: -110px; margin-left: -105px; border: 5px solid #fff; border-bottom-width: 15px; -moz-box-shadow: 0 2px 5px rgba(30, 30, 30, 0.25); -webkit-box-shadow: 0 2px 5px rgba(30, 30, 30, 0.25); box-shadow: 0 2px 5px rgba(30, 30, 30, 0.25); z-index: 2; -moz-transition: -moz-transform 0.3s ease-in-out; -o-transition: -o-transform 0.3s ease-in-out; -webkit-transition: -webkit-transform 0.3s ease-in-out; transition: transform 0.3s ease-in-out; } .image:first-child { -moz-transform: rotate(8deg); -ms-transform: rotate(8deg); -webkit-transform: rotate(8deg); transform: rotate(8deg); } .image:nth-child(2) { -moz-transform: rotate(2deg); -ms-transform: rotate(2deg); -webkit-transform: rotate(2deg); transform: rotate(2deg); } .image:nth-child(3) { -moz-transform: rotate(-3deg); -ms-transform: rotate(-3deg); -webkit-transform: rotate(-3deg); transform: rotate(-3deg); } .image:nth-child(4) { -moz-transform: rotate(-10deg); -ms-transform: rotate(-10deg); -webkit-transform: rotate(-10deg); transform: rotate(-10deg); } .image:last-child { -moz-transform: rotate(-5deg); -ms-transform: rotate(-5deg); -webkit-transform: rotate(-5deg); transform: rotate(-5deg); }
当鼠标hover图片时,使用下面的代码来制作图片展开动画效果。
.images:hover .image:nth-child(4) { -moz-transform: rotate(10deg) translateX(50px); -ms-transform: rotate(10deg) translateX(50px); -webkit-transform: rotate(10deg) translateX(50px); transform: rotate(10deg) translateX(50px); } .images:hover .image:nth-child(3) { -moz-transform: rotate(3deg) translateX(75px); -ms-transform: rotate(3deg) translateX(75px); -webkit-transform: rotate(3deg) translateX(75px); transform: rotate(3deg) translateX(75px); } .images:hover .image:nth-child(2) { -moz-transform: rotate(-2deg) translateX(-50px); -ms-transform: rotate(-2deg) translateX(-50px); -webkit-transform: rotate(-2deg) translateX(-50px); transform: rotate(-2deg) translateX(-50px); } .images:hover .image:first-child { -moz-transform: rotate(-8deg) translateX(-75px) translateY(-10px); -ms-transform: rotate(-8deg) translateX(-75px) translateY(-10px); -webkit-transform: rotate(-8deg) translateX(-75px) translateY(-10px); transform: rotate(-8deg) translateX(-75px) translateY(-10px); } .image.slide-right { -moz-transform: rotate(290deg) translateX(250px); -ms-transform: rotate(290deg) translateX(250px); -webkit-transform: rotate(290deg) translateX(250px); transform: rotate(290deg) translateX(250px); } .image.slide-left { -moz-transform: rotate(-290deg) translateX(-250px); -ms-transform: rotate(-290deg) translateX(-250px); -webkit-transform: rotate(-290deg) translateX(-250px); transform: rotate(-290deg) translateX(-250px); } .image.back { z-index: 1; }
JavaScript
最后通过下面的javascript代码来完成鼠标点击的交互动画效果。
(function() { var cssTransition, imageOffset, imageWidth, images, queue, timeout, touch; cssTransition = function() { var body, i, len, style, vendor, vendors; body = document.body || document.documentElement; style = body.style; vendors = ['Moz', 'Webkit', 'O']; if (typeof style['transition'] === 'string') { return true; } for (i = 0, len = vendors.length; i imageWidth / 2) { direction = 'slide-right'; } else { direction = 'slide-left'; } lastClassList = images.lastElementChild.classList; lastClassList.add(direction); return setTimeout(function() { lastClassList.remove(direction); lastClassList.add('back'); return setTimeout(function() { images.insertBefore(images.lastElementChild, images.firstElementChild); lastClassList.remove('back'); return queue = false; }, timeout[0]); }, timeout[1]); }, false); }).call(this);
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!