Webフロントエンド開発--ラブキューブ
19044 ワード
css jsでダイナミックなラブキューブを実現
UpMing
"container">
"box">
"box-page top">
"box-page bottom">
"box-page left">
"box-page right">
"box-page before">
"box-page after">
"text/javascript"</span>>
var arr = document.<span class="token function">querySelectorAll</span><span class="token punctuation">(</span><span class="token string">".box-page"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token function">for</span><span class="token punctuation">(</span>var n =0<span class="token punctuation">;</span>n<arr.length<span class="token selector">;n++)</span>
<span class="token punctuation">{</span>
<span class="token function">for</span><span class="token punctuation">(</span>var i=0 <span class="token punctuation">;</span>i<3 <span class="token selector">;i++)</span>
<span class="token punctuation">{</span>
<span class="token function">for</span><span class="token punctuation">(</span>var j=0<span class="token punctuation">;</span>j<3<span class="token selector">; j++)</span>
<span class="token punctuation">{</span>
var divs = document.<span class="token function">createElement</span><span class="token punctuation">(</span><span class="token string">"div"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
divs.style.cssText= <span class="token string">"width: 100px ;height: 100px ;border: 1px solid #fff; box-sizing : border-box ; position: absolute; background-image: url(img/"</span>+n+<span class="token string">".jpg); background-size: 300px 300px; "</span>
arr[n].<span class="token function">appendChild</span><span class="token punctuation">(</span>divs<span class="token punctuation">)</span><span class="token punctuation">;</span>
divs.style.left=j*100+<span class="token string">"px"</span><span class="token punctuation">;</span>
divs.style.top=i*100+<span class="token string">"px"</span><span class="token punctuation">;</span>
divs.style.backgroundPositionX=-j*100+<span class="token string">"px"</span><span class="token punctuation">;</span>
divs.style.backgroundPositionY=-i*100+<span class="token string">"px"</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>