手机版

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

时间:2021-10-11 来源:互联网 编辑:宝哥软件园 浏览:

第一个项链实现原理将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

版权声明:情人节之礼射流研究…项链效果是由宝哥软件园云端程序自动收集整理而来。如果本文侵犯了你的权益,请联系本站底部QQ或者邮箱删除。