我有一个图片库。我想改变' margin-top'每个' .item'为50px高度小于140px的元素(用于响应设计目的)。这就是我到目前为止所拥有的。 我应该在大括号之间写什么才能使它工作? 请访问javascript代码。
var itemHeight = $(".flex-images").find(".item").height();
if(itemHeight<140){
$(this(".item")).style.marginTop = "50px";
}:
&#13;
.item {
cursor: pointer;
max-height: 150px;
min-height:120px;
position: relative;
overflow: hidden;
top:0;
left:0;
}
.item img {
position: absolute;
right:0;
padding:0px;
-webkit-transition: all 300ms ease-out;
-moz-transition: all 300ms ease-out;
-o-transition: all 300ms ease-out;
-ms-transition: all 300ms ease-out;
transition: all 300ms ease-out;
}
.item {
position: absolute;
-webkit-transition: all 300ms ease-out;
-moz-transition: all 300ms ease-out;
-o-transition: all 300ms ease-out;
-ms-transition: all 300ms ease-out;
transition: all 300ms ease-out;
opacity: 0;
}
.item:hover { opacity: 1; }
.item .overtext {
-webkit-transition: all 300ms ease-out;
-moz-transition: all 300ms ease-out;
-o-transition: all 300ms ease-out;
-ms-transition: all 300ms ease-out;
transition: all 300ms ease-out;
transform: translateY(40px);
-webkit-transform: translateY(40px);
text-align:center;
}
.item {
opacity: 1;
transition-delay: 0.1s;
transition-duration: 0.2s;
}
.item:hover,
.item:focus {
opacity: 1;
transform: translateY(0px);
-webkit-transform: translateY(0px);
}
.item .tagline {
transition-delay: 0.2s;
transition-duration: 0.2s;
opacity:0;
margin-top:100px;
}
.item:hover .tagline,
.item:focus .tagline {
opacity: 1;
transform: translateX(0px);
-webkit-transform: translateX(0px);
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<div class="flex-images">
<div class="item " data-w="160" data-h="100"><a href="https://www.google.co.il/"><img src="http://www.freedigitalphotos.net/images/img/homepage/87357.jpg"></a>
<div class="tagline overtext"><a href="http://diginfobettersystem.com/i/images/facebook-logo.png"> <img src="http://diginfobettersystem.com/i/images/facebook-logo.png"style="height:30px;width:30px;"></a>etet
</div>
</div>
</div>
&#13;