鼠标悬停缩放图像 [英] onmouseover zoom the image

问题描述

如何在包含放大图像的弹出div上将鼠标悬停在图像上来缩放图像.

我尝试在ie8中进行以下操作，但未在firefox中工作.mouseover并未在firefox中提高.

How to zoom the image on mouseover of image with popup div containg enlarged image.

i tried following working in ie8 but not in firefox.mouseover is not raising in firefox.

<script language="javascript" type="text/javascript">
    function getElementLeft(elm) {
        var x = 0;

        //set x to elm’s offsetLeft
        x = elm.offsetLeft;

        //set elm to its offsetParent
        elm = elm.offsetParent;

        //use while loop to check if elm is null
        // if not then add current elm’s offsetLeft to x
        //offsetTop to y and set elm to its offsetParent

        while (elm != null) {
            x = parseInt(x) + parseInt(elm.offsetLeft);
            elm = elm.offsetParent;
        }
        return x;
    }

    function getElementTop(elm) {
        var y = 0;

        //set x to elm’s offsetLeft
        y = elm.offsetTop;

        //set elm to its offsetParent
        elm = elm.offsetParent;

        //use while loop to check if elm is null
        // if not then add current elm’s offsetLeft to x
        //offsetTop to y and set elm to its offsetParent

        while (elm != null) {
            y = parseInt(y) + parseInt(elm.offsetTop);
            elm = elm.offsetParent;
        }

        return y;
    }

    function Large(obj) {
        var imgbox = document.getElementById("imgbox");
        imgbox.style.visibility = 'visible';
        var img = document.createElement("img");
        img.src = document.getElementById(obj.id + "img").src;// obj.firstChild.src; // obj.src;
        img.style.width = '500px';
        img.style.height = '400px';

        if (img.addEventListener) {
            img.addEventListener('mouseout', Out, false);
        } else {
            img.attachEvent('onmouseout', Out);
        }
        imgbox.innerHTML = '';
        imgbox.appendChild(img);
        imgbox.style.left = (getElementLeft(obj) - 50) + 'px';
        imgbox.style.top = (getElementTop(obj) - 50) + 'px';
    }


    function Out() {
        document.getElementById("imgbox").style.visibility = 'hidden';
    }


</script>

谢谢，

thanks,

推荐答案

我建​​议您使用 jQuery [跨浏览器兼容性 [ ^ ]，我发现此插件:jQZoom [

I advise you to use jQuery[^] for cross browser compatability[^] and this plugin I found: jQZoom[^].

That plugin looks quite nice, so give it a try!

Regards,

Manfred

曼弗雷德(Manfred)已经给您写了好建议.因为您将遇到浏览器兼容性问题，所以最好的办法是找到一些基于jquery，mootools，prototype或任何其他js框架的可行解决方案...
看这里，也许您会找到适合您需求的解决方案:
1. http://jsfiddle.net/jquerybyexample/nPeaV/ [ how-to-zoom-image-on- mouse-over-using.html [ ^ ]
3. zoomimage [ ^ ]
4. jquery_zoom_hover/ [ ^ ]
5. jquery-image-zoom [ jquery-zoom [

Hi,

Manfred already wrote good advice to you. Because you will get into trouble with browser compatibility, the best thing to do is to find some working solution based on jquery,mootools, prototype or any other js framework available out there...
Look here maybe you find solution that will fit your needs:
1. http://jsfiddle.net/jquerybyexample/nPeaV/[^]
2. how-to-zoom-image-on-mouse-over-using.html[^]
3. zoomimage[^]
4. jquery_zoom_hover/[^]
5. jquery-image-zoom[^]
6. jquery-zoom[^]
7. ... for more use google :)

这篇关于鼠标悬停缩放图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！