バレンタインデーギフト JS ネックレスエフェクト_JavaScript スキル

最初のネックレス の実装原則は、img の src 属性を同じ画像 レンダリングに設定することです。

コードをコピー コードは次のとおりです: : 0px ;padding: 0px;} .cont{width: 1100px;overflow: hidden;margin: 0 auto;} .div1, .div7{width: 50px;height: 50px;border: 1px 赤一色;float : left;overflow: hidden;border-radius: 50px;} .div1 img, .div7 img{幅: 50px;高さ: 50px;} .div2, .div6{幅: 100px;高さ: 100px ;border: 1px 赤一色;float: left;overflow: hidden;border-radius: 100px;} .div2 img, .div6 img{幅: 100px;高さ: 100px;} .div3, .div5 {幅: 200px;高さ: 200px;border: 1px ソリッドレッド;float: left;overflow: hidden;border-radius: 200px;} .div3 img, .div5 img{幅: 200px;高さ: 200px ;} .div4{幅: 300px;高さ: 300px;ボーダー: 1 ピクセル赤一色;フロート: 左;オーバーフロー: 非表示;ボーダー半径: 300ピクセル;} .div4 img{幅: 300ピクセル;高さ: 300px; } var link = document.getElementById("link") ); linkDiv = link.getElementsByTagName("div"); var i = 1; setInterval() { if (i == 7) { i = 1 ; for (var j = 0; j linkDiv[j].getElementsByTagName("img")[0].src = "http://images.cnblogs.com/ cnblogs_com/ kuikui/354173/t_test" i ".jpg"; } i ; } else { for (var j = 0; j linkDiv[j].getElementsByTagName("img")[0].src = "http://images.cnblogs.com/cnblogs_com/kuikui/354173/t_test" i ".jpg"; } i ; } }、 }

; =" link" class="cont"> alt= "" src="http://files.jb51.net/upload/20120213233126717.jpg" /> 🎜> div7" > &lt ;/ div>

コードをコピー

コードは次のとおりです:

项链 *{マージン: 0px;パディング: 0px;} .cont{幅: 1100px;オーバーフロー: 非表示;マージン: 0 自動;} .div1, .div7{幅: 50px;高さ: 50px ;border: 1px 赤一色;float: left;overflow: hidden;border-radius: 50px;} .div1 img, .div7 img{width: 50px;height: 50px;} .div2, .div6 {幅: 100px;高さ: 100px;border: 1px ソリッドレッド;float: left;overflow: hidden;border-radius: 100px;} .div2 img, .div6 img{幅: 100px;高さ: 100px;} .div3, .div5{幅: 200px;高さ: 200px;border: 1px 赤一色;float: left;overflow: hidden;border-radius: 200px;} .div3 img, .div5 img{width : 200px;height: 200px;} .div4{幅: 300px;高さ: 300px;border: 1px 赤一色;float: left;overflow: hidden;border-radius: 300px;} .div4 img{幅: 300px;高さ: 300px;} window.onload = function () { var link = document.getElementById("link"); linkDiv = link.getElementsByTagName("div"); var i = 1; setInterval(function () { if (i == 7) { i = 1; for (var j = 0; j linkDiv[ j].getElementsByTagName("img")[0].src = "http://images.cnblogs.com/cnblogs_com/kuikui/354173/t_test" Math.abs(j - i 2) ".jpg"; >} i ; } else { for (var j = 0; j if (i linkDiv[j].getElementsByTagName("img")[0].src = "http://images.cnblogs.com/cnblogs_com/kuikui/354173/t_test" Math.abs(j - i 2) ".jpg"; } else { linkDiv[j].getElementsByTagName("img")[0].src = "http://images.cnblogs.com/cnblogs_com/kuikui/354173/t_test" Math.abs(7 j - i 2) ".jpg"; } } i ; } }, 1000); }

第三个项链 实现原理将div按指定轨迹移動移動 效果图：

复制代 代码如下:

