如何将我的猫重置为原来的大小

时间：2017-05-10 18:42:20

标签： javascript css 

var click = 10;

$(document).ready(function() {

  // nav bar event listeners set up
  $('.navDiv').mouseenter(mouseEnterButton);
  $('.navDiv').mouseleave(mouseLeaveButton);

  //TODO add your code below to attach event listeners to the buttons
  // We did the first one for you. You can use the `.click()` function or
  // the .on('click') like we did below.
  $('#fadeDiv').on('click', fadeCat());
  $('#fadeDiv').on('click', hideCat());
  $('#fadeDiv').on('click', animateCat());
  $('#fadeDiv').on('click', resetCat());

});

// nav bar function to fade when mouse enters button
function mouseEnterButton() {
  console.log('enter');
  $(this).fadeTo('fast', 0.5);
}

// nav bar function to fade when mouse enters button
function mouseLeaveButton() {
  console.log('leave');
  $(this).fadeTo('fast', 1);
}

// fadeCat is a function to fade cat in or out when that button is clicked
function fadeCat(e, complete) { // ignore e, use complete as the last argument to any jQuery fade functions
  //TODO your function code here
  // toggle catImg fade
  // append '<p>fade toggle</p>' to 'clickList'

  $("#fadeDiv").click(function() {

      $("#catImg").fadeToggle('fast', "linear");
      $("#clickList").append('<p>fade toggle</p>');

  });





}

// hideCat is a function to hide and show the cat image when that button is clicked
function hideCat() {
  //TODO your function code here
  // hide catImg
  // append '<p>hide toggle</p>' to 'clickList

  $("#hideDiv").click(function() {

      $("#catImg").toggle('slow');
      $("#clickList").append('<p>hide toggle</p>');
  });
}

// animateCat is a function to grow the cat's height and width by 10px when that button is clicked
function animateCat(e, complete) { // ignore e, use complete as the last argument to the jQuery animate function
  //TODO your function code here
  // animate catImg
  // append '<p>animate</p>' to 'clickList'

  $('#animateDiv').click(function () {

      $('#catImg').animate({
          height:'+= 10px',
          width:'+=10px'
      });
      $("#clickList").append("<p>animate</p>");
  });




}

// Hard Mode
// resetCat is a function to reset the cat photo to its original size
// when that button is clicked.
function resetCat() {
  // reset catImg
  // append '<p>reset</p>' to 'clickList'

  $('#resetDiv').click(function () {
      $('#catImg').animate({
          height:'-= 10px' ,
          width:'-=10px'//solution for now untill i find out how to make it work
      });
      $("#clickList").append("<p>reset</p>");
  });
}
body {
  font-family: Verdana, Arial, Sans-Serif;
}
.navDiv {
  height: 30px;
  width: 120px;
  border-radius: 5px;
  padding-top: 10px;
  margin: 5px;
  text-align: center;
  color: #FFFFFF;
  background-color: #69D2E7;
  font-family: Verdana, Arial, Sans-Serif;
  display: inline-block;
}

#outPut {
  height: 200px;
  width: 400px;
}

img {
  margin-left: auto;
  margin-right: auto;
}
<!DOCTYPE html>
<html>
  <head>
    <title>Assignment 6-2</title>
    <link href='styles.css' rel='stylesheet' type='text/css'/>
    <script src="http://code.jquery.com/jquery-3.2.1.min.js" charset="utf-8"></script>
    <script src='script.js' type='text/javascript' ></script>
  </head>
  <body>
    <h1>Burrito Cat</h1>
    <div class="navDiv" id="fadeDiv">Fade Me!</div>
    <div class="navDiv" id="hideDiv">Hide Me!</div>
    <div class="navDiv" id="animateDiv">Animate Me!</div>
    <div class="navDiv" id="resetDiv">Reset Me!</div>
    <div id="outPut">
      <img id="catImg" src="imgs/burrito-cat.png" alt="burrito cat">
    </div>
    <div id="clickList">
    </div>
  </body>
</html>

如何将图像调整到正确的大小？ （我不知道如何放入猫图片。）

2 个答案:

答案 0 :(得分：0)

您可以在加载图像后读取原始高度和宽度，只需将其保存在变量中或将其指定为元素的data-属性。

这是一个例子。

