小春BOOK

导航

公告

统计

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>
<title>很酷的鼠标滑过小图显示大图预览效果</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<!--把下面代码加到<head>与</head>之间-->
<style type="text/css">
 *{
  padding:0;
  margin:0;
 }
 html{
  overflow:-moz-scrollbars-vertical;
 }
 body{
  font:12px/22px "宋体";
  word-break:break-all;
  text-align:left;
  background:#C0C0C0;
  color:#4E4E4E;
 }
 ul,li{
  list-style:none;
 }
 a{
  color:#333;
  text-decoration:none;
 }
 a:hover{
  color:#ff722d;
  text-decoration:none;
 }
 img{
  border:0;
 }
 a img,a:hover img{
  border:0;
 }
 .latestWeb{
  width:560px;
  margin:10px auto 0;
 }
 .latestWeb ul{
  overflow:hidden;
  _height:1%;
 }
 .latestWeb li{
  float:left;
  border:1px solid #EBEAEA;
  width:150px;
  padding:17px 0 14px 22px;
  margin:14px 18px 0 0;
 }
 .trans_msg{
  filter:alpha(opacity=100,enabled=1) revealTrans(duration=.2,transition=1) blendtrans(duration=.2);
 }
 div.bodycontent{
  font-family:Arial,Helvetica,sans-serif;
  padding:0 10px 10px 13px;
  color:#555;
  line-height:22px;
  text-align:justify;
  text-justify:inter-ideograph;
 }
 div.bodycontent ul{
  margin-left:0px;
 }
</style>
<script language="javascript">
 function toolTip(str) {
 }
</script>
</head>
<body>
<!--把下面代码加到<body>与</body>之间-->
    <div class="latestWeb">
        <ul>
         <li class="">
          <div style="width:90px;height:65px;"><a href="http://www.update8.com%22%3e%3cimg/ src="http://www.baidu.com/img/baidu_sylogo1.gif"  width=130px height=65px onMouseOver="toolTip('<img src=http://www.baidu.com/img/baidu_sylogo1.gif>')" onMouseOut="toolTip()"></a></div>
         </li>
         <li class="">
          <div style="width:90px;height:65px;"><a href="http://www.33567.cn%22%3e%3cimg/ src="http://nuomi.xnimg.cn/image_new/logo/logo_new.png"  width=130px height=65px onMouseOver="toolTip('<img src=http://nuomi.xnimg.cn/image_new/logo/logo_new.png>')" onMouseOut="toolTip()"></a></div>
         </li>
        </ul>
    </div>
