移动的链接提示

人气：　来源：本站原创　作者：佚名　所属栏目：导航类　[切换到繁體中文]

介绍：当鼠标经过链接时，下面会出现一个从左向右移动的提示文字。

演示：

<!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,td{font-size: 12px;}--></style>
<script language="javascript">

window.onerror = null;
 var bName = navigator.appName;
 var bVer = parseInt(navigator.appVersion);
 var NS4 = (bName == "Netscape" && bVer >= 4);
 var IE4 = (bName == "Microsoft Internet Explorer" && bVer >= 4);
 var NS3 = (bName == "Netscape" && bVer < 4);
 var IE3 = (bName == "Microsoft Internet Explorer" && bVer < 4);

//-----------------------------------------------------------
 var scroll_length = 150; //The scroll length
 var time_length =50; //Scroll delay in milliseconds
 var begin_pos = 10; //Start position of scroll hint
 var i=begin_pos;
 var j=i;
 var scroll_dir = "right"; // To scroll left use "left"
                           // To scroll right use "right"
//-----------------------------------------------------------
 
if (NS4 || IE4) {
 if (navigator.appName == "Netscape") {
 layerStyleRef="layer.";
 layerRef="document.layers";
 styleSwitch="";
 }else{
 layerStyleRef="layer.style.";
 layerRef="document.all";
 styleSwitch=".style";
 }
}

//SCROLL
function Scroll(layerName)
{
 if (NS4 || IE4)
 { 
  if(scroll_dir=="right")
  {
   if(i<(begin_pos+scroll_length))
   {
    eval(layerRef+'["'+layerName+'"]'+
    styleSwitch+'.visibility="visible"');
    eval(layerRef+'["'+layerName+'"]'+ styleSwitch+'.left="'+(i)+'"');
    i++;
    j++;
   }
  }
  if(scroll_dir=="left")
  {
   if(i>(begin_pos-scroll_length))
   {
    eval(layerRef+'["'+layerName+'"]'+
    styleSwitch+'.visibility="visible"');
    eval(layerRef+'["'+layerName+'"]'+ styleSwitch+'.right="'+(-i)+'"');
    i--;
    j--;
   }
  }
  if(i==j)
  {
   setTimeout("Scroll('"+layerName+"')",time_length);
  }
 }
}

//STOP SCROLLING
function StopScroll(layerName)
{
 if(scroll_dir=="right")
 {
  i=begin_pos+scroll_length;
  eval(layerRef+'["'+layerName+'"]'+
  styleSwitch+'.left="'+(i)+'"');
  hideLayer(layerName);
 }
 if(scroll_dir=="left")
 {
  i=begin_pos-scroll_length;
  eval(layerRef+'["'+layerName+'"]'+
  styleSwitch+'.right="'+(-i)+'"');
  hideLayer(layerName);
 }
}

function reset()
{ 
 i=begin_pos;
 j=i;
}

// HIDE HINT
function hideLayer(layerName)
{
 if (NS4 || IE4)
 {
  eval(layerRef+'["'+layerName+'"]'+
  styleSwitch+'.visibility="hidden"');
 }
}

</script>
</head>
<body bgcolor="" 无>
<table width="100%" height="1000" border="0" cellpadding="10" cellspacing="5">
<tr>
<td valign="top">
<a href="#" class="link" onmouseover="javascript:reset();Scroll('prem_hint');" onmouseout="javascript:StopScroll('prem_hint');">Move your mouse over</a>
</center>
<div id="prem_hint" style="position:relative; visibility:hidden" class="prem_hint">
<b>这是一个有提示的链接</b>
</div>
</td>
</tr>
</table>
</body>
</html>

[Ctrl+A全选提示：你可先修改部分代码，再按运行]

下面教你如何应用此特效：
　--------------------------------------------------------------------------------------
　　需要在<body 这里>加入的代码：无
　--------------------------------------------------------------------------------------

以下代码加到<head>…</head>中

以下代码加到<body>…</body>中

window.onerror = null;
var bName = navigator.appName;
var bVer = parseInt(navigator.appVersion);
var NS4 = (bName == "Netscape" && bVer >= 4);
var IE4 = (bName == "Microsoft Internet Explorer" && bVer >= 4);
var NS3 = (bName == "Netscape" && bVer < 4);
var IE3 = (bName == "Microsoft Internet Explorer" && bVer < 4);

//-----------------------------------------------------------
var scroll_length = 150; //The scroll length
var time_length =50; //Scroll delay in milliseconds
var begin_pos = 10; //Start position of scroll hint
var i=begin_pos;
var j=i;
var scroll_dir = "right"; // To scroll left use "left"
// To scroll right use "right"
//-----------------------------------------------------------

if (NS4 || IE4) {
if (navigator.appName == "Netscape") {
layerStyleRef="layer.";
layerRef="document.layers";
styleSwitch="";
}else{
layerStyleRef="layer.style.";
layerRef="document.all";
styleSwitch=".style";
}
}

//SCROLL
function Scroll(layerName)
{
if (NS4 || IE4)
{
  if(scroll_dir=="right")
  {
   if(i<(begin_pos+scroll_length))
   {
    eval(layerRef+'["'+layerName+'"]'+
    styleSwitch+'.visibility="visible"');
    eval(layerRef+'["'+layerName+'"]'+ styleSwitch+'.left="'+(i)+'"');
    i++;
    j++;
   }
  }
  if(scroll_dir=="left")
  {
   if(i>(begin_pos-scroll_length))
   {
    eval(layerRef+'["'+layerName+'"]'+
    styleSwitch+'.visibility="visible"');
    eval(layerRef+'["'+layerName+'"]'+ styleSwitch+'.right="'+(-i)+'"');
    i--;
    j--;
   }
  }
  if(i==j)
  {
   setTimeout("Scroll('"+layerName+"')",time_length);
  }
}
}

//STOP SCROLLING
function StopScroll(layerName)
{
if(scroll_dir=="right")
{
  i=begin_pos+scroll_length;
  eval(layerRef+'["'+layerName+'"]'+
  styleSwitch+'.left="'+(i)+'"');
  hideLayer(layerName);
}
if(scroll_dir=="left")
{
  i=begin_pos-scroll_length;
  eval(layerRef+'["'+layerName+'"]'+
  styleSwitch+'.right="'+(-i)+'"');
  hideLayer(layerName);
}
}

function reset()
{
i=begin_pos;
j=i;
}

// HIDE HINT
function hideLayer(layerName)
{
if (NS4 || IE4)
{
eval(layerRef+'["'+layerName+'"]'+
styleSwitch+'.visibility="hidden"');
}
}

</script>

<a href="#" class="link" onmouseover="javascript:reset();Scroll('prem_hint');" onmouseout="javascript:StopScroll('prem_hint');">Move your mouse over</a>
</center>
<div id="prem_hint" style="position:relative; visibility:hidden" class="prem_hint">
<b>这是一个有提示的链接</b>
</div>