jQuery元素動畫方式滑動效果

admin發表於2017-04-05
原文網址 : https://www.softwhy.com/article-5997-1.html
jQuery動畫

本章節分享一段程式碼例項，它實現了利用jQuery的animate()方法實現元素滑動效果。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
body{
  font-family: 'Signika Negative', sans-serif;
}
#head{
  z-index:10;
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:30px;
  border-color:#0055ff;
  border-width:0 0 10px 0;
  border-style:solid;
  background:#0088ff;
}
#head li{
  list-style:none;
  float:left;
  display:block;
  height:30px;
  padding:0 10px;
  cursor:pointer;
  font-size:26px;
}
#head li:hover{
  color:#ffffff;
  background:#0055ff;
  border-color:#0011ff;
  border-width:0 0 10px 0;
  border-style:solid;
}
#box{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  overflow:hidden;
}
#bg{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  overflow:visible;
}
.cell{
  width:100%;
  height:100%;
  overflow:auto;
}
.list{
  position:absolute;
  top:50%;
  left:50%;
  width:800px;
  height:600px;
  margin:-300px 0 0 -400px;
  background:#0088ff;
}
#class_1{
  position:absolute;
  top:0;
  left:0;
}
#class_2{
  position:absolute;
  top:0;
  left:100%;
}
#class_3{
  position:absolute;
  top:0;
  left:200%;
}
#class_4{
  position:absolute;
  top:100%;
  left:0;
}
#class_5{
  position:absolute;
  top:100%;
  left:100%;
}
#class_6 {
  position:absolute;
  top:100%;
  left:200%;
}
#class_7{
  position:absolute;
  top:200%;
  left:0;
}
#class_8{
  position:absolute;
  top:200%;
  left:100%;
}
#class_9{
  position:absolute;
  top:200%;
  left:200%;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("#l_01").click(function(){
    $("#bg").stop().animate({top:0+"%",left:0+"%"},"slow");
  });
  $("#l_02").click(function(){
    $("#bg").stop().animate({top:0+"%",left:-100+"%"},"slow");
  });
  $("#l_03").click(function(){
    $("#bg").stop().animate({top:0+"%",left:-200+"%"},"slow");
  });
  $("#l_04").click(function(){
    $("#bg").stop().animate({top:-100+"%",left:0+"%"},"slow");
  });
  $("#l_05").click(function(){
    $("#bg").stop().animate({top:-100+"%",left:-100+"%"},"slow");
  });
  $("#l_06").click(function(){
    $("#bg").stop().animate({top:-100+"%",left:-200+"%"},"slow");
  });
  $("#l_07").click(function(){
    $("#bg").stop().animate({top:-200+"%",left:0+"%"},"slow");
  });
  $("#l_08").click(function(){
    $("#bg").stop().animate({top:-200+"%",left:-100+"%"},"slow");
  });
  $("#l_09").click(function(){
    $("#bg").stop().animate({top:-200+"%",left:-200+"%"},"slow");
  });
});
</script>
</head>
<body>
<div id="head">
  <li id="l_01">1</li>
  <li id="l_02">2</li>
  <li id="l_03">3</li>
  <li id="l_04">4</li>
  <li id="l_05">5</li>
  <li id="l_06">6</li>
  <li id="l_07">7</li>
  <li id="l_08">8</li>
  <li id="l_09">9</li>
</div>
<div id="box">
  <div id="bg">
    <div class="cell" id="class_1">
      <div class="list"></div>
    </div>
    <div class="cell" id="class_2">
      <div class="list"></div>
    </div>
    <div class="cell" id="class_3">
      <div class="list"></div>
    </div>
    <div class="cell" id="class_4">
      <div class="list"></div>
    </div>
    <div class="cell" id="class_5">
      <div class="list"></div>
    </div>
    <div class="cell" id="class_6">
      <div class="list"></div>
    </div>
    <div class="cell" id="class_7">
      <div class="list"></div>
    </div>
    <div class="cell" id="class_8">
      <div class="list"></div>
    </div>
    <div class="cell" id="class_9">
      <div class="list"></div>
    </div>
  </div>
</div>
</body>
</html>

相關文章