Question

我的所有代码现在都是静态图片。但是我希望它从右侧滑入。有人可以告诉我我应该导入哪个jquery库并且我的代码是对的吗？

<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>

<script>
  $(document).ready(function(){
     $("#mepicintro").show("fade",500);
     $("#mepicintro").delay(5500).hide("slide",{direction:'right'},500);
  });  
</script>


<div class="eight columns">
<img id="mepicintro" src="images/my_computer.png"  width="400px" height"400px">
</div>

Answer 1

CSS3动画！

＆＃13;

$("button").click(function(){
    $("#slider").addClass("in");
});

＆＃13;

body{
  overflow:hidden;
  }

#slider{
  -webkit-transition: 2s ease-in-out;
    -moz-transition: 2s ease-in-out;
    -o-transition: 2s ease-in-out;
    transition: 2s ease-in-out;
  
  display: block;
  height: 300px;
  width: 100%;
   position: absolute;
  background:green;
  top:30px;
  left:100%;
 
  }

#slider.in{
  left:0;
  }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Slide in!</button>
<div id="slider"></div>

＆＃13;

Answer 2

有很多方法可以实现这一点，就像一个例子，您可以使用jQuery animate()在不使用任何其他库的情况下滑动图像。将overflow:hidden;添加到body以避免显示滚动条并将图片放在外面：

＆＃13;

 $(document).ready(function () {
     $('#mepicintro').animate({
         'left': '300px'
     }, 500);
 });

＆＃13;

body {
    overflow:hidden;
}
#mepicintro {
    position:absolute;
    right:-300px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="eight columns">
    <img id="mepicintro" src="http://placekitten.com/g/300/300" width="300px" height="300px"/>
</div>

＆＃13;

如何让图像滑入我网站的页面？

2 个答案: