だから、私はこのゲームにかなり慣れていないので、現在よりも 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);
基本的には、文字列 (変数の組み合わせ) を最初のパラメーターに渡し、配列を 2 番目のパラメーターに渡します。最初のパラメーターはクラス名として機能し、2 番目のパラメーターは必要な 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);
}
誰かがこれを行うより簡単な方法を提案したいと思います。
この言語を正しく使っているとは思えません。私が現在使用しているものよりも優れたアイデアを持っている人がいる場合は、それを聞いてみたい.
私が言ったように、私はまだ学んでいます。
オブジェクトでこれを行うことができるはずだと感じています。オブジェクトに関しては、自分が何をしているのかわかりません。誰かがきれいな日常用語で書かれた記事、または少なくともいくつかの本当に良い例を持っているなら、私はそれを感謝します.そうでなければ、あなた自身の例/説明が最も高く評価されます. もちろん、オブジェクトでこれを行うことができれば...