Question

我通过使用来自互联网的引用及其工作正常创建了一个div ...只是我想知道我是否可以从下面而不是从上面引入其他图像。

HTML

<div id="slide1_container" class="shadow">
    <img src="images/Turtle.jpg" id="one"/>
    <img src="images/Windows Logo.jpg" id="two" />
</div>
</div>

CSS

#slide1_container {
  width:450px;
  height:281px;
  overflow:hidden; /* So the sliding bit doesn't stick out. */
}

#one {
  padding:0;
  margin:0;
  float:left;
}

#two {
  padding:0;
  margin:0;
  float:left;
  -webkit-transition:all 0.5s ease;
  -moz-transition:all 0.5s ease;
  -o-transition:all 0.5s ease;
  transition:all 0.5s ease;
  z-index:1;
}

的Javascript

$(document).ready(function() {
  $('#slide1_container').mouseover(function(){
    $("#two").css("transform","translateY(-281px)");
    });
});
$(document).ready(function() {
  $('#slide1_container').mouseout(function(){
    $("#two").css("transform","translateY("+$(this).index() * -281+"px)");
    });
});

Answer 1

为什么不使用jquery的slideup和slidingown？它也会照顾你的css。

进一步阅读：http://api.jquery.com/category/effects/sliding/

如何在div中从顶部滚动内容？

1 个答案: