情人节之礼射流研究…项链效果

第一个项链实现原理将img的科学研究委员会属性设为同一张图片效果图

复制代码代码如下：DOCTYPE html html标题项链/title style type=' text/CSS ' * { margin : 0px；padding: 0px }。续{宽度： 1100像素飞越：隐藏；margin: 0 auto} .div1，div7 {宽度： 50px高度： 50pxborder: 1px纯红；向左浮动：飞越：隐藏；边界半径： 50px} .img第1分区。div 7 img {宽度： 50px高度： 50px} .div2，div6 {宽度： 100像素高度： 100像素；border: 1px纯红；向左浮动：飞越：隐藏；边界半径： 100像素；} .img 2区。div 6 img {宽度： 100 px高度： 100像素；} .div3，div5 {宽度： 200px高度： 200像素；border: 1px纯红；向左浮动：飞越：隐藏；边界半径： 200像素；} .img第3分区。div 5 img {宽度： 200 px高度： 200像素；} .div 4 {宽度： 300 px高： 300pxborder: 1px纯红；向左浮动：飞越：隐藏；边界半径： 300像素；} .div 4 img {宽度： 300 pxheight: 300px}/style脚本类型=' text/JavaScript '窗口。onload=function(){ var link=document。getelementbyid(' link ')；linkDiv=链接。getelementsbytagname(' div ')；var I=1；setInterval(function(){ if(I==7){ I=1；for(var j=0；j7；j ) { linkDiv[j].getElementsByTagName('img')[0].src=' http://图像。cn博客。com/cn blogs _ com/kui kui/354173/t _ test ' I ' .jpg '；}我；} else { for(var j=0；j7；j ) { linkDiv[j].getElementsByTagName('img')[0].src=' http://图像。cn博客。com/cn blogs _ com/kui kui/354173/t _ test ' I ' .jpg '；}我；} }, 1000);}/script/head body div id=' link ' class=' cont ' div class=' div 1 ' img alt=' src=' http://img。cppcns。com/pic。PHP？URL=/upload/201202/20120213233126435。jpg '/div div class=' div 2 ' img alt=' src=' http://img。cppcns。com/pic。PHP？URL=/upload/201202/20120213233126464。jpg '/div div class=' div 3 ' img alt=' src=' http://img。cppcns。com/pic。PHP？URL=/upload/201202/20120213233126342。jpg '/div div class=' div 4 ' img alt=' src=' http://img。cppcns。com/pic。PHP？URL=/upload/201202/20120213233126709。jpg '/div div class=' div 5 ' img alt=' src=' http://img。cppcns。com/pic。PHP？URL=/upload/201202/20120213233126717。jpg '/div div class=' div 6 ' img alt=' src=' http://img。cppcns。com/pic。PHP？URL=/upload/201202/20120213233126170。jpg '/div div class=' div 7 ' img alt=' src=' http://img。cppcns。com/pic。PHP？URL=/upload/201202/20120213233127469。jpg '/div/div/body/html第二个项链实现原理将img的科学研究委员会属性循环设置图片效果图