$(window).on("load", function() {
  
  var $cat = $("#catImg"),
      height = $cat.height(),
      width = $cat.width();

  $cat.on("click", function() {
    
    if ($(this).hasClass("big")) {
      $(this).animate(
        {
          height: height,
          width: width
        },
        500
      );
    } else {
      $(this).animate(
        {
          height: "+=10px",
          width: "+=10px"
        },
        500
      );
    }
    $(this).toggleClass("big");
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img id="catImg" src="https://d4n5pyzr6ibrc.cloudfront.net/media/27FB7F0C-9885-42A6-9E0C19C35242B5AC/4785B1C2-8734-405D-96DC23A6A32F256B/thul-90efb785-97af-5e51-94cf-503fc81b6940.jpg?response-content-disposition=inline">

答案 1 :(得分：0)

首先找到 img 的高度和宽度，然后重置为它：

＆＃13;
＆＃13; 
var click = 10;
var imgHeight;
var imgHeight;
$(document).ready(function() {
  imgHeight = $('#catImg').height();
  imgWidth = $('#catImg').width();
  // nav bar event listeners set up
  $('.navDiv').mouseenter(mouseEnterButton);
  $('.navDiv').mouseleave(mouseLeaveButton);

  //TODO add your code below to attach event listeners to the buttons
  // We did the first one for you. You can use the `.click()` function or
  // the .on('click') like we did below.
  $('#fadeDiv').on('click', fadeCat());
  $('#fadeDiv').on('click', hideCat());
  $('#fadeDiv').on('click', animateCat());
  $('#fadeDiv').on('click', resetCat());

});

// nav bar function to fade when mouse enters button
function mouseEnterButton() {
  console.log('enter');
  $(this).fadeTo('fast', 0.5);
}

// nav bar function to fade when mouse enters button
function mouseLeaveButton() {
  console.log('leave');
  $(this).fadeTo('fast', 1);
}

// fadeCat is a function to fade cat in or out when that button is clicked
function fadeCat(e, complete) { // ignore e, use complete as the last argument to any jQuery fade functions
  //TODO your function code here
  // toggle catImg fade
  // append '<p>fade toggle</p>' to 'clickList'

  $("#fadeDiv").click(function() {

      $("#catImg").fadeToggle('fast', "linear");
      $("#clickList").append('<p>fade toggle</p>');

  });





}

// hideCat is a function to hide and show the cat image when that button is clicked
function hideCat() {
  //TODO your function code here
  // hide catImg
  // append '<p>hide toggle</p>' to 'clickList

  $("#hideDiv").click(function() {

      $("#catImg").toggle('slow');
      $("#clickList").append('<p>hide toggle</p>');
  });
}

// animateCat is a function to grow the cat's height and width by 10px when that button is clicked
function animateCat(e, complete) { // ignore e, use complete as the last argument to the jQuery animate function
  //TODO your function code here
  // animate catImg
  // append '<p>animate</p>' to 'clickList'

  $('#animateDiv').click(function () {

      $('#catImg').animate({
          height:'+= 10px',
          width:'+=10px'
      });
      $("#clickList").append("<p>animate</p>");
  });




}

// Hard Mode
// resetCat is a function to reset the cat photo to its original size
// when that button is clicked.
function resetCat() {
  // reset catImg
  // append '<p>reset</p>' to 'clickList'

  $('#resetDiv').click(function () {
      $('#catImg').animate({
          height: imgHeight,
          width: imgWidth//solution for now untill i find out how to make it work
      });
      $("#clickList").append("<p>reset</p>");
  });
}
＆＃13; 
body {
  font-family: Verdana, Arial, Sans-Serif;
}
.navDiv {
  height: 30px;
  width: 120px;
  border-radius: 5px;
  padding-top: 10px;
  margin: 5px;
  text-align: center;
  color: #FFFFFF;
  background-color: #69D2E7;
  font-family: Verdana, Arial, Sans-Serif;
  display: inline-block;
}

#outPut {
  height: 200px;
  width: 400px;
}

img {
  margin-left: auto;
  margin-right: auto;
}
＆＃13; 
<!DOCTYPE html>
<html>
  <head>
    <title>Assignment 6-2</title>
    <link href='styles.css' rel='stylesheet' type='text/css'/>
    <script src="http://code.jquery.com/jquery-3.2.1.min.js" charset="utf-8"></script>
    <script src='script.js' type='text/javascript' ></script>
  </head>
  <body>
    <h1>Burrito Cat</h1>
    <div class="navDiv" id="fadeDiv">Fade Me!</div>
    <div class="navDiv" id="hideDiv">Hide Me!</div>
    <div class="navDiv" id="animateDiv">Animate Me!</div>
    <div class="navDiv" id="resetDiv">Reset Me!</div>
    <div id="outPut">
      <img id="catImg" src="imgs/burrito-cat.png" alt="burrito cat">
    </div>
    <div id="clickList">
    </div>
  </body>
</html>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题