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

html爱心特效代码怎么添加名字,第1张

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

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

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

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

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

<html>

<head>

<title>网页特效-文本特效-渐显的文字提示效果</title>

<FCK:meta http-equiv="content-Type" content="text/htmlcharset=gb2312" />

<!--把下面代码加到<head>与</head>之间-->

<style type="text/css">

.lookMe{

float:left

margin-right:10px

padding:5px

width:90px

color:#0099FF

cursor:pointer

background:#FFFADC

border:1px solid #CC6600

}

.lookMe span{

display:none

position:absolute

padding:5px

width:200px

color:#CC3300

background:#FFFADC

border:1px solid #CC6600

filter:alpha(opacity=0)

}

</style>

</head>

<body>

<!--把下面代码加到<body>与</body>之间-->

<div onmouseover_fckprotectedatt="%20onmouseover%3D%22lookMe(this)%3B%22" class="lookMe" onmousemove_fckprotectedatt="%20onmousemove%3D%22mouseMove(event)%3B%22">闷战120分钟点球战4:2 西班牙破魔咒淘汰意大利

<span>1、雅虎体育讯 北京时间6月23日,欧洲足球锦标赛在瑞士奥地利继续进行,在一场四分之一决赛中,西班牙队迎来了上届世界杯冠军意大利队,90分钟与加时赛双方均一球未进,在最终的点球大战中,西班牙4:2击败了对手,昂首挺进四强。</span>

</div>

<div onmouseover_fckprotectedatt="%20onmouseover%3D%22lookMe(this)%3B%22" class="lookMe" onmousemove_fckprotectedatt="%20onmousemove%3D%22mouseMove(event)%3B%22">闷战120分钟点球战4:2 西班牙破魔咒淘汰意大利

<span>2、在一场四分之一决赛中……</span>

</div>

<div onmouseover_fckprotectedatt="%20onmouseover%3D%22lookMe(this)%3B%22" class="lookMe" onmousemove_fckprotectedatt="%20onmousemove%3D%22mouseMove(event)%3B%22">闷战120分钟点球战4:2 西班牙破魔咒淘汰意大利

<span>3、欧洲足球锦标赛在瑞士奥地利继续进行,在一场四分之一决赛中,西班牙队迎来了上届世界杯冠军意大利队,90分钟与加时赛双方均一球未进,在最终的点球大战中,西班牙4:2击败了对手,昂首挺进四强。</span>

</div>

<script>

var span,timer1

function lookMe(thisTag){

span = thisTag.getElementsByTagName('span')[0]

span.style.display = 'block'

span.filters[0].opacity=0

timer1=setInterval("showme()",10)

thisTag.onmouseout = function(){

span.style.display = 'none'

}

}

function showme()

{

if(span.filters[0].opacity==80){clearInterval(timer1)}

span.filters[0].opacity++

}

function mouseMove(event){

var xx=event.clientX + 5

var yy=event.clientY + 10

var obj = event.srcElement ? event.srcElement : event.target

var span=obj.getElementsByTagName("span")[0]

span.style.left = xx + 'px'

span.style.top = yy + 'px'

}

</script>

</body>

</html>

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

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

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

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

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

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


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/zaji/6141306.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-03-16
下一篇 2023-03-16

发表评论

登录后才能评论

评论列表(0条)

保存