求助鼠标经过图片放大

http://www.cssplay.co.uk/menu/lightbox2  这是个同时兼容IE5.5, IE6, IE7, Opera 8, Firefox 1.5等浏览器的符合标准的放大显示图片的例子。

解决方案 »

  1.   

    写了一个带放大、缩小效果滴，L@_@K<!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> zoom in image </title>
      <meta name="generator" content="editplus" />
      <meta name="author" content="[email protected]" />
      <meta name="keywords" content="javascript" />
      <meta name="description" content="for javascript region of csdn" />
     </head> <body style="margin: 0px">
      <div style="margin: 100px">
          <input type="text" id="" value="my image" /><br />
          <input type="image" id="imgLogo" style="border: 1px solid green" src="http://www.csdn.net/ui/styles/public_header_footer/logo_csdn.gif" />
      </div>  <script type="text/javascript">
      <!--
    var scale = 0.5;
    var scaleInterval = 0.1;
    var timeInterval = 10;
    var iZoomInIntervalID = -1;
    var iZoomOutIntervalID = -1;
    var oImg = document.getElementById("imgLogo");
    oImg.width = oImg.width * scale;var oDiv;
    var oLImage;oImg.onmouseover = function() {if (oDiv)
    {
        alert();
    }
    else
    {
        oDiv = document.createElement("div");
        oLImage = document.createElement("input");
        oLImage.type = "image";
        oLImage.src = this.src;
        oDiv.appendChild(oLImage);    oLImage.extOriginalWidth = this.width / scale;
        oLImage.extOriginalHeight = this.height / scale;
        oLImage.extCurrentScale = scale;    oLImage.width = this.width;
        oLImage.height = this.height;    oDiv.style.border = "1px dashed red";    oDiv.style.position = "absolute";
        oDiv.style.posLeft = this.offsetLeft;
        oDiv.style.posTop = this.offsetTop;
        oDiv.style.zIndex = 100;    oDiv.onmouseout = function() {
            iZoomOutIntervalID = window.setInterval(zoonOutImgage, timeInterval);
        };    document.body.appendChild(oDiv);    iZoomInIntervalID = window.setInterval(zoonInImgage, timeInterval);
    }
    };function zoonInImgage()
    {
        if (oLImage
            && Math.round(oLImage.extCurrentScale*100) < 100)
        {
            oLImage.extCurrentScale += scaleInterval;
            oLImage.width = oLImage.extOriginalWidth * oLImage.extCurrentScale;
            oLImage.height = oLImage.extOriginalHeight * oLImage.extCurrentScale;
        }
        else if (iZoomInIntervalID != -1)
        {
            window.clearInterval(iZoomInIntervalID);
            iZoomInIntervalID = -1;
        }
    }function zoonOutImgage()
    {
        if (oLImage
            && Math.round(oLImage.extCurrentScale*100) > scale*100)
        {
            oLImage.extCurrentScale -= scaleInterval;
            oLImage.width = oLImage.extOriginalWidth * oLImage.extCurrentScale;
            oLImage.height = oLImage.extOriginalHeight * oLImage.extCurrentScale;
        }
        else if (iZoomOutIntervalID != -1)
        {
            oDiv.style.display = "none";
            oDiv.removeChild(oLImage);
            oLImage = null;
            document.body.removeChild(oDiv);
            oDiv = null;        window.clearInterval(iZoomOutIntervalID);
            iZoomOutIntervalID = -1;
        }
    }  //-->
      </script>
     </body>
    </html>
      

  2.   

    <script language="JavaScript">
    <!--
    var srcX = 1024; //原图大小,可以任意设置
    var srcY = 768;
    var bigX = 400; //预览窗大小,可以任意设置
    var bigY = 400;
    var smallX = 300; //缩略图宽度
    var smallY = srcY * smallX / srcX;
    var viewX = bigX / srcX * smallX; //预览范围
    var viewY = bigY / srcY * smallY;
    var bl = srcX / smallX;//缩小比例
    var border = 1; //边框
     
     function myshow()
     {
        document.getElementById('bigbox').style.display = "block"; 
     }
     
     function myhide()
     {
        document.getElementById('bigbox').style.display = "none"; 
     }
     window.onload=function (){
     
     smallpic.width=smallX;
     smallpic.height=smallY;
     bigpic.width=srcX;
     bigpic.height=srcY;
     view.style.width=viewX;
     view.style.height=viewY;
     smallbox.style.borderWidth=border;
     bigbox.style.borderWidth=border;
     if (window.event){
     
      smallbox.style.width=smallpic.offsetWidth+border*2;
      smallbox.style.height=smallpic.offsetHeight+border*2;
      bigbox.style.width=bigX+border*2;
      bigbox.style.height=bigY+border*2;
     }
     else{
      smallbox.style.width=smallpic.offsetWidth;
      smallbox.style.height=smallpic.offsetHeight;
      bigbox.style.width=bigX;
      bigbox.style.height=bigY;
     }
     move(event);
    }
    function move(e){
     var e = window.event?window.event:e;
     var iebug = 0;  var vX = e.pageX - viewX/2 - smallbox.offsetLeft - border;
      var vY = e.pageY - viewY/2 - smallbox.offsetTop - border;
      iebug = 2; if (vX < 0) vX = 0;
     if (vY < 0) vY = 0;
     if (vX > smallX - viewX - iebug) vX = smallX - viewX - iebug;
     if (vY > smallY - viewY - iebug) vY = smallY - viewY - iebug;
     bigpico.style.marginLeft = - vX * bl 
     bigpico.style.marginTop = - vY * bl 
     view.style.left = vX + smallbox.offsetLeft + border;
     view.style.top = vY + smallbox.offsetTop + border;
    }
    //-->
    </script>
    <style type="text/css">
    <!--
    *{padding:0;margin:0}
    img{display:block;}
    #smallbox{border:1px #c33 solid;float:left;width:0;height:0;overflow:hidden}
    #bigbox{border:1px #c33 solid;width:0px;height:0px;float:left;overflow:hidden}
    #view{border:1px #ddd solid;width:0px;height:0px;position:absolute}
    #head{text-align:center;line-height:40px;font:bold 16px/40px;color:red}
    //-->
    </style>
    <div id="smallbox"><img id="smallpic" src="/image/2.jpg" border="0" onmousemove="move(event)" onmouseout=)"></div>
    <div id="bigbox"><div id="bigpico"><img id="bigpic" src="/image/1.jpg" border="0"></div></div>
    <a href="#" onmousemove="myshow()" onmouseout="myhide()"><div id="view" onmousemove="move(event)"></div></a>
    不知道为什么，这段代码只有FF能正常运行，IE里面有BUG
      

  3.   

    使用以下方法之一插入鼠标经过图像：
    在“插入”栏的“常用”类别中，单击“图像”按钮，然后选择“鼠标经过图像”图标。“插入”栏中显示“鼠标经过图像”图标后，您可以将该图标拖到“文档”窗口中。选择“插入”>“图像对象”>“鼠标经过图像”。设置选项，然后单击“确定”。 
    图像名称 鼠标经过图像的名称。 原始图像 页面加载时要显示的图像。在文本框中输入路径，或单击“浏览”并选择该图像。 鼠标经过图像 鼠标指针滑过原始图像时要显示的图像。输入路径或单击“浏览”选择该图像。 预载鼠标经过图像 将图像预先加载浏览器的缓存中，以便用户将鼠标指针滑过图像时不会发生延迟。 替换文本 这是一种（可选）文本，为使用只显示文本的浏览器的访问者描述图像。 单击时，转到 URL 用户单击鼠标经过图像时要打开的文件。输入路径或单击“浏览”并选择该文件。 注： 如果您不为该图像设置链接，Dreamweaver 将在 HTML 源代码中插入一个空链接 (#)，该链接上将附加鼠标经过图像行为。如果删除空链接，鼠标经过图像将不再起作用。 
    选择“文件”>“在浏览器中预览”，或按 F12。 
    在浏览器中，将鼠标指针移过原始图像以查看鼠标经过图像。 
    注： 不能在“设计”视图中看到鼠标经过图像的效果。