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

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

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

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

Html代码  

1. <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, 

Js代码  

1.  showLoadPanel = function(imgSic,moveTop22,moveLeft22){  
2.     // $("#loadPanel").height($(document).height());  
3.         var key222='assets/uploads/product';  
4.         if(com.whuang.hsj.contains(imgSic,key222)){  
5.             var index22=imgSic.indexOf(key222);  
6.             imgSic=imgSic.substring(index22);  
7.             // alert(imgSic);  
8.         }  
9.         var widthStr=400;  
10.         var heightStr=250;  
11.         var childElement="<img src=\""+imgSic+"\"  width=\""+widthStr+"px\"  height=\""+heightStr+"px\" />";  
12.         // alert(childElement);  
13.         $("#loadPanel").html(childElement);  
14.         // $("#loadPanel").css("background-image", "url(\""+imgSic+"\")");  
15.         $("#loadPanel").css("top",moveTop22-20);  
16.         $("#loadPanel").css("left",moveLeft22-20);  
17.         if(isIEtest){//如果是IE  
18.             widthStr+=3;  
19.             heightStr+=2;  
20.         }  
21.         $("#loadPanel").css("width",widthStr+"px");//比widthStr大一些  
22.         $("#loadPanel").css("height",heightStr+"px");//比heightStr大一些  
23.         $("#loadPanel").click(function(){  
24.             hideLoadPanel();  
25.         });  
26.           
27.         $("#loadPanel").show('normal');  
28. };  

 div的id是loadPanel,对应的css:

Css代码  

1. #loadPanel {  
2.     overflow-y: auto;  
3.     overflow-x: auto;  
4.     /*width: 400px;*/  
5.     /*height: 250px;*/  
6.   
7.     position: absolute;  
8.     background-color: #9C89CB;  
9.     z-index: 99999;  
10.     background-repeat: no-repeat;  
11.     background-position: center;  
12. }  

 最后解决了问题: