第一个项链实现原理将img的src属性设为同一张图片效果图： 复制代码 代码如下: 项链 <BR>*{margin: 0px;padding: 0px;} <BR>.cont{width: 1100px;overflow: hidden;margin: 0 auto;} <BR>.div1, .div7{width: 50px;height: 50px;border: 1px solid red;float: left;overflow: hidden;border-radius: 50px;} <BR>.div1 img, .div7 img{width: 50px;height: 50px;} <BR>.div2, .div6{width: 100px;height: 100px;border: 1px solid red;float: left;overflow: hidden;border-radius: 100px;} <BR>.div2 img, .div6 img{width: 100px;height: 100px;} <BR>.div3, .div5{width: 200px;height: 200px;border: 1px solid red;float: left;overflow: hidden;border-radius: 200px;} <BR>.div3 img, .div5 img{width: 200px;height: 200px;} <BR>.div4{width: 300px;height: 300px;border: 1px solid red;float: left;overflow: hidden;border-radius: 300px;} <BR>.div4 img{width: 300px;height: 300px;} <BR> <BR>window.onload = function () { <BR>var link = document.getElementById("link"); <BR>linkDiv = link.getElementsByTagName("div"); <BR>var i = 1; <BR>setInterval(function () { <BR>if (i == 7) { <BR>i = 1; <BR>for (var j = 0; j < 7; j++) { <BR>linkDiv[j].getElementsByTagName("img")[0].src = "http://images.cnblogs.com/cnblogs_com/kuikui/354173/t_test" + i + ".jpg"; <BR>} <BR>i++; <BR>} <BR>else { <BR>for (var j = 0; j < 7; j++) { <BR>linkDiv[j].getElementsByTagName("img")[0].src = "http://images.cnblogs.com/cnblogs_com/kuikui/354173/t_test" + i + ".jpg"; <BR>} <BR>i++; <BR>} <BR>}, 1000); <BR>} <BR> 第二个项链实现原理将img的src属性循环设置图片效果图： 复制代码 代码如下: 项链 <BR>*{margin: 0px;padding: 0px;} <BR>.cont{width: 1100px;overflow: hidden;margin: 0 auto;} <BR>.div1, .div7{width: 50px;height: 50px;border: 1px solid red;float: left;overflow: hidden;border-radius: 50px;} <BR>.div1 img, .div7 img{width: 50px;height: 50px;} <BR>.div2, .div6{width: 100px;height: 100px;border: 1px solid red;float: left;overflow: hidden;border-radius: 100px;} <BR>.div2 img, .div6 img{width: 100px;height: 100px;} <BR>.div3, .div5{width: 200px;height: 200px;border: 1px solid red;float: left;overflow: hidden;border-radius: 200px;} <BR>.div3 img, .div5 img{width: 200px;height: 200px;} <BR>.div4{width: 300px;height: 300px;border: 1px solid red;float: left;overflow: hidden;border-radius: 300px;} <BR>.div4 img{width: 300px;height: 300px;} <BR> <BR>window.onload = function () { <BR>var link = document.getElementById("link"); <BR>linkDiv = link.getElementsByTagName("div"); <BR>var i = 1; <BR>setInterval(function () { <BR>if (i == 7) { <BR>i = 1; <BR>for (var j = 0; j < 7; j++) { <BR>linkDiv[j].getElementsByTagName("img")[0].src = "http://images.cnblogs.com/cnblogs_com/kuikui/354173/t_test" + Math.abs(j - i + 2) + ".jpg"; <BR>} <BR>i++; <BR>} <BR>else { <BR>for (var j = 0; j < 7; j++) { <BR>if (i <= j + 1) { <BR>linkDiv[j].getElementsByTagName("img")[0].src = "http://images.cnblogs.com/cnblogs_com/kuikui/354173/t_test" + Math.abs(j - i + 2) + ".jpg"; <BR>} else { <BR>linkDiv[j].getElementsByTagName("img")[0].src = "http://images.cnblogs.com/cnblogs_com/kuikui/354173/t_test" + Math.abs(7 + j - i + 2) + ".jpg"; <BR>} <BR>} <BR>i++; <BR>} <BR>}, 1000); <BR>} <BR> 第三个项链实现原理将div按指定轨迹移动效果图： 复制代码 代码如下: 项链 <BR>.div1{width: 100px;height: 100px;border: 1px solid red;overflow: hidden;border-radius: 300px;background: url(/upload/201202/20120213233126435.jpg) center center;position: absolute;} <BR>.div2{width: 100px;height: 100px;border: 1px solid red;overflow: hidden;border-radius: 300px;background: url(/upload/201202/20120213233126464.jpg) center center;position: absolute;} <BR>.div3{width: 100px;height: 100px;border: 1px solid red;overflow: hidden;border-radius: 300px;background: url(/upload/201202/20120213233126342.jpg) center center;position: absolute;} <BR>.div4{width: 100px;height: 100px;border: 1px solid red;overflow: hidden;border-radius: 300px;background: url(/upload/201202/20120213233126709.jpg) center center;position: absolute;} <BR>.div5{width: 100px;height: 100px;border: 1px solid red;overflow: hidden;border-radius: 300px;background: url(/upload/201202/20120213233126717.jpg) center center;position: absolute;} <BR>.div6{width: 100px;height: 100px;border: 1px solid red;overflow: hidden;border-radius: 300px;background: url(/upload/201202/20120213233126170.jpg) center center;position: absolute;} <BR>.div7{width: 100px;height: 100px;border: 1px solid red;overflow: hidden;border-radius: 300px;background: url(/upload/201202/20120213233127469.jpg) center center;position: absolute;} <BR>.love{width: 300px;height: 300px;border: 1px solid red;overflow: hidden;border-radius: 50px 300px 300px 300px ;background: url(/upload/201202/20120213233126435.jpg) center center;position: absolute;} <BR> <BR>var doc = [document.documentElement.clientWidth, document.documentElement.clientHeiht]; <BR>function R(obj, j, r) { <BR>obj = document.getElementById(obj); <BR>var tmp = j; <BR>if (tmp > 90) tmp = Math.abs(tmp - 180); <BR>var objW = obj.clientWidth; <BR>var objH = obj.clientHeight; <BR>setInterval(function () { <BR>if (j == 180) { <BR>j = 0; <BR>obj.style.left = doc[0] / 2 - obj.clientWidth / 2 + r * Math.cos(j * 2 * Math.PI / 360) + "px"; <BR>obj.style.top = r * Math.sin(j * 2 * Math.PI / 360) + "px"; <BR>j++; <BR>} <BR>else { <BR>if (j <= 90) { <BR>obj.style.left = doc[0] / 2 - obj.clientWidth / 2 + r * Math.cos(j * 2 * Math.PI / 360) + "px"; <BR>obj.style.top = r * Math.sin(j * 2 * Math.PI / 360) + "px"; <BR>} <BR>else if (j > 90 && j < 180) { <BR>obj.style.left = doc[0] / 2 - obj.clientWidth / 2 + r * Math.cos(j * 2 * Math.PI / 360) + "px"; <BR>obj.style.top = r * Math.sin(j * 2 * Math.PI / 360) + "px"; <BR>} <BR>j++; <BR>} <BR>}, 60); <BR>} <BR>window.onload = function () { <BR>R("t1", 15, 300); <BR>R("t2", 40, 300); <BR>R("t3", 65, 300); <BR>R("t4", 90, 300); <BR>R("t5", 115, 300); <BR>R("t6", 140, 300); <BR>R("t7", 165, 300); <BR>var love = document.getElementById("love"); <BR>love.style.left = document.documentElement.clientWidth / 2 - love.clientWidth / 2 + "px"; <BR>var i = 1; <BR>setInterval(function () { <BR>if (i == 7) { <BR>i = 1; <BR>love.style.background = "url(http://images.cnblogs.com/cnblogs_com/kuikui/354173/t_test" + i + ".jpg)"; <BR>i++; <BR>} <BR>else { <BR>love.style.background = "url(http://images.cnblogs.com/cnblogs_com/kuikui/354173/t_test" + i + ".jpg)"; <BR>i++; <BR>} <BR>}, 1000); <BR>} <BR>
