點選元素實現動畫方式放大透明然後返回原貌程式碼例項

admin發表於2017-04-01
動畫

本章節分享一段程式碼例項，實現了點選元素放大效果，並且元素逐漸被設定為全透明，然後再還原。

這一切都是以動畫方式完成的，下面直接看程式碼:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<head>
<title>螞蟻部落</title>
<style type="text/css">
ul, li{
  list-style:none;
  padding:0;
  margin:0;
}
#btncell{
  width:300px;
  height:100px;
  border:1px solid #777;
  margin:50px auto;
}
#btncell li{
  width:100px;
  float:left;
  height:50px;
  font-size:14px;
  text-align:center;
  line-height:28px;
  position:relative;
  z-index:1;
}
#btncell li a{
  display:block;
  height:28px;
  border:2px solid #333;
  text-decoration:none;
  width:50px;
  background:#888;
  overflow:hidden;
  position:absolute;
  left:25px;
  top:10px;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script>
$(function(){
  $("#btncell li a").click(function(){
    $(this).parents("li").css("z-index","2")
    $(this).animate({ 
          height: "558px",
          top: "-255px",
          width: "1000px",
          left: "-460px",
          opacity: 'toggle',
          lineHeight: '558px',
          fontSize: '500px'
        }, 1000);
    $(this).animate({ 
          height: "28px",
          top: "10px",
          width: "50px",
          left: "25px",
          opacity: 'toggle',
          lineHeight: '28px',
          fontSize: '12px'
        }, 400);
    $(this).parents("li").css("z-index","1")
  })
})
</script>
</head>
<body>
<ul id="btncell">
  <li><a href="#">1</a></li>
  <li><a href="#">2</a></li>
  <li><a href="#">3</a></li>
  <li><a href="#">4</a></li>
  <li><a href="#">5</a></li>
  <li><a href="#">6</a></li>
</ul>
</body>
</html>

相關文章