jQuery / CSS动画精灵
[英]JQuery/CSS Animate Sprite
问题描述
我有一个包含4张不同图片的Sprite图片。 它们的高度为520px。 单击左箭头或右箭头时，我希望通过它们制作动画。 我不确定为什么它不起作用。
编辑更改并添加了CSS。 还是行不通。
<!DOCTYPE html>
<html lang="en">
<head>
<title>FVRC Pics</title>
<meta charset="UTF-8">
<link type="text/css" href="styles/normalize.css" rel="stylesheet" />
<link type="text/css" href="styles/my_style.css" rel="stylesheet">
</head>
<body>
<h1> Fox Valley Runner Club</h1>
<div class="container">
<div id="slider">
<button id="leftArrow" class="fbtnFirst"/button>
<button id="rightArrow" class="fbtnLast"/button>
</div>
</div>
<div id="startApp">
<ul>
<li><a href="http://itweb.fvtc.edu/200158947/Assign3/runners3.html">Start here!</a></li>
</ul>
</div>
<!--<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"> </script>-->
<script type="text/javascript" src="scripts/jquery-3.2.1.min.js"></script>
<script>
$(document).ready(function() {
$("#leftArrow").click(function() {
$("#slider").css("backgroundPostionX","600px");
});
$("#rightArrow").click(function() {
$("#slider").css("backgroundPostionX","-600px");
});
});
</script>
</body>
</html>
CSS：
h1 {
color: #0000ff; /*blue*/
font-size: 44px;
padding-left: 10%;
}
.container {
max-height: 520px;
background-color: #808080; /*grey*/
}
#leftArrow, #rightArrow {
display: inline-block;
width: 38px;
height: 50px;
}
#leftArrow {
position: relative;
/*top: 0;*/
top: 235px;
left: 2%;
width: 5%;
height: 50px;
background: url('../images/left_arrow.png') 0 0 no-repeat;
z-index: 10;
}
#rightArrow {
position: relative;
/*top: 0;*/
top: 235px;
left: 87.5%;
width: 5%;
height: 50px;
background: url('../images/right_arrow.png') bottom right no-repeat;
z-index: 10;
}
#slider {
position: relative;
height: 520px;
max-width: 792px;
margin: 0 auto;
/*background: url("../images/Animate-Sprite_520a.png") -0 0 no-repeat;*/
background-image: url('../images/Animate-Sprite_520a.png');
background-repeat: no-repeat;
}
#startApp {
width: 235px;
margin: 0 auto;
}
#startApp ul {
list-style-type: none;
}
#startApp ul li a {
display: inline-block;
text-decoration: none;
width: 150px;
text-align: center;
background-color: steelblue;
border: 2px solid #808080;
color: white;
font-size: 32px;
2 个解决方案
解决方案1
0 2018-04-13 17:26:05
这样的事情应该可以工作，但我不知道您的css文件中包含什么，我的意思是您如何定义箭头
$("#leftArrow").click(function(){ $("#slider").css("backgroundPostionX","400px"); }); $("#rightArrow").click(function(){ $("#slider").css("backgroundPostionX","-400px"); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <h1> Fox Valley Runner Club</h1> <div class="container"> <div id="slider"> <button id="leftArrow" class="fbtnFirst"></button> <button id="rightArrow" class="fbtnLast"></button> </div> </div> <div id="startApp"> <ul> <li> <a href="http://itweb.fvtc.edu/200158947/Assign3/runners3.html">Start here!</a> </li> </ul> </div>
解决方案2
0 2018-04-13 17:26:48
更大的问题在于按钮元素，您拥有onclick =“ move（'left'）;” 但从未定义过移动功能。 您可以将其取出来，让监听器代替它来处理。
<!DOCTYPE html>
<html lang="en">
<head>
<title>FVRC Pics</title>
<meta charset="UTF-8">
<link type="text/css" href="styles/normalize.css" rel="stylesheet" />
<link type="text/css" href="styles/my_style.css" rel="stylesheet">
</head>
<body>
<h1> Fox Valley Runner Club</h1>
<div class="container">
<div id="slider">
<button id="leftArrow" class="fbtnFirst"/button>
<button id="rightArrow" class="fbtnLast"/button>
</div>
</div>
<div id="startApp">
<ul>
<li><a href="http://itweb.fvtc.edu/200158947/Assign3/runners3.html">Start here!</a></li>
</ul>
</div>
<!--<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"> </script>-->
<script type="text/javascript" src="scripts/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="scripts/my_script.js"></script>
<script>
$(document).ready(function(){
$("#leftArrow").click(function(){
$("#slider").css("backgroundPostionX","400px");
});
$("#rightArrow").click(function(){
$("#slider").css("backgroundPostionX","-400px");
});
});
});
</script>
</body>
</html>
使用jQuery Animate分步对图像精灵进行动画处理？
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.