js特效出现的问题-优快云博客

本文介绍了一种在订餐系统中实现图片放大的特效方法，并针对IE9浏览器出现滚动条的问题提供了解决方案。核心思路是通过调整div与图片尺寸确保在IE9下正常显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在做订餐系统的时候,我想做一个特效,如下

点击菜品图片时图片会放大

核心思路:是在原图的上面显示一个div,这个div中有image标签用于显示大图,当然div和原图不在同一个图层(通过z-index 实现).

并且div和image的width和height是相同的

<div style="top: 150px; left: 552px; width: 400px; height: 250px; display: block;" id="loadPanel"><img src="assets/uploads/product/imgpath_1413547702_337.jpg" width="400px" height="250px"></div>

但是在IE 9 中显示有问题

IE 中出现了水平滚动条和竖直滚动条!!!

IE9的具体版本:

怎么办呢?

我的思路是:判断浏览器类型,如果是IE,则设置div的width在img的width加上3px, 设置div的height在img的height加上2px,

 showLoadPanel = function(imgSic,moveTop22,moveLeft22){
    // $("#loadPanel").height($(document).height());
        var key222='assets/uploads/product';
        if(com.whuang.hsj.contains(imgSic,key222)){
            var index22=imgSic.indexOf(key222);
            imgSic=imgSic.substring(index22);
            // alert(imgSic);
        }
        var widthStr=400;
        var heightStr=250;
        var childElement="<img src=\""+imgSic+"\"  width=\""+widthStr+"px\"  height=\""+heightStr+"px\" />";
        // alert(childElement);
        $("#loadPanel").html(childElement);
        // $("#loadPanel").css("background-image", "url(\""+imgSic+"\")");
        $("#loadPanel").css("top",moveTop22-20);
        $("#loadPanel").css("left",moveLeft22-20);
        if(isIEtest){//如果是IE
            widthStr+=3;
            heightStr+=2;
        }
        $("#loadPanel").css("width",widthStr+"px");//比widthStr大一些
        $("#loadPanel").css("height",heightStr+"px");//比heightStr大一些
        $("#loadPanel").click(function(){
            hideLoadPanel();
        });
        
        $("#loadPanel").show('normal');
};

div的id是loadPanel,对应的css:

#loadPanel {
    overflow-y: auto;
    overflow-x: auto;
    /*width: 400px;*/
    /*height: 250px;*/

    position: absolute;
    background-color: #9C89CB;
    z-index: 99999;
    background-repeat: no-repeat;
    background-position: center;
}

最后解决了问题: