请帮我看下这样写 easing怎么用不了
javascript吧
全部回复
仅看楼主
level 2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
margin: 0;padding: 0;
}
.main{
width: 1100px;
height: 900px;
background-color: black;
margin: auto;
margin-top: 100px;
}
.a1{
background-image: url("1/1.jpg");
width: 255px;
height: 500px;
float: left;
}
.a2{
background-image: url("1/2.jpg");
width: 255px;
height: 500px;
float: left;
}
.a3{
background-image: url("1/3.jpg");
width: 255px;
height: 500px;
float: left;
}
.a4{
background-image: url("1/4.jpg");
width: 255px;
height: 500px;
float: left;
}
.a5{
background-image: url("1/5.jpg");
width: 520px;
height: 350px;
float: left;
margin-left: 20px;
margin-top: 20px;
}
.a6{
background-image: url("1/6.jpg");
width: 520px;
height: 350px;
float: left;
margin-left: 20px;
margin-top: 20px;
}
.clear{
clear: both;
}
.a1,.a2,.a3,.a4{
margin-left: 16px;
margin-top: 20px;
}
.search{
width: 50px;
height: 50px;
border-radius: 50%;
background-color: white;
margin: auto;
margin-top: -100px;
}
.search img{
position: absolute;
top:0px;
}
</style>
<script src="jquery-1.11.1.min.js"></script>
<script src="jquery.easing.1.3.js"></script>
<!--<script src="jquery.easing.compatibility.js"></script>-->
</head>
<body>
<div class="main">
<div class="a1">
<div class="search">
<img src="1/search-red.png" alt="">
</div>
</div>
<div class="a2">
<img src="1/2.jpg" height="500" width="255"/>
</div>
<div class="a3"></div>
<div class="a4"></div>
<div class="a5"></div>
<div class="a6"></div>
</div>
<div class="clear"></div>
<script>
$('.a1').hover(function () {
$('.search img').stop(true).animate({'top':350},'easeInOutElastic');
})
</script>
</body>
</html>
2018年09月27日 08点09分 1
level 2
2018年09月27日 08点09分 2
1