jquery如何實現圖片分為上下兩半各自浮動消失

antzone發表於2017-03-21
jQuery

可能在一些應用中，有這樣的效果，就是一張完整的圖片能夠被分隔為兩半，並且能夠分別向上和向下浮動消失，這通常會應用與全屏效果中，本章節就通過程式碼例項介紹一下如何實現此功能，當然這裡並不是全屏只是做一下演示，讓大家知道實現的原理即可。

程式碼如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
body{
  margin:0;
  padding:0;
}
.wrap{
  overflow:hidden;
  position:fixed;
  z-index:99999;
  width:100%;
  top:0;
  left:0;
}
.div{
  overflow:hidden;
  position:absolute;
  width:100%;
}
.d{
  background:url(mytest/demo/cite.jpg) center center no-repeat;
  height:100%;
}
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  var h=$(window).height();
  var h1=h/2;
  $('#d1,#d2').height(h1);
  $('.wrap,.d').height(h);
  $('#d2').css('top',h1);
  $('#d2 .d').css('margin-top', -h1);
  setTimeout(function(){
    $('#d1').animate({'top':-h/2},3000);
    $('#d2').animate({'top':h},3000,function(){
      $('.wrap').remove();
    });
  }, 2000);
})
</script>
</head>
<body>
<div class="wrap">
  <div id="d1" class="div">
    <div class="d"></div>
  </div>
  <div id="d2" class="div">
    <div class="d"></div>
  </div>
</div>
</body>
</html>

二.相關閱讀:

1.height()函式可以參閱jQuery height()一章節。

2.css()函式可以參閱jQuery css()一章節。

3.animate()函式可以參閱jQuery animate()一章節。

4.setTimeout()函式可以參閱setTimeout()一章節。

5.remove()函式可以參閱jQuery remove()一章節。

相關文章