项链 .div1{幅: 100px;高さ: 100px;ボーダー: 1 ピクセル赤一色;オーバーフロー: 非表示;ボーダー半径: 300 ピクセル;背景: url(/upload/201202/20120213233126435.jpg) 中央中央;位置: 絶対; } .div2{幅: 100px;高さ: 100px;ボーダー: 1 ピクセル赤一色;オーバーフロー: 非表示;ボーダー半径: 300 ピクセル;背景: url(/upload/201202/20120213233126464.jpg) 中央中央;位置: 絶対;} .div3{幅: 100px;高さ: 100px;border: 1px 赤一色;overflow: hidden;border-radius: 300px;background: url(/upload/201202/20120213233126342.jpg) center center;position:絶対;} .div4{幅: 100px;高さ: 100px;ボーダー: 1 ピクセル赤一色;オーバーフロー: 非表示;ボーダー半径: 300 ピクセル;背景: url(/upload/201202/20120213233126709.jpg) 中心 中心;位置: 絶対;} .div5{幅: 100px;高さ: 100px;ボーダー: 1px 赤一色;オーバーフロー: 非表示;ボーダー半径: 300px;背景: url(/upload/201202/20120213233126717.jpg) 中心 中心;位置: 絶対;} .div6{幅: 100px;高さ: 100px;ボーダー: 1 ピクセル赤一色;オーバーフロー: 非表示;ボーダー半径: 300 ピクセル;背景: url(/upload/201202/20120213233126170.jpg) 中心 中心;位置: 絶対;} .div7{幅: 100px;高さ: 100px;ボーダー: 1 ピクセル赤一色;オーバーフロー: 非表示;ボーダー半径: 300 ピクセル;背景: url(/upload/201202/20120213233127469.jpg) センター中央;位置: 絶対;} .love{幅: 300px;高さ: 300px;ボーダー: 1 ピクセル赤一色;オーバーフロー: 非表示;ボーダー半径: 50 ピクセル 300 ピクセル 300 ピクセル 300 ピクセル ;背景: url(/upload/201202/20120213233126435 .jpg) 中心 center;位置: 絶対;} var doc = [document.documentElement.clientWidth, document.documentElement.clientHeiht]; function R(obj, j, r) { obj = document.getElementById(obj); var tmp = j; if (tmp > 90) tmp = Math.abs(tmp - 180); var objW = obj.clientWidth; var objH = obj.clientHeight; setInterval(function () { if (j == 180) { j = 0; obj.style.left = doc[0] / 2 - obj.clientWidth / 2 r * Math.cos(j * 2 * Math.PI / 360) "px"; obj.style.top = r * Math.sin(j * 2 * Math.PI / 360) "px"; j ; } else { if (j obj.style.left = doc[0] / 2 - obj.clientWidth / 2 r * Math.cos( j * 2 * Math.PI / 360) "px"; obj.style.top = r * Math.sin(j * 2 * Math.PI / 360) "px"; else if (j > 90 && j obj.style.left = doc[0] / 2 - obj.clientWidth / 2 r * Math.cos(j * 2 * Math.PI / 360 ) "px"; obj.style.top = r * Math.sin(j * 2 * Math.PI / 360) "px"; }、60); } window.onload = function () { R("t1", 15, 300); R("t2", 40, 300); R("t3", 65, 300); R("t4", 90, 300); R("t5", 115, 300); R("t6", 140, 300); R("t7", 165, 300); var love = document.getElementById("love"); love.style.left = document.documentElement.clientWidth / 2 - love.clientWidth / 2 "px"; var i = 1; setInterval(function () { if (i == 7) { i = 1; love.style.background = "url(http://images.cnblogs.com/cnblogs_com /kuikui/354173/t_test" i ".jpg)"; i ; } else { love.style.background = "url(http://images.cnblogs.com/ cnblogs_com/kuikui/354173/t_test" i ".jpg)"; i ; } }, 1000); }

バレンタインデー ギフト JS ネックレス エフェクト_JavaScript スキル

関連記事

バレンタインデーギフト JS ネックレスエフェクト_JavaScript スキル