0
は、どのように私はそれが私がイメージが正しいサイズにリサイズし作るにはどうすればよい
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>た元の大きさに私の猫をリセットするのですか？ （私は猫の画像を入れる方法がわかりません）
あなたがにあなたの猫の映像をエンコードしようとすることができますbase64を表示可能にする – MTroy