Javascript 将一个div id数组添加到一个var中，这样我就可以在整个站点上设置多个div的动画
我在github上找到了一些js，它们做了我需要它做的事情，除了能够在站点的不同页面上有多个手/手套动画。最初的js调用了divid，我假设var需要一个现有divid的数组。我试过了，但没用。我根本不是js或jquery大师，但我大部分时间都可以实现和调整 我已经设置了一个提琴，以便您可以看到原始js是如何使用我的代码的。我只需要两个div容器来设置相应的PNG的动画，该PNG在css中为单独的divid调用 从CMS和第二个div中提取的代码未设置动画。。我假设这是因为var的调用没有正确设置为从数组中提取Javascript 将一个div id数组添加到一个var中，这样我就可以在整个站点上设置多个div的动画,javascript,Javascript,我在github上找到了一些js，它们做了我需要它做的事情，除了能够在站点的不同页面上有多个手/手套动画。最初的js调用了divid，我假设var需要一个现有divid的数组。我试过了，但没用。我根本不是js或jquery大师，但我大部分时间都可以实现和调整 我已经设置了一个提琴，以便您可以看到原始js是如何使用我的代码的。我只需要两个div容器来设置相应的PNG的动画，该PNG在css中为单独的divid调用 从CMS和第二个div中提取的代码未设置动画。。我假设这是因为var的调用没有正确
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<style type="text/css">
#new-headers-container{
width: 1024px;
height: 430px;
border: none;
margin: 0;
padding: 0;
}
#sports-gloves-container{
width: 411px;
height: 430px;
overflow: hidden;
float: left;
background: url('http://popticals.com/template/sportHeaders/circle-animation.gif') no-repeat 0 0;
border: none;
margin: 0;
padding: 0;
}
#golf-glove{
width: 284px;
height: 430px;
overflow: hidden;
float: left;
background: url('http://popticals.com/template/sportHeaders/gloves/golf-glove.png') no-repeat 0 0;
border: none;
margin: 0px 0px 0px 86px;
padding: 0;
}
#bike-glove{
width: 284px;
height: 430px;
overflow: hidden;
float: left;
background: url('http://popticals.com/template/sportHeaders/gloves/bike-glove.png') no-repeat 0 0;
border: none;
margin: 0px 0px 0px 86px;
padding: 0;
}
</style>
<script type='text/javascript'>
(function($) {
// you should change these variables
var numberOfSteps = 5;
var heightOfOneStep = 430;
var idOfAnimatedDiv = ["golf-glove","bike-glove"];
var timeBetweenSteps = 60;
// you probably won't have to change these
var index = -1;
var direction = "+";
var steps = [];
var timeOutDuration;
// instantiate steps with the correct heights of the PNG
for (var i = 0; i <= numberOfSteps - 1; i++) {
steps.push( heightOfOneStep * i );
}
var interval = setTimeout(function() {
// reset timeOutDuration
if ( timeOutDuration != timeBetweenSteps ) {
timeOutDuration = timeBetweenSteps;
}
// increment or decrement index
if ( direction == "+" ) {
index++;
} else {
index--;
}
// reverse direction if we are at the beginning or end of the animation
if (index == numberOfSteps) {
direction = "-";
timeOutDuration = 10000;
} else if ( index == -1 ) {
direction = "+";
timeOutDuration = 750;
}
$('#' + idOfAnimatedDiv ).css('backgroundPosition', '0px -' + steps[index] + 'px');
setTimeout(arguments.callee, timeOutDuration);
}, 1000);
})(jQuery);
</script>
</head>
<body>
<div id="sports-gloves-container">
<div id="golf-glove"></div>
</div>
<div id="sports-gloves-container">
<div id="bike-glove"></div>
</div>
</body>
</html>
无标题文件
#新标题容器{
宽度：1024px；
高度：430px；
边界：无；
保证金：0；
填充：0；
}
#运动手套箱{
宽度：411px；
高度：430px；
溢出：隐藏；
浮动：左；
背景：url（'http://popticals.com/template/sportHeaders/circle-animation.gif'）不重复0；
边界：无；
保证金：0；
填充：0；
}
#高尔夫手套{
宽度：284px；
高度：430px；
溢出：隐藏；
浮动：左；
背景：url（'http://popticals.com/template/sportHeaders/gloves/golf-glove.png'）不重复0；
边界：无；
保证金：0px 0px 0px 86px；
填充：0；
}
#自行车手套{
宽度：284px；
高度：430px；
溢出：隐藏；
浮动：左；
背景：url（'http://popticals.com/template/sportHeaders/gloves/bike-glove.png'）不重复0；
边界：无；
保证金：0px 0px 0px 86px；
填充：0；
}
（函数（$）{
//您应该更改这些变量
var numberOfSteps=5；
var heightOfOneStep=430；
var idofanimatediv=[“高尔夫手套”、“自行车手套”]；
var timeBetweenSteps=60；
//你可能不需要改变这些
var指数=-1；
var方向=“+”；
var步骤=[]；
var超时持续时间；
//实例化具有正确PNG高度的步骤
对于（var i=0；i嗯，您正在尝试在那里使用一个ID数组，因此您需要对两个ID进行转换。更改如下：
for(var j=0;j<idOfAnimatedDiv.length;j++){
$('#' + idOfAnimatedDiv[j] ).css('backgroundPosition', '0px -' + steps[index] + 'px');
}
for（var j=0；这正是我所需要的！非常感谢！