Question

我试图重新创造这种效果：

http://www.eginstill.com/

我厌倦了一切，我让它调整大小但是在图像被修复并且从各个方面调整大小时无法获得该效果。

这是我的代码：

＆＃13;

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    </head>
    
    <style>
    body {
    	padding: 0;
    	margin: 0;
    }
    </style>
    
    <body>
    
    
    
    <div id="menu" style="float: left; width: 200px; height: 1000px; background: black; display: inline-block;">
    
    </div>
    
    
    <div id="img-01" style="z-index: 100; width: 100%; position: absolute;">
      <img src="https://s-media-cache-ak0.pinimg.com/236x/95/c3/70/95c3708a97e9a7e56d4e13166dd5dd24.jpg" id="photograph" style="width: 100%; height: 100%;">
    </div>
    
    
    <script
      src="https://code.jquery.com/jquery-3.2.1.min.js"
      integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
      crossorigin="anonymous"></script>
    
    
    
    <script>
    $(document).ready(function () {
                $("#img-01").click(function () {
                    $("#img-01").animate({
                    	height: '400px',
                        width: '400px',
                        left: '300px'
    
                    }, 1500);
                });
            });
    
    </script>
    
    <script>
    $(document).ready(function() { 
    
        $('#photograph').hide();
        $('#photograph').each(function(i) {
            if (this.complete) {
                $(this).fadeIn();
            } else {
                $(this).load(function() {
                    $(this).fadeIn();
                });
            }
        });
    });
    </script>
    
    </body>
    </html>

＆＃13;

不确定该怎么做。感谢。

Answer 1

请参阅此代码中的代码段。

我按类更改了ID（更方便，我们更喜欢使用class而不是id。）
更新了.img-01元素的css

$(document).ready(function() {
  $(".img-01").click(function() {
    $(this).animate({
      top: '20px',
      right: '100px',
      left: '30px',
      bottom: '20px'
    }, 1500);
  });
});

$(document).ready(function() {

  $('.photograph').hide();
  $('.photograph').each(function(i) {
    if (this.complete) {
      $(this).fadeIn();
    } else {
      $(this).load(function() {
        $(this).fadeIn();
      });
    }
  });
});

body {
  padding: 0;
  margin: 0;
}

.menu {
  float: left;
  width: 200px;
  height: 1000px;
  background: black;
  display: inline-block;
}

.img-01 {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-image: url(https://s-media-cache-ak0.pinimg.com/236x/95/c3/70/95c3708a97e9a7e56d4e13166dd5dd24.jpg);
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body>

  <div id="menu"></div>

  <div class="img-01">
    </div>


  <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
</body>

</html>

坚持均匀调整图像动画的大小

1 个答案: