cari

Rumah >hujung hadapan web >tutorial js >js menyedari kesan perubahan warna apabila tetikus meluncur ke atas kemahiran link_javascript teks

js menyedari kesan perubahan warna apabila tetikus meluncur ke atas kemahiran link_javascript teks

WBOY
WBOYasal
2016-05-16 16:00:231176semak imbas

Contoh dalam artikel ini menerangkan cara menggunakan js untuk mencapai kesan perubahan warna pautan teks apabila tetikus meluncur ke atasnya. Kongsikan dengan semua orang untuk rujukan anda. Kaedah pelaksanaan khusus adalah seperti berikut: 

<!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.jb51.net/">more</a></h2>
 <ul>
  <li>
  <p></p>
  <div>
   <a href="http://www.jb51.net/"> 广告代码特效大全 </a>
   <span>2011-09-10</span>
  </div>
  </li>
  <li>
  <p></p>
  <div>
   <a href="http://www.jb51.net/"> JS特效代码集锦 </a>
   <span>2011-09-10</span>
  </div>
  </li>
  <li>
  <p></p>
  <div>
   <a href="http://www.jb51.net/">商业网页模板与光盘素材</a>
   <span>2011-09-10</span>
  </div>
  </li>
  <li>
  <p></p>
  <div>
   <a href="http://www.jb51.net/">网页制作教程</a>
   <span>2011-09-10</span>
  </div>
  </li>
  <li>
  <p></p>
  <div>
   <a href="http://www.jb51.net/">网站源码整站源代码下载</a>
   <span>2011-09-10</span>
  </div>
  </li>
  <li>
  <p></p>
  <div>
   <a href="http://www.jb51.net/"> 网页电子书下载 </a>
   <span>2011-09-10</span>
  </div>
  </li>
  <li>
  <p></p>
  <div>
   <a href="http://www.jb51.net/"> 免费网页模板下载 </a>
   <span>2011-09-10</span>
  </div>
  </li>
 </ul>
 </div>
</div>
</body>
</html>

Saya harap artikel ini akan membantu reka bentuk pengaturcaraan JavaScript semua orang.

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：JS berdasarkan pelaksanaan berorientasikan objek kemahiran effect_javascript bunga apiArtikel seterusnya：JS berdasarkan pelaksanaan berorientasikan objek kemahiran effect_javascript bunga api

Artikel berkaitan

Lihat lagi