js爱心特效代码(js画爱心)

http://www.itjxue.com  2023-02-05 09:03  来源:未知  点击次数: 

html爱心特效代码怎么改花瓣的颜色

html爱心特效代码改花瓣颜色的方法如下:

1、获取花瓣,所有调色条,以及用来显示rgb值的div盒子。

2、给花瓣循环绑定点击事件,这里需要一个匿名的自调用函数来储存i的值,不然事件绑定不上,i值会变为最终长度值。

3、利用"排他思想"循环遍历将所有花瓣的selected类名去掉,然后给当前点击的花瓣添加被选中的类名"selected"将边框变为虚线,表示被选中。

4、下面一个for循环同样利用了匿名的自调用函数存储i值,然后给所有的调色条绑定input事件。

5、判断一下是否有被选中的元素,通过判断之后获取带有selected类名的花瓣,然后将其背景颜色改为三个input输入的value值,最后将三个rgb值渲染到显示rgb值的div盒子中,这样一个彩色花瓣的效果就完成了。

怎么样制作JavaScript心形代码

脚本说明:

第一步:把如下代码加入body区域中

style type="text/css"

body

{

background-color:#FFFFFF;

font-family: Arial;

font-size:10pt;

}

/style

script

text=new Array('www','njcatv','net','需要放大的

/\/\

\ /

\/

文字')

var numText=4

color=new Array('#000000','#2F2F2F','#4F4F4F','#7F7F7F','#408080')

var numColors=5

var endSize=70

var Zspeed=30

var Cspeed=200

var font='Arial Black'

var hide=false

var size=10

var gonum=0

var ie, n;

if (document.all) {

n=0

ie=1

zoomText='document.all.zoom.innerText=text[num]'

zoomSize='document.all.zoom.style.fontSize=size'

closeIt=""

fadeColor="document.all.zoom.style.color=color[num]"

}

if (document.layers) {

n=1;ie=0

zoomText=""

zoomSize="document.zoom.document.write('p align=\"center\" style=\"font-family:'+font+'; font-size:'+size+'px; color:'+color[0]+'\"'+text[num]+'/p')"

closeIt="document.zoom.document.close()"

fadeColor="document.zoom.document.write('p align=\"center\" style=\"font-family:'+font+'; font-size:'+endSize+'px; color:'+color[num]+'\"'+text[numText-1]+'/p')"

}

function zoom(num,fn){

if (sizeendSize){

eval(zoomText)

eval(zoomSize)

eval(closeIt)

size+=5;

setTimeout("zoom("+num+",'"+fn+"')",Zspeed)

}else{

eval(fn);

}

}

function fadeIt(num){

if (numnumColors){

eval(fadeColor)

eval(closeIt)

num+=1;

setTimeout("fadeIt("+num+")",Cspeed)

}else{

hideIt()

}

}

function hideIt(){

if(hide){

if(ie)document.all.zoom.style.visibility="hidden"

if(n)document.layers.zoom.visibility="hidden"

}

}

function init(){

if(ie){

document.all.zoom.style.color=color[0]

document.all.zoom.style.fontFamily=font

}

if(ie || n) go(0)

}

function go(num){

gonum+=1

size=10

if(numnumText){

zoom(num,'go('+gonum+')')

}else{

fadeIt(0)

}

}

/script

div id="zoom" align="center" style="position:absolute; top:150"

html爱心特效代码怎么添加名字

html爱心特效代码添加名字的步骤:

1、在主代码最后增加一个模块document.getelementbyid。

2、在模块document.getelementbyid中增加一个标签div。

3、在标签div中添加所要添加的名字。

4、在主代码中增加模块document.getelementbyid即可完成添加名字。

(责任编辑:IT教学网)

更多

推荐Painter教程文章