<script language="javascript">
 function getViewportHeight() {
  if (window.innerHeight!=window.undefined) return window.innerHeight;
  if (document.compatMode=='CSS1Compat') return document.documentElement.clientHeight;
  if (document.body) return document.body.clientHeight;
  return window.undefined;
 }
 function getViewportWidth() {
  if (window.innerWidth!=window.undefined) return window.innerWidth;
  if (document.compatMode=='CSS1Compat') return document.documentElement.clientWidth;
  if (document.body) return document.body.clientWidth;
  return window.undefined;
 }
 /**
 * Gets the real scroll top
 */
 function getScrollTop() {
  if (self.pageYOffset) // all except Explorer
  {
   return self.pageYOffset;
  }
  else if (document.documentElement && document.documentElement.scrollTop)
  // Explorer 6 Strict
  {
   return document.documentElement.scrollTop;
  }
  else if (document.body) // all other Explorers
  {
   return document.body.scrollTop;
  }
 }
 function getScrollLeft() {
  if (self.pageXOffset) // all except Explorer
  {
   return self.pageXOffset;
  }
  else if (document.documentElement && document.documentElement.scrollLeft)
  // Explorer 6 Strict
  {
   return document.documentElement.scrollLeft;
  }
  else if (document.body) // all other Explorers
  {
   return document.body.scrollLeft;
  }
 }
 /*
 渐变的弹出图片
 使用方法:
 将js包含在网页body的结束标签后
 调用方法:
 <a href="pages.jpg" target='_blank' onMouseOver="toolTip('<img src=http://zhouzh:90/templet/T_yestem_channel/pages_small.jpg>')" onMouseOut="toolTip()"><img src='pages_small.jpg' border=0 width=30 height=20 align="absmiddle" title="点击看大图"></a>
 必须CSS样式
 .trans_msg
 {
 filter:alpha(opacity=100,enabled=1) revealTrans(duration=.2,transition=1) blendtrans(duration=.2);
 }
 */
 //--初始化变量--
 var rT=true;//允许图像过渡
 var bT=true;//允许图像淡入淡出
 var tw=150;//提示框宽度
 var endaction=false;//结束动画
 var ns4 = document.layers;
 var ns6 = document.getElementById && !document.all;
 var ie4 = document.all;
 offsetX = 10;
 offsetY = 20;
 var toolTipSTYLE="";
 function initToolTips()
 {
  tempDiv = document.createElement("div");
  tempDiv.id = "toolTipLayer";
  tempDiv.style.position = "absolute";
  tempDiv.style.display = "none";
  document.body.appendChild(tempDiv);
  if(ns4||ns6||ie4)
  {
   if(ns4) toolTipSTYLE = document.toolTipLayer;
   else if(ns6) toolTipSTYLE = document.getElementById("toolTipLayer").style;
   else if(ie4) toolTipSTYLE = document.all.toolTipLayer.style;
   if(ns4) document.captureEvents(Event.MOUSEMOVE);
   else
   {
    toolTipSTYLE.visibility = "visible";
    toolTipSTYLE.display = "none";
   }
   document.onmousemove = moveToMouseLoc;
  }
 }
 function toolTip(msg, fg, bg)
 {
  try {
   if(toolTip.arguments.length < 1) // hide
   {
    if(ns4)
    {
    toolTipSTYLE.visibility = "hidden";
    }
    else
    {
     //--图象过渡,淡出处理--
     if (!endaction) {toolTipSTYLE.display = "none";}
     if (rT) document.all("msg1").filters[1].Apply();
     if (bT) document.all("msg1").filters[2].Apply();
     document.all("msg1").filters[0].opacity=0;
     if (rT) document.all("msg1").filters[1].Play();
     if (bT) document.all("msg1").filters[2].Play();
     if (rT){
      if (document.all("msg1").filters[1].status==1 || document.all("msg1").filters[1].status==0){
       toolTipSTYLE.display = "none";}
     }
     if (bT){
      if (document.all("msg1").filters[2].status==1 || document.all("msg1").filters[2].status==0){
       toolTipSTYLE.display = "none";}
     }
     if (!rT && !bT) toolTipSTYLE.display = "none";
    //----------------------
    }
   }
   else // show
   {
    if(!fg) fg = "#777777";
    if(!bg) bg = "#eeeeee";
    var content =
    '<table id="msg1" name="msg1" border="0" cellspacing="0" cellpadding="1" bgcolor="' + fg + '" class="trans_msg"><td>' +
    '<table border="1" cellspacing="2" cellpadding="3" bgcolor="' + bg +
    '"><td><font face="Arial" color="' + fg +
    '" size="-2">' + msg +
    '</font></td></table></td></table>';
    if(ns4)
    {
     toolTipSTYLE.document.write(content);
     toolTipSTYLE.document.close();
     toolTipSTYLE.visibility = "visible";
    }
    if(ns6)
    {
     document.getElementById("toolTipLayer").innerHTML = content;
     toolTipSTYLE.display='block'
    }
    if(ie4)
    {
     document.all("toolTipLayer").innerHTML=content;
     toolTipSTYLE.display='block'
     //--图象过渡,淡入处理--
     var cssopaction=document.all("msg1").filters[0].opacity
     document.all("msg1").filters[0].opacity=0;
     if (rT) document.all("msg1").filters[1].Apply();
     if (bT) document.all("msg1").filters[2].Apply();
     document.all("msg1").filters[0].opacity=cssopaction;
     if (rT) document.all("msg1").filters[1].Play();
     if (bT) document.all("msg1").filters[2].Play();
    //----------------------
    }
   }
  } catch(e) {}
 }
 function moveToMouseLoc(e)
 {
  var scrollTop = getScrollTop();
  var scrollLeft = getScrollLeft();
  if(ns4||ns6)
  {
   x = e.pageX + scrollLeft;
   y = e.pageY - scrollTop;
  }
  else
  {
   x = event.clientX + scrollLeft;
   y = event.clientY;
  }
  if (x-scrollLeft > getViewportWidth() / 2) {
   x = x - document.getElementById("toolTipLayer").offsetWidth - 2 * offsetX;
  }
  if ((y+document.getElementById("toolTipLayer").offsetHeight+offsetY)>getViewportHeight()) {
   y = getViewportHeight()-document.getElementById("toolTipLayer").offsetHeight-offsetY;
  }
  toolTipSTYLE.left = (x + offsetX)+'px';
  toolTipSTYLE.top = (y + offsetY + scrollTop)+'px';
  return true;
 }
 initToolTips();
</script>
</body>
</html>

posted on 2012-11-27 15:59 xiaoc.li 阅读(...) 评论(...)  编辑 收藏