复制代码代码如下：DOCTYPE html html标题项链/title style type=' text/CSS ' * { margin : 0px；padding: 0px }。续{宽度： 1100像素飞越：隐藏；margin: 0 auto} .div1，div7 {宽度： 50px高度： 50pxborder: 1px纯红；向左浮动：飞越：隐藏；边界半径： 50px} .img第1分区。div 7 img {宽度： 50px高度： 50px} .div2，div6 {宽度： 100像素高度： 100像素；border: 1px纯红；向左浮动：飞越：隐藏；边界半径： 100像素；} .img 2区。div 6 img {宽度： 100 px高度： 100像素；} .div3，div5 {宽度： 200px高度： 200像素；border: 1px纯红；向左浮动：飞越：隐藏；边界半径： 200像素；} .img第3分区。div 5 img {宽度： 200 px高度： 200像素；} .div 4 {宽度： 300 px高： 300pxborder: 1px纯红；向左浮动：飞越：隐藏；边界半径： 300像素；} .div 4 img {宽度： 300 pxheight: 300px}/style脚本类型=' text/JavaScript '窗口。onload=function(){ var link=document。getelementbyid(' link ')；linkDiv=链接。getelementsbytagname(' div ')；var I=1；setInterval(function(){ if(I==7){ I=1；for(var j=0；j7；j ) { linkDiv[j].getElementsByTagName('img')[0].src=' http://图像。cn博客。com/cn blogs _ com/kui kui/354173/t _ test ' math。防抱死制动系统(j-I 2)' .jpg '；}我；} else { for(var j=0；j7；j){ if(I=j ^ 1){ LinkDiv[j].getElementsByTagName('img')[0].src=' http://图像。cn博客。com/cn blogs _ com/kui kui/354173/t _ test ' math。防抱死制动系统(j-I 2)' .jpg '；} else { linkDiv[j].getElementsByTagName('img')[0].src=' http://图像。cn博客。com/cn blogs _ com/kui kui/354173/t _ test ' math。防抱死制动系统(7j-I 2).jpg '；} } I；} }, 1000);}/script/head body div id=' link ' class=' cont ' div class=' div 1 ' img alt=' src=' http://img。cppcns。com/pic。PHP？URL=/upload/201202/20120213233126435。jpg '/div div class=' div 2 ' img alt=' src=' http://img。cppcns。com/pic。PHP？URL=/upload/201202/20120213233126464。jpg '/div div class=' div 3 ' img alt=' src=' http://img。cppcns。com/pic。PHP？URL=/upload/201202/20120213233126342。jpg '/div div class=' div 4 ' img alt=' src=' http://img。cppcns。com/pic。PHP？URL=/upload/201202/20120213233126709。jpg '/div div class=' div 5 ' img alt=' src=' http://img。cppcns。com/pic。PHP？URL=/upload/201202/20120213233126717。jpg '/div div class=' div 6 ' img alt=' src=' http://img。cppcns。com/pic。PHP？URL=/upload/201202/20120213233126170。jpg '/div div class=' div 7 ' img alt=' src=' http://img。cppcns。com/pic。PHP？URL=/upload/201202/20120213233127469。jpg '/div/div/body/html第三个项链实现原理将差异按指定轨迹移动效果图

复制代码代码如下：DOCTYPE html html标题项链/title style type=' text/CSS '。div 1 {宽度： 100 px高度： 100像素；border: 1px纯红；飞越：隐藏；边界半径： 300像素；后台： URL(/upload/201202/20120213233126435。jpg)中心中心；绝对位置：} .div 2 {宽度： 100 px高度： 100像素；border: 1px纯红；飞越：隐藏；边界半径： 300像素；后台： URL(/upload/201202/20120213233126464。jpg)中心中心；绝对位置：} .div 3 {宽度： 100 px高度： 100像素；border: 1px纯红；飞越：隐藏；边界半径： 300像素；后台： URL(/upload/201202/20120213233126342。jpg)中心中心；绝对位置：} .div 4 {宽度： 100 px高度： 100像素；border: 1px纯红；飞越：隐藏；边界半径： 300像素；后台： URL(/upload/201202/20120213233126709。jpg)中心中心；绝对位置：} .div 5 {宽度： 100 px高度： 100像素；border: 1px纯红；飞越：隐藏；边界半径： 300像素；后台： URL(/upload/201202/20120213233126717。jpg)中心中心；绝对位置：} .div 6 {宽度： 100 px高度： 100像素；border: 1px纯红；飞越：隐藏；边界半径： 300像素；后台： URL(/upload/201202/20120213233126170。jpg)中心中心；绝对位置：} .div 7 {宽度： 100 px高度： 100像素；border: 1px纯红；飞越：隐藏；边界半径： 300像素；后台： URL(/upload/201202/20120213233127469。jpg)中心中心；绝对位置：} .love { width : 300 pxheart : 300 pxborder : 1px纯红；飞越：隐藏；边界半径： 50px 300 px 300 px 300 px后台： URL(/upload/201202/20120213233126435。jpg)中心中心；绝对位置：}/样式脚本类型=' text/JavaScript ' var doc=[document。文档元素。客户端宽度，文档。文档元素。客户端heiht]；函数R(obj，j，R){ obj=文档。getelementbyid(obj)；var tmp=j；if(tmp 90)tmp=Math。ABS(tmp-180)；var objW=obj . clientwidthvar objH=obj . clientheightsetinterval(function(){ if(j==180){ j=0；物体。风格。left=doc[0]/2-obj。客户端宽度/2 r *数学。cos(j * 2 *数学.PI/360)' px '；物体。风格。top=r *数学。辛(j * 2 *数学.PI/360)' px '；j；} else { if(j=90){ obj。风格。left=doc[0]/2-obj。客户端宽度/2 r *数学。cos(j * 2 *数学.PI/360)' px '；物体。风格。top=r *数学。辛(j * 2 *数学.PI/360)' px '；} else if(j 90j 180){ obj。风格。left=doc[0]/2-obj。客户端宽度/2 r *数学。cos(j * 2 *数学.PI/360)' px '；物体。风格。top=r *数学。辛(j * 2 *数学.PI/360)' px '；} j；} }, 60);}窗口。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=文档。getelementbyid(' love ')；爱。风格。left=文档。文档元素。客户宽度/2-爱。客户端宽度/2 ' px '；var I=1；setInterval(function(){ if(I==7){ I=1；爱。风格。背景=' URL(http://张图片。cn博客。com/cn blogs _ com/kui kui/354173/t _ test ' I ' .jpg)'；我；} else { love。风格。背景=' URL(http://张图片。cn博客。com/cn blogs _ com/kui kui/354173/t _ test ' I ' .jpg)'；我；} }, 1000);}/script/head body div id=' love ' class=' love '/div div id=' t1 ' class=' div 1 '/div div id=' T2 ' class=' div 2 '/div div id=' T3 ' class=' div 3 '/div div id=' T4 ' class=' div 4 '/div div id=' t5 ' class=' div 5 '/div div id=' T6 ' class=' T7 ' div 7 '/div/body/html