jQuery滑動方式上下左右滾動效果

antzone發表於2018-07-09
jQuery

本章節介紹一下使用jQuery實現的div塊上下左右以動畫方式實現移動效果。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
#box{
  width:200px; 
  height:200px;
}
#first{
  text-align:center; 
  width:200px; 
  height:200px;
  position:absolute;
}
#sec{
  text-align:center; 
  width:200px; 
  height:200px; 
  display:none;
  position:absolute;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("#btn").unbind().click(function(){
    $("#first").hide();
    $("#sec").css("left","-200px").animate({"left":"0px"},500).show();
  });
  $("#btn2").unbind().click(function(){
    $("#sec").hide();
    $("#first").css("left","200px").animate({"left":"0px"},500).show();
  });
  $("#btn3").unbind().click(function(){
    $("#first").hide();
    $("#sec").css("top","200px").animate({"top":"0px"},500).show();
  });
  $("#btn4").unbind().click(function(){
    $("#sec").hide();
    $("#first").css("top","-200px").animate({"top":"0px"},500).show();
  });
});
</script>
</head>
<body>
<div id="box">
  <div id="first">
    <p>螞蟻部落一</p>
    <p>螞蟻部落二</p>
    <p>螞蟻部落三</p>
    <p>螞蟻部落四</p>
    <p>螞蟻部落五</p>
  </div>
  <div id="sec">
    <p>螞蟻部落一</p>
    <p>螞蟻部落二</p>
    <p>螞蟻部落三</p>
    <p>螞蟻部落四</p>
    <p>螞蟻部落五</p>
  </div>
</div>
<div style="width:200px; height:50px;">
  <input type="button" value="向右滾動" id="btn"/>
  <input type="button" value="向左滾動" id="btn2"/>
  <input type="button" value="向上滾動" id="btn3"/>
  <input type="button" value="向下滾動" id="btn4"/>
</div>
</body>
</html>

上面的程式碼實現了動畫移動效果，下面介紹一下它的實現過程。

一.程式碼註釋:

（1）.$(document).ready(function(){})，當文件結構完全載入完畢再去執行函式中的程式碼。

（2）. $("#btn").unbind().click(function(){}）,首先解綁所有的事件處理函式（這裡沒有此操作），然後再註冊click事件處理函式。

（3）.$("#first").hide()，先將不需要的元素隱藏。

（4）.$("#sec").css("left","-200px").animate({"left":"0px"},500).show(),首先瞬間將元素的left屬性值設定為-200px，這個時候元素就看不到了，被左邊緣隱藏，然後以動畫的方式設定此元素顯示出來。

二.相關閱讀:

（1）.hide()參閱jQuery hide()一章節。

（2）.css()方法參閱jQuery css()一章節。

（3）.animate()方法參閱jQuery animate()一章節。

相關文章