|
[tr][td]
图片：142453k2zowtysyxzowjz5.jpg  源码下载 在线演示 在这篇文章中，我们将分享有关如何创建一个弹出图像滑块。我们进行click事件时使用CSS3过渡来变换动画。此图片滑块不会做幻灯片上显示的图像，所有的图像将被定位堆放。当用户点击的图像，将图像堆栈移动到左侧的外和向后移动与旋转作用，并定位在最上面。 HTML Busby Theme Gridly Theme CSS #itemdescription { position: relative; width: 400px; margin: 0 auto; left: 6em; top: 2em; } #itemdescription span { display: none; } #itemlist { display: block; width: 400px; margin: 3em auto; position: relative; transform-style: preserve-3d; } #itemlist img { position: absolute; cursor: pointer; left: 0; box-shadow: 0px 15px 50px rgba(0,0,0,0.4); } #itemlist img:hover { top: -5px; } #itemlist img.item-0 { z-index: 4; transform: scale(1); } #itemlist img.item-1 { z-index: 3; left: -80px; transform: scale(0.9); } #itemlist img.item-2 { z-index: 2; left: -160px; transform: scale(0.8); } #itemlist img.item-3 { z-index: 1; left: -240px; transform: scale(0.7); } .transition { transition: 0.5s ease-out; } .show { animation: show 1s linear; } @keyframes show{ 25% { left: -450px; } 50% { z-index: 5; left: -500px; transform: rotate3d(0,1,0,0deg); } 70% { z-index: 5; left: -250px; transform: rotate3d(0,1,0,180deg); } 100% { z-index: 5; left: 0px; transform: rotate3d(0,1,0,360deg); } } js //Initiliaze var itemList, item, className, thisItem, newOrder, itemDesc, desc; itemList= $('#itemlist'); item= itemList.children('img'); itemDesc= $('#itemdescription'); desc= itemDesc.children('span'); //Add class name for each item item.each(function(index) { className= 'item-' + index; $(this).addClass(className).attr('data-order', index); }); //Show first item description desc.filter(':first-child').fadeIn(); //On clicked fire animation item.on('click', function() { thisItem= $(this); thisOrder = parseInt(thisItem.attr('data-order')) - 1; thisItem.addClass('show'); //Reorder item position item.on('animationend webkitAnimationEnd MSAnimationEnd oAnimationEnd', function() { thisItem.removeClass().addClass('item-0').attr('data-order', '0'); //Show selected item description desc.hide(); desc.filter('[data-for=' + thisItem.attr('id') + ']' ).fadeIn('fast'); }); //Move siblings items backward window.setTimeout(function () { for(var i = thisOrder; i >= 0; i--) { //Reorder item position movedItem = item.filter('[data-order=' + i + ']'); newOrder= parseInt(movedItem.attr('data-order')) + 1; className = 'item-' + newOrder; //Move them with transition movedItem.removeClass().addClass('transition ' + className).attr('data-order', newOrder); //Remove their transition item.on('transitionend webkitTransitionEnd MSTransitionEnd oTransitionEnd', function() { item.removeClass('transition'); }); } }, 500); [/td][/tr] |
|
