页面特效 UI组件库 菜单导航 窗口特效 幻灯片滑动 图像相册 表单 选项卡 表格 评分星级 手风琴 文本链接 布局 日历 颜色选择器 按钮 图表 html5 提示 ExtJS 在线客服 其他特效 地图 树形控件 移动开发 BootStrap 滑动条 文件上传 表单验证 分页 播放器 Angular

使用jQuery和CSS3弹出图像滑块

图像相册 HTML我帮您 1年前  次浏览
在这篇文章中,我们将分享有关如何创建一个弹出图像滑块。我们进行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
    //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);
           

相关链接

发表评论