一段JavaScript代码,实现悬停预览功能 - Tech - Any.BLOG
Tech

一段JavaScript代码,实现悬停预览功能

作者: Aion  日期: 2006-05-10 09:35

字体大小: 小 中 大
CODE:


<script language=&#34;javascript&#34; type=&#34;text/javascript&#34;>

var sPop = null;

document.write(&#34;<style type='text/css'>&#34;);

document.write(&#34;.PopText { font-family: Tahoma, 宋体; color: #3B676E; background-color: #ffffff; border: 2px #37a1b7 solid; font-size: 14px; font-weight: bold; line-height: 20px; padding: 0px 10px 0px 10px; visibility: hidden; filter: Alpha(Opacity=0)}&#34;);

document.write(&#34;</style>&#34;);

document.write(&#34;<div id='popLayer' style='position:absolute;z-index:1000;filter:revealtrans(duration=.5,transition=12) revealTrans(duration=.5,transition=12) alpha(opacity=90,enabled=100)' class='PopText'></div>&#34;);



function showPopupText() {

  var o=event.srcElement;

  MouseX=event.x;

  MouseY=event.y;

  if(o.alt!=null && o.alt!=&#34;&#34;) { o.pop=o.alt;o.alt=&#34;&#34; }

        if(o.title!=null && o.title!=&#34;&#34;){ o.pop=o.title;o.title=&#34;&#34; } 

    if(o.pop) { 

      o.pop=o.pop.replace(&#34;
&#34;,&#34;
&#34;); 

        o.pop=o.pop.replace(&#34;
&#34;,&#34;
&#34;);  

          }

  if(o.pop!=sPop) {

    sPop=o.pop;

    if(sPop==null || sPop==&#34;&#34;) {

      popLayer.filters[0].apply();

      popLayer.style.visibility=&#34;hidden&#34;;  

      popLayer.filters[0].play();

      popLayer.style.width=&#34;&#34;

    } else {

      if(o.dyclass!=null) popStyle=o.dyclass 

      else popStyle=&#34;PopText&#34;;

             

      popLayer.filters[1].apply();

      popLayer.style.visibility=&#34;visible&#34;;

      popLayer.filters[1].play();

      showIt();

      if (popLayer.offsetWidth>500)

      {

        popLayer.style.width=500

      }

    }

  }

}



function showIt() {

  popLayer.className=popStyle;

  popLayer.innerHTML=sPop;



  popWidth=popLayer.clientWidth;

  popHeight=popLayer.clientHeight;

  if(event.clientX+12+popWidth>document.body.clientWidth) popLeftAdjust=-popWidth-24

    else popLeftAdjust=0;

  if(event.clientY+12+popHeight>document.body.clientHeight) popTopAdjust=-popHeight-24

    else popTopAdjust=0;

  popLayer.style.left=event.clientX+12+document.body.scrollLeft+popLeftAdjust;

  popLayer.style.top=event.clientY+12+document.body.scrollTop+popTopAdjust;

}



document.onmouseover=showPopupText;

</script>





使用例子：
CODE:


<a title=&#34;<div class='words'>PIC NAME: Angel Down
Up&#100;ate: Dec.25.2005</div><img src='http://www.anycc.com/download/angel.down.JPG' class='pic' /><div class='sign'>Anycc.com</div>&#34; href=&#34;#&#34;>把鼠标移动到这里可以看到效果</a>

引用通告地址: http://www.anycc.com/blog/trackback.php?tbID=63&extra=cc5dc4
评论: 19 | 引用: 3 | 阅读: 2092
发表评论
昵　称: 密　码:
网　址: 邮　箱:
验证码: 验证码图片 选　项:
头　像:
内　容: