JQUERY教程

当前位置: HTML5技术网 > JQUERY教程 > 使用jQuery和CSS3弹出图像滑块

使用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);

【使用jQuery和CSS3弹出图像滑块】相关文章

1. 使用jQuery和CSS3弹出图像滑块

2. 使用jQuery和CSS3弹出图像滑块

3. jQuery+CSS3过渡的图像滑块Flux Slider

4. 使用jQuery和CSS3创建一个全屏幕幻灯效果

5. 使用jQuery和CSS3实现一个数字时钟

6. 使用jQuery和CSS3创建Android导航

7. 使用jQuery和CSS3创建一个全屏幕幻灯效果

8. 使用jQuery和CSS3创建Android导航

9. 使用jQuery和CSS3实现一个数字时钟

10. 10个最好最实用的jQuery图像滑块插件

本文来源:https://www.51html5.com/a1206.html

点击展开全部

﹝使用jQuery和CSS3弹出图像滑块﹞相关内容

「使用jQuery和CSS3弹出图像滑块」相关专题

其它栏目

也许您还喜欢