我有这个图像列表,因为我正在制作一个图库图像。每当我点击图像有活跃的类正在通过jquery添加,但图像位置的变化也。如何让他们粘性?参见下面的示例拨弄如果单击 图像,其他图像脱落到下一个时间,或者创建一个空的空间Addclass使img元素在位置方面不粘滞
$(".img").click(function() {
$(this).addClass("highlight");
});
我有这个图像列表,因为我正在制作一个图库图像。每当我点击图像有活跃的类正在通过jquery添加,但图像位置的变化也。如何让他们粘性?参见下面的示例拨弄如果单击 图像,其他图像脱落到下一个时间,或者创建一个空的空间Addclass使img元素在位置方面不粘滞
$(".img").click(function() {
$(this).addClass("highlight");
});
您可以使用box-sizing。它会改变项目中的边框。然而,图像会缩小,这将导致一种“眨眼”。
相反,您可以添加填充,高亮显示时会将其删除。如果你喜欢它,你也可以尝试保证金。
$(".img").click(function() {
// Changed to toggle to better show the example.
$(this).toggleClass("highlight");
});
#imageconview {
background-color: black;
height: 430px;
width: 350px;
margin-top: 10px;
margin-left: 50px;
}
#imagecon img {
/* Padding by default */
padding: 5px;
}
#imagecon img.highlight {
border: 5px solid green;
/* Remove padding when highlighted, since it's replaced by border. */
padding: 0px;
}
#imagecon img {
display: inline-block;
float: left;
margin-left: 3px;
margin-top: 2px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</div>
<div id="image_option">
\t <div id="imagecon">
<div img="percon">
<img class="img" src="http://vignette1.wikia.nocookie.net/runescape2/images/d/df/Infernal_mage.png" alt="Smiley face" height="95" width="95">
</div>
<div img="percon">
<img class="img" src="http://vignette1.wikia.nocookie.net/runescape2/images/d/df/Infernal_mage.png" alt="Smiley face" height="95" width="95">
</div>
<div img="percon">
<img class="img" src="http://vignette1.wikia.nocookie.net/runescape2/images/d/df/Infernal_mage.png" alt="Smiley face" height="95" width="95">
</div>
<div img="percon">
<img class="img" src="C:\Users\edmtestuser\Desktop\Marlon Cristuta\images\photo_l_04.jpg" alt="Smiley face" height="95" width="95">
</div>
<div img="percon">
<img class="img" src="http://vignette1.wikia.nocookie.net/runescape2/images/d/df/Infernal_mage.png" alt="Smiley face" height="95" width="95">
</div>
<div img="percon">
<img class="img" src="http://vignette1.wikia.nocookie.net/runescape2/images/d/df/Infernal_mage.png" alt="Smiley face" height="95" width="95">
</div>
<div img="percon">
<img class="img" src="http://vignette1.wikia.nocookie.net/runescape2/images/d/df/Infernal_mage.png" alt="Smiley face" height="95" width="95">
<img class="img" src="http://vignette1.wikia.nocookie.net/runescape2/images/d/df/Infernal_mage.png" alt="Smiley face" height="95" width="95">
\t </div>
</div>
</div>
添加框大小调整到你的亮点类:
.highlight{
border: 5px solid green;
box-sizing: border-box;
}
试试这个
个div > img{ border: 5px solid #f3f5f6; }
使用toggleClass()而不是addClass()
这对类更改和图像位置有什么帮助? – dakab
添加此$(“。img”)。click(function(){ $(this).toggleClass(“highlight”); }); –
Updated Fiddle http://jsfiddle.net/of6hLc0t/2/
#imagecon img.img.highlight{
border: 5px solid green;
}
#imagecon img {
display: inline-block;
float: left;
margin-left: 3px;
margin-top: 2px;
border:5px solid white;//Add this
}
你是什么意思_make他们sticky_? – smoksnes
如果元素被点击,每个元素都不会移动,他们应该保持他们的位置 – MarlZ15199