jQuery 实现手风琴效果

作者：System 时间：2024年08月14日分类：所有,jquery 字数：1131

以下是一个使用jQuery实现手风琴效果的简单示例。这个示例使用了jQuery的事件监听和动画功能来模拟手风琴的开合和点击反馈效果。

HTML 部分：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>手风琴效果</title>
<style>
  .organ {
    width: 100px;
    height: 200px;
    background: #ccc;
    position: relative;
    margin: 50px;
  }
  .pin {
    width: 50px;
    height: 100px;
    background: #999;
    position: absolute;
    bottom: 0;
    left: 50%;
    margin-left: -25px;
    border-radius: 50%;
  }
</style>
</head>
<body>
 
<div class="organ">
  <div class="pin"></div>
</div>
 
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
  // jQuery 代码将放在这里
</script>
</body>
</html>

jQuery 部分：




$(document).ready(function() {
  var $organ = $('.organ');
  var $pin = $('.pin');
 
  $organ.on('click', function() {
    $pin.animate({
      bottom: '0'
    }, 500, function() {
      $pin.animate({
        bottom: '200px'
      }, 500);
    });
  });
});

在这个示例中，我们定义了一个.organ类来代表手风琴的骨架，以及一个.pin类来代表可移动的鼓。当.organ被点击时，jQuery 使用animate函数来移动.pin，模拟手风琴的开合。点击后，鼓下沉并在一定时间后自动返回初始位置，形成一个简单的手风琴效果。

jQuery 实现手风琴效果

评论已关闭

推荐阅读