Valentine's day is coming soon. I will present a gift for Valentine's Day...
Be sure to support CSS 3 rendering browsers
First necklace
Implementation principle: Set the src attribute of IMG to the same image
:
<! Doctype HTML> <br/> <pead> <br/> <title> necklace ---www.cnblogs.com/kuikui </title> <br/> <style type = "Text /CSS "> <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/> </style> <br/> <SCRIPT type = "text/JavaScript"> <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/> </SCRIPT> <br/> </pead> <br/> <body> <br/> <Div id = "Link" Class = "Cont"> <br/> <Div class = "div1"> <br/> <br/> </ div> <br/> <Div class = "div2"> <br/> <br/> </div> <br/> <Div class = "div3"> <br/> <br/> </div> <br/> <Div class = "div4"> <br/> <br/> </div> <br/> <Div class = "div5"> <br/> <br/> </div> <br/> <Div class = "div6 "> <br/> <br/> </div> <br/> <Div class =" div7 "> <br/> <br/> </div> <br/> </body> <br/> </ptml> <br/>
Run code
Second necklace
Implementation principle: Set images cyclically Based on the src attribute of IMG
:
<! Doctype HTML> <br/> <pead> <br/> <title> necklace ---www.cnblogs.com/kuikui </title> <br/> <style type = "Text /CSS "> <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/> </style> <br/> <SCRIPT type = "text/JavaScript"> <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 {</P> <p> 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/> I ++; <br/>}< br/>}, 1000 ); <br/>}< br/> </SCRIPT> <br/> </pead> <br/> <body> <br/> <Div id = "Link" Class = "Cont"> <br/> <Div class = "div1"> <br/> <br/> </ div> <br/> <Div class = "div2"> <br/> <br/> </div> <br/> <Div class = "div3"> <br/> <br/> </div> <br/> <Div class = "div4"> <br/> <br/> </div> <br/> <Div class = "div5"> <br/> <br/> </div> <br/> <Div class = "div6 "> <br/> <br/> </div> <br/> <Div class =" div7 "> <br/> <br/> </div> <br/> </body> <br/> </ptml> <br/>
Run code
Third necklace
Implementation principle: Move the DIV following the specified trajectory
:
<! Doctype HTML> <br/> <pead> <br/> <title> necklace ---www.cnblogs.com/kuikui </title> <br/> <style type = "Text /CSS "> <br/>. div1 {width: 100px; Height: 100px; Border: 1px solid red; overflow: hidden; border-radius: 300px; Background: URL (http://images.cnblogs.com/cnblogs_com/kuikui/354173/t_test1.jpg) center; position: absolute ;} <br/>. div2 {width: 100px; Height: 100px; Border: 1px solid red; overflow: hidden; border-radius: 300px; Background: URL (http://images.cnblogs.com/cnblogs_com/kuikui/354173/t_test2.jpg) center; position: absolute ;} <br/>. div3 {width: 100px; Height: 100px; Border: 1px solid red; overflow: hidden; border-radius: 300px; Background: URL (http://images.cnblogs.com/cnblogs_com/kuikui/354173/t_test3.jpg) center; position: absolute ;} <br/>. div4 {width: 100px; Height: 100px; Border: 1px solid red; overflow: hidden; border-radius: 300px; Background: URL (http://images.cnblogs.com/cnblogs_com/kuikui/354173/t_test4.jpg) center; position: absolute ;} <br/>. div5 {width: 100px; Height: 100px; Border: 1px solid red; overflow: hidden; border-radius: 300px; Background: URL (http://images.cnblogs.com/cnblogs_com/kuikui/354173/t_test5.jpg) center; position: absolute ;} <br/>. div6 {width: 100px; Height: 100px; Border: 1px solid red; overflow: hidden; border-radius: 300px; Background: URL (http://images.cnblogs.com/cnblogs_com/kuikui/354173/t_test6.jpg) center; position: absolute ;} <br/>. div7 {width: 100px; Height: 100px; Border: 1px solid red; overflow: hidden; border-radius: 300px; Background: URL (http://images.cnblogs.com/cnblogs_com/kuikui/354173/t_test7.jpg) center; position: absolute ;} <br/>. love {width: 300px; Height: 300px; Border: 1px solid red; overflow: hidden; border-radius: 50px 300px 300px 300px; Background: URL (http://images.cnblogs.com/cnblogs_com/kuikui/354173/t_test1.jpg) center; position: absolute ;}< br/> </style> <br/> <SCRIPT type = "text/JavaScript"> <br/> var Doc = document.doc umentelement. clientwidth, document.doc umentelement. 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); </P> <p> var objw = obj. clientwidth; <br/> var obiter = obj. clientheight; </P> <p> 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); </P> <p> var love = document. getelementbyid ("love"); <br/> love. style. left = document.doc umentelement. 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/> </SCRIPT> <br/> </pead> <br/> <body> <br/> <Div id = "love" Class = "love"> <br/> </div> <br/> <Div id = "T1" class = "div1"> <br/> </div> <br /> <Div id = "T2" class = "div2"> <br/> </div> <br/> <Div id = "T3" class = "div3"> <br/> </div> <br/> <Div id = "T4" class = "div4"> <br/> </div> <br/> <Div ID = "T5" class = "div5"> <br/> </div> <br/> <Div id = "T6" class = "div6"> <br/> </div> <br/> <Div id = "T7" class = "div7"> <br/> </div> <br/> </body> <br/> </ptml> <br/>
Run code
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
