我被困在一个Drupal项目中,我想知道如何得到这个效果请左图像将展开到右侧点击和相同我想正确的图像,这将扩大点击左,我想要知道是否可以通过css3完成或JavaScript需要和如何请...这是我的问题的两个图像,我主要作为前端开发人员,并知道后端,所以如果任何人可以帮助请.. ..!仅滑动图像css3或JavaScript需要?
http://s14.postimg.org/aahx57ke9/img.png
我被困在一个Drupal项目中,我想知道如何得到这个效果请左图像将展开到右侧点击和相同我想正确的图像,这将扩大点击左,我想要知道是否可以通过css3完成或JavaScript需要和如何请...这是我的问题的两个图像,我主要作为前端开发人员,并知道后端,所以如果任何人可以帮助请.. ..!仅滑动图像css3或JavaScript需要?
http://s14.postimg.org/aahx57ke9/img.png
如果你想滑动并停留在该位置让鼠标按钮去后的图像,你必须使用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的精彩世界。
非常感谢,很棒,真的帮助我! – 2015-03-19 11:28:53
这是纯粹的前端问题。页面后面的“什么”并不重要。 – MilanG 2015-03-19 08:13:33