实现放大，下坠消失，扩散消失效果

最新推荐文章于 2024-04-21 14:20:30 发布

zhvsby

最新推荐文章于 2024-04-21 14:20:30 发布

阅读量942

点赞数

分类专栏： JQuery 文章标签： function button stylesheet html div

本文链接：https://blog.csdn.net/zhvsby/article/details/5922585

版权

JQuery 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <title>Custom Effects Demo</title>
    <link rel="stylesheet" type="text/css" href="../common.css">
    <script type="text/javascript"
            src="../scripts/jquery-1.2.1.js"></script>
    <script type="text/javascript"
            src="../scripts/jquery.dimensions.js"></script>
    <script type="text/javascript">
      $(function(){

        $('#scaleButton').click(function(){
          $('#testSubject').each(function(){
            $(this).animate(
              {
                width: $(this).width() * 2,
                height: $(this).height() * 2
              },
              'slow'
            );
          });
        });

        $('#dropButton').click(function(){
          $('#testSubject').each(function(){
            $(this)
              .css('position','relative')
              .animate(
                {
                  opacity: 'hide',
                  top: $(window).height() - $(this).height() -
                       $(this).position().top
                },
                'slow',
                function(){ $(this).hide(); });
          });
        });

        $('#puffButton').click(function(){
          $('#testSubject').each(function(){
            var position = $(this).position();
            $(this)
              .css({position:'absolute',top:position.top,
                    left:position.left})
              .animate(
                {
                  opacity: 'hide',
                  width: $(this).width() * 5,
                  height: $(this).height() * 5,
                  top: position.top - ($(this).height() * 5 / 2),
                  left: position.left - ($(this).width() * 5 / 2)
                },
                'normal');
          });
        });
      });
    </script>
</head>

<body>
    <h1>Custom Effects Demo</h1>
    <fieldset>
      <legend>Custom Effects</legend>
      <img src="IMG_2298.jpg" id="testSubject"/>
      <div>
        <button type="button" id="scaleButton">Scale</button>
        <button type="button" id="dropButton">Drop</button>
        <button type="button" id="puffButton">Puff</button>
      </div>
    </fieldset>
</body>
</html>