js爱心特效代码(js画爱心)
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即可完成添加名字。