所以，我对这个游戏还很陌生，并且正在尝试比我现在更好地理解 javaScript。我有这段代码，如果阅读时间太长，请直接跳到底部的我的问题...
function createCSSRule(selectorName, necessaryProperties){
//add class to control all divs
var propertyNameBases, propertyPrefixes, propertyValues, propertySuffixes;
var cssString = selectorName + "{\n";
for (var i9 = 0; i9 < necessaryProperties.length; ++i9){
switch (selectorName){
case "."+options.allPictures:
switch(necessaryProperties[i9]){
case "position":
propertyNameBases = ["position"];
propertyPrefixes = [""],
propertyValues = ["absolute"],
propertySuffixes = [""];
break;
case "height":
propertyNameBases = ["height"];
propertyPrefixes = [""],
propertyValues = ["100%"],
propertySuffixes = [""];
break;
case "width":
propertyNameBases = ["width"];
propertyPrefixes = [""],
propertyValues = ["100%"],
propertySuffixes = [""];
break;
case "background":
propertyNameBases = ["background"];
propertyPrefixes = [""],
propertyValues = ["scroll","#fff","50% 50%","no-repeat","cover"],
propertySuffixes = ["-attachment","-color","-position","-repeat","-size"];
break;
case "transform":
propertyNameBases = ["transform"],
propertyPrefixes = ["", "-moz-", "-webkit-"],
propertyValues = [options.threeDOrigin,options.threeDStyle,"translate3d("+options.translate3dpx+")"],
propertySuffixes = ["-origin","-style",""];
break;
case "transition":
propertyNameBases = ["transition"],
propertyPrefixes = ["", "-webkit-"],
propertyValues = [options.transitionLength + "ms", options.transitionPath, "all"],
propertySuffixes = ["-duration","-timing-function","-property"]; //-delay"];
break;
default:
console.log("missing");
propertyNameBases = null;
propertyPrefixes = null;
propertyValues = null;
propertySuffixes = null;
break;
}
break;
case "."+options.currentPic:
switch(necessaryProperties[i9]){
case "transform":
propertyNameBases = ["transform"],
propertyPrefixes = ["", "-moz-", "-webkit-"],
propertyValues = [options.threeDOrigin,"translate3d(0px, 0px, 0px)"],
propertySuffixes = ["-origin",""];
break;
default:
console.log("missing");
propertyNameBases = null;
propertyPrefixes = null;
propertyValues = null;
propertySuffixes = null;
break;
}
break;
case "."+options.currentPic+"."+options.picAfterCurrent:
switch(necessaryProperties[i9]){
case "transform":
propertyNameBases = ["transform"],
propertyPrefixes = ["", "-moz-", "-webkit-"],
propertyValues = [options.threeDOrigin,"translate3d("+options.negativeTranslate3dpx+")"],
propertySuffixes = ["-origin",""];
break;
default:
console.log("missing");
propertyNameBases = null;
propertyPrefixes = null;
propertyValues = null;
propertySuffixes = null;
break;
}
break;
default:
console.log("wait a second");
break;
}
//name the selector
//iterate through properties
for (i10 = 0; i10 < propertyNameBases.length; i10++){
//iterate through suffixes and value pairs
for (var i11 = 0; i11 < propertyValues.length; i11++){
//iterate through prefixes
if(propertyValues !== false){
for (var i12 = 0; i12 < propertyPrefixes.length; i12++){
cssString = cssString+" "+propertyPrefixes[i12]+propertyNameBases[i10]+propertySuffixes[i11]+": "+propertyValues[i11]+";\n"
}
}
}
}
}
var forAllPictures = ["position","height","width","background","transition","transform"];
var forCurrentPic = ["transform"];
var forpicAfterCurrent = ["transform"];
createCSSRule("."+options.allPictures, forAllPictures);
createCSSRule("."+options.currentPic, forCurrentPic);
createCSSRule("."+options.currentPic+"."+options.picAfterCurrent, forpicAfterCurrent);
基本上，将要发生的事情是我要将一个字符串（它是变量的组合）传递给第一个参数，并将一个数组传递给第二个参数。第一个参数充当我的类名，第二个参数充当我必要的 CSS 属性数组。我在下面包含了输出，因此您可以简单地了解我的目标。if 语句中的每个数组都被每个 for 循环中的 i 用于输出字符串。
每个 switch 语句设置一个特定的变量，然后 3 个 for 循环接管连接一个很长的字符串，恰好是下面的 css
.slideShowPics{
position: absolute;
height: 100%;
width: 100%;
background-attachment: scroll;
background-color: #fff;
background-position: 50% 50%;
background-repeat: no-repeat;
background-size: cover;
transition-duration: 5000ms;
-webkit-transition-duration: 5000ms;
transition-timing-function: ease-in;
-webkit-transition-timing-function: ease-in;
transition-property: all;
-webkit-transition-property: all;
transform-origin: 0% 0%;
-moz-transform-origin: 0% 0%;
-webkit-transform-origin: 0% 0%;
transform-style: flat;
-moz-transform-style: flat;
-webkit-transform-style: flat;
transform: translate3d(-640px, 0px, 0px);
-moz-transform: translate3d(-640px, 0px, 0px);
-webkit-transform: translate3d(-640px, 0px, 0px);
}
.currentSlideShowPic{
transform-origin: 0% 0%;
-moz-transform-origin: 0% 0%;
-webkit-transform-origin: 0% 0%;
transform: translate3d(0px, 0px, 0px);
-moz-transform: translate3d(0px, 0px, 0px);
-webkit-transform: translate3d(0px, 0px, 0px);
}
.currentSlideShowPic.movingOut{
transform-origin: 0% 0%;
-moz-transform-origin: 0% 0%;
-webkit-transform-origin: 0% 0%;
transform: translate3d(640px, 0px, 0px);
-moz-transform: translate3d(640px, 0px, 0px);
-webkit-transform: translate3d(640px, 0px, 0px);
}
我希望有人建议一种更简单的方法来做到这一点。
我觉得我没有正确使用这种语言。如果有人有比我目前使用的更好的主意，我很想听听。
就像我说的，我还在学习。
我觉得我应该能够用一个对象来做到这一点，我只是不知道我在做什么涉及到对象。如果有人有任何用干净的日常白话写的文章，或者至少有一些非常好的例子，我将不胜感激，否则您自己的例子/解释将不胜感激。当然，如果我能够用一个对象做到这一点......