Question

我已经看到了一个非常酷的滑块我想重新制作，但是，我想首先尝试使用纯HTML和CSS。（原始的只是javascript，但是它已经有几年了，来自一个非常不专业的来源。）这只是对概念的一种考验，所以没有把它放在交叉浏览器等东西上。

另外，我不知道如何调用它，所以我不知道如何谷歌。

这个想法是让我们在宽度相等的盒子里说5张照片。在悬停其中一个时，非活动的应该缩小，允许活动的一个完全显示。这就是我的尝试：

＆＃13;

#showcase {
	position: relative;
	width: 760px;	/* 750px + 10px to prevent flickering */
	height: 200px;
}

#showcase:hover > .jewelry {
	width: 75px;
}

.jewelry {
	width: 150px;
	height: 100%;
	float: left;
	transition: width 1s;
}

.jewelry:hover {
	width: 450px !important;
}

.jewelryOtherHovered {
	width: 75px;
}

#jewelry1 {
	margin-left: 5px;
	background-color: red;
}

#jewelry2 {
	background-color: yellow;
}

#jewelry3 {
	background-color: green;
}

#jewelry4 {
	background-color: blue;
}

#jewelry5 {
	background-color: pink;
}

＆＃13;

<div id="showcase">
	<div id="jewelry1" class="jewelry" onMouseOver="(0)" onmouseout="">	</div>
	<div id="jewelry2" class="jewelry"></div>
	<div id="jewelry3" class="jewelry"></div>
	<div id="jewelry4" class="jewelry">	</div>
    <div id="jewelry5" class="jewelry"></div>
</div>

＆＃13;

毋庸置疑，它并没有按我想要的方式运作。尝试盘旋黄色块，当它完成一半时，转到绿色块。这导致整体宽度错误。（粉红色的不会被卡在右侧，希望你明白我的意思。）然后从红色的那个快速地盘旋到黄色的那个然后从底部的盒子里出来。在这种情况下，这是粉红色的显示。

问题是，是否有人知道如何解决它或有没有人有更好的方法？谢谢你的帮助： - ）

Answer 1

你避免使用javascript / jQuery的原因是什么？

根据我的理解，您需要以下内容：

when none are active: the width to be each 20%
when one is active:
       -the active: say 60%
       -the others: 10% each
       -total: 100%

http://jsfiddle.net/messedUP90/ahmdo124/

我刚编辑了这些值。似乎有一些线路没有必要你可以切断。

特殊图像滑块

1 个答案: