僅滑動圖像css3或JavaScript需要？

Question

我被困在一個Drupal項目中，我想知道如何得到這個效果請左圖像將展開到右側點擊和相同我想正確的圖像，這將擴大點擊左，我想要知道是否可以通過css3完成或JavaScript需要和如何請...這是我的問題的兩個圖像，我主要作爲前端開發人員，並知道後端，所以如果任何人可以幫助請.. ..！

http://s14.postimg.org/aahx57ke9/img.png

Answer 1

如果你想滑動並停留在該位置讓鼠標按鈕去後的圖像，你必須使用JavaScript。

我推薦jQuery。下面是一個例子，說明如何使用JavaScript來滑動元素，並使用jQuery動畫無縫地疊加它們;底部的JFiddle鏈接會顯示HTML，CSS和JavaScript。它應該完全適用於您的圖像情況，假設圖像是絕對定位的。

的JavaScript：

var b1 = $('#block1'); 
var b2 = $('#block2'); 

function slide(block, left, callback) 
{ 
    block.animate({ 
     'left': left 
    }, 750, function() { 
     // Do this after finished animating. 
     if (callback) callback(); 
    }); 
} 

b1.on('click', function() { 
    // Only slide if not already done. 
    if (b1.css('left') != '-50px') { 
     // First slide both elements so they meet at the, 
     // middle, then switching the z-index is not noticeable. 
     slide(b1, '-250px'); 
     slide(b2, '250px', function() { 
      // After animating, superimpose b1 over b2 
      // by changing z-index order, then animate 
      // the rest of the way. 
      b1.css('z-index', '1'); 
      b2.css('z-index', '0'); 
      slide(b1, '-50px'); 
     }); 
    } 
}); 

b2.on('click', function() { 
    // Same here but with right element. 
    if (b2.css('left') != '50px') { 
     slide(b1, '-250px'); 
     slide(b2, '250px', function() { 
      b1.css('z-index', '0'); 
      b2.css('z-index', '1'); 
      slide(b2, '50px'); 
     }); 
    } 
}); 

檢查它在這裏的行動：https://jsfiddle.net/86sr3okk/6/

歡迎的JavaScript的精彩世界。