萬盛學電腦網 >> 網絡編程 >> 安卓開發 >> 怎麼制作html5漸顯的文字提示效果？
怎麼制作html5漸顯的文字提示效果？
下面我們給大家介紹一下制作html5漸顯的文字提示效果的方法吧!希望大家可以在這裡學習!
<html>
<head>
<title>網頁特效-文本特效-漸顯的文字提示效果</title>
<FCK:meta http-equiv="content-Type" content="text/html;charset=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>
以上就是我們給大家介紹的html5漸顯的文字提示效果的方法了。希望大家繼續關注我們的網站!
- 上一頁:制作html5斜向移動落葉背景的方法
- 下一頁:HTML語言的結構是什麼？
