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世界。

仅滑动图像css3还是需要javascript？

1 个答案: