js實現鼠標滑過文字鏈接色彩變化的效果

2024-05-06 16:19:32

字體：大中小

來源：轉載

供稿：網友

這篇文章主要介紹了js實現鼠標滑過文字鏈接色彩變化的效果,涉及javascript鼠標事件及樣式操作的技巧,非常具有實用價值,需要的朋友可以參考下

本文實例講述了js實現鼠標滑過文字鏈接色彩變化效果的方法。分享給大家供大家參考。具體實現方法如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>鼠標移入移出效果</title>

<style>

body,ul,h2,p{

margin:0; padding:0;

font-family:"微軟雅黑";

background:#333;

}

li{list-style:none;}

a{text-decoration:none;}

#box{

width:270px;padding:10px 10px 20px;

overflow:hidden;margin:20px auto 0;

border:1px solid #FFF;

}

.internal{width:266px;float:left;}

#box h2{

height:38px;border-bottom:1px solid #ccc;

padding-left:5px;

}

#box h2 strong{

float:left; line-height:38px;

color:#885050;

}

#box h2 a{

float:right;width:52px;height:14px;

font-size:12px;text-indent:20px;

color:#fff;line-height:12px;

font-weight:normal;margin-top:10px;

}

#box li{

height:30px;position:relative;

border-bottom:1px dashed #ccc;

}

#box li div,#box li p{

height:30px;position:absolute;

top:0;left:0;width:100%;

}

#box li p{

background:#fff;opacity:0;

filter:alpha(opacity=0);

}

#box li div a,#box li div span{

line-height:30px;

font-size:12px;height:30px;

}

#box li div a {

float:left;padding-left:5px;

color:#7F5454;width:185px;

overflow:hidden;

}

#box li div span{

padding-right:10px;

float:right;color:#CF9494;

}

</style>

<script type="text/javascript">

window.onload=function()

{

var d=document;

var oBox=d.getElementById('box');

var aLi=oBox.getElementsByTagName('li');

var i=0;

for(i=0;i<aLi.length;i++)

{

var oP=aLi[i].getElementsByTagName('p')[0];

oP.iAlpha=0;

oP.times=null;

aLi[i].onmouseover=function()

{

oP=this.getElementsByTagName('p')[0];

oP.times && clearInterval(oP.times);

oP.style.opacity=1;

oP.style.filter="alpha(opacity=100)";

oP.iAlpha=100;

};

aLi[i].onmouseout=function()

{

startMove(this.getElementsByTagName('p')[0])

};

}

};

function startMove(obj)

{

obj.times && clearInterval(obj.time);

obj.times=setInterval(function()

{

doMove(obj);

},10);

}

function doMove(obj)

{

var iSpeed=5;

if(obj.iAlpha<=iSpeed)

{

clearInterval(obj.times);

obj.iAlpha=0;

obj.time=null;

}

else

{

obj.iAlpha-=iSpeed;

}

obj.style.filter="alpha(opacity="+obj.iAlpha+")";

obj.style.opacity=obj.iAlpha/100;

}

</script>

</head>

<body>

<div id="box">

<div class="internal">

<h2><strong>網頁特效代碼</strong>

<a href="http://www.survivalescaperooms.com/">more</a></h2>

<ul>

<li>

<p></p>

<div>

<a href="http://www.survivalescaperooms.com/"> 廣告代碼特效大全 </a>

<span>2011-09-10</span>

</div>

</li>

<li>

<p></p>

<div>

<a href="http://www.survivalescaperooms.com/"> JS特效代碼集錦 </a>

<span>2011-09-10</span>

</div>

</li>

<li>

<p></p>

<div>

<a href="http://www.survivalescaperooms.com/">商業網頁模板與光盤素材</a>

<span>2011-09-10</span>

</div>

</li>

<li>

<p></p>

<div>

<a href="http://www.survivalescaperooms.com/">網頁制作教程</a>

<span>2011-09-10</span>

</div>

</li>

<li>

<p></p>

<div>

<a href="http://www.survivalescaperooms.com/">網站源碼整站源代碼下載</a>

<span>2011-09-10</span>

</div>

</li>

<li>

<p></p>

<div>

<a href="http://www.survivalescaperooms.com/"> 網頁電子書下載 </a>

<span>2011-09-10</span>

</div>

</li>

<li>

<p></p>

<div>

<a href="http://www.survivalescaperooms.com/"> 免費網頁模板下載 </a>

<span>2011-09-10</span>

</div>

</li>

</ul>

</div>

</div>

</body>

</html>