JS melaksanakan kod navigasi menegak yang meniru kesan FLASH-tutorial js-php.cn

JS melaksanakan kod navigasi menegak yang meniru kesan FLASH

PHP中文网

Lepaskan： 2017-06-05 15:35:24

asal

1795 orang telah melayarinya

Contoh dalam artikel ini menerangkan kod navigasi menegak menggunakan JS untuk mencapai kesan seperti FLASH. Kongsikan dengan semua orang untuk rujukan anda. Butirannya adalah seperti berikut:

Ini ialah menu navigasi dengan kesan Flash yang dilaksanakan oleh JS CSS Ia disusun secara menegak dan mempunyai keserasian yang baik Ia ditulis oleh rakan-rakan JavaScript Miaowei Classroom .

Kesan berjalan Tangkapan skrin adalah seperti berikut:

Kod 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="www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>仿FLASH的竖排导航</title>
<style>
li { margin-bottom: 2px; list-style: none; background: url(images/bg.gif) repeat-x 0 1px; float: left; clear: left; cursor: pointer-; }
a { display: block; width: 120px; height: 25px; line-height: 25px; position: relative; padding: 0 6px; border: 1px solid #d6d6d6; text-decoration: none; font-size: 12px; color: #555; }
a:hover { font-weight: bold; border: 1px solid #b5b5b5; }
span { display: block; width: 9px; height: 8px; overflow: hidden; background: url(images/ico.gif) no-repeat; position: absolute; top: 8px; right: 10px; }
</style>
<script type="text/javascript">
window.onload=function ()
{
 var aA=document.getElementById(&#39;menu&#39;).getElementsByTagName(&#39;a&#39;);
 var i=0;
 for(i=0;i<aA.length;i++)
 {
  aA[i].iTime=null;
  aA[i].iSpeed=6;
  aA[i].onmouseover=function ()
  {
   goTime(this,30,1);
  }
  aA[i].onmouseout=function ()
  {
   goTime(this,6,-1);
  }
 }
}
function goTime(obj,iTarget,toggle)
{
 if(obj.iTime)
 {
  clearInterval(obj.iTime);
 }
 obj.iTime=setInterval(function()
 {
  if(obj.iSpeed===iTarget)
  {
   clearInterval(obj.iTime);
   obj.iTime=null;
  }
  else
  {
   obj.iSpeed+=2*toggle;
   obj.style.paddingLeft=obj.iSpeed+&#39;px&#39;;
   obj.style.paddingRight=obj.iSpeed+&#39;px&#39;;
  }
 },30);
}
</script>
</head>
<body>
<ul id="menu">
 <li><a href="#" target="_blank">首页<span></span></a></li>
 <li><a href="#" target="_blank">网页特效<span></span></a></li>
 <li><a href="#" target="_blank">CSS相关知识<span></span></a></li>
 <li><a href="#" target="_blank">关于我们<span></span></a></li>
 <li><a href="#" target="_blank">联系我们<span></span></a></li>
</ul>
</body>
</html>

Salin selepas log masuk