使用jQuery和CSS3弹出图像滑块
源码下载 在线演示
在这篇文章中,我们将分享有关如何创建一个弹出图像滑块。我们进行click事件时使用CSS3过渡来变换动画。此图片滑块不会做幻灯片上显示的图像,所有的图像将被定位堆放。当用户点击的图像,将图像堆栈移动到左侧的外和向后移动与旋转作用,并定位在最上面。
HTML
<div id="container"> <div id="itemlist"> <img src="images/busby.jpg" alt="Busby" id="busby"> <img src="images/gridly.jpg" alt="Gridly" id="gridly"> <!-- to n image --> </div> <div id="itemdescription"> <span data-for="busby">Busby Theme</span> <span data-for="gridly">Gridly Theme</span> <!-- to n description --> </div></div>
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
//Initiliazevar itemList, item, className, thisItem, newOrder, itemDesc, desc; itemList= $('#itemlist');item= itemList.children('img'); itemDesc= $('#itemdescription');desc= itemDesc.children('span'); //Add class name for each itemitem.each(function(index) { className= 'item-' + index; $(this).addClass(className).attr('data-order', index);}); //Show first item descriptiondesc.filter(':first-child').fadeIn();//On clicked fire animationitem.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 backwardwindow.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);
在这篇文章中,我们将分享有关如何创建一个弹出图像滑块。我们进行click事件时使用CSS3过渡来变换动画。此图片滑块不会做幻灯片上显示的图像,所有的图像将被定位堆放。当用户点击的图像,将图像堆栈移动到左侧的外和向后移动与旋转作用,并定位在最上面。
HTML
<div id="container"> <div id="itemlist"> <img src="images/busby.jpg" alt="Busby" id="busby"> <img src="images/gridly.jpg" alt="Gridly" id="gridly"> <!-- to n image --> </div> <div id="itemdescription"> <span data-for="busby">Busby Theme</span> <span data-for="gridly">Gridly Theme</span> <!-- to n description --> </div></div>
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
//Initiliazevar itemList, item, className, thisItem, newOrder, itemDesc, desc; itemList= $('#itemlist');item= itemList.children('img'); itemDesc= $('#itemdescription');desc= itemDesc.children('span'); //Add class name for each itemitem.each(function(index) { className= 'item-' + index; $(this).addClass(className).attr('data-order', index);}); //Show first item descriptiondesc.filter(':first-child').fadeIn();//On clicked fire animationitem.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 backwardwindow.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);
【使用jQuery和CSS3弹出图像滑块】相关文章
3. jQuery+CSS3过渡的图像滑块Flux Slider
本文来源:https://www.51html5.com/a1206.html
﹝使用jQuery和CSS3弹出图像滑块﹞相关内容
- 11个新鲜出炉的jQuery图像滑块插件
- 10个最好最实用的jQuery图像滑块插件
- 利用Jquery和CSS3 技术制作一副幻灯片
- 一个利用jQuery / CSS3技术的旋转的图像编码幻灯片
- Cufon, jQuery和CSS3实现的超强飞出菜单
- jQuery和CSS3定制HTML5视频播放器
- Cufon, jQuery和CSS3实现的超强飞出菜单
- 一款基于jquery和css3的响应式二级导航菜单
- 一款基于jquery和css3的头像恶搞特效
- 一款jquery和css3实现的卡通人物动画特效