如果我们用上一篇文章里的方案在ie8试验一下，就会发现一些问题，一个是鼠标移动时放大镜不停的闪烁，另一个是当图片发生旋转时放大镜显示的部分不是鼠标指向的部分。
第一个问题的原因很简单，ie8下放大镜的div不是透明的，放大镜的存在，直接触发小图的鼠标mousemove事件啦。解决方法是要么加入一个监听放大镜的事件，要么把放大镜的位置放在小图的右上方（只要不遮挡小图就可以）；第二个问题的原因是获取的offsetx，offsety在i小图旋转时候的相对坐标，而大图并没有被旋转，所以我们将相对坐标转换一下。
HTML内容如下：
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"></html><head>
<title>zoom</title>
<meta charset="UTF-8">
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name=”renderer” content=”webkit” />
<script src="./js/html5shiv.js"></script>
<link rel="stylesheet" type="text/css" href="./css/zoom.css">
</head>
<body>
<div class="step_wrapper">啦啦啦，我是萌萌的考拉君</div>
<div class="content">
<div id="leftWarp" class="leftWarp">
<div id="imgSrc" class="imgSrc" style="height: 100%">
<a id="zoom" >
<img id="currentImg" class="currentImg" src="./img/Koala.jpg" alt="" style="max-width:98%; max-height: 98%">
</a>
</div>
<ul class="imgBtn currentImgBtns" id="currentImgBtns">
<li class="fl" id="reduction">原图</li>
<li class="fl" id="routerAnti90">逆时针旋转90度</li>
<li class="fl" id="router90">顺时针旋转90度</li>
<li class="fl" id="router180">180度旋转</li>
</ul>
<div>
<input id="angle" type="hidden" value="0">
</div>
</div>
<div class="rightWarp" id="rightWarp">
</div>
<div id="currentImgDiv">
<span style="color: #fff;">This is 放大镜 speaking！！！</span>
</div>
<div id="currentImgDiv2">
<span style="color: #fff;">Here is 放大镜2 ！！！</span>
<img id="currentImg2" class="currentImg2" src="" alt="">
</div>
</body>
<script type="text/javascript" src="./js/jquery.min.js"></script>
<script type="text/javascript" src="./js/zoom.js"></script>
<script type="text/javascript" src="./js/html5shiv.js"></script>
</html>
在ie8下，小图与大图之间的关系见下图。左侧是小图，右侧是大图。
那么对于小图的监听事件修改如下：
// Constants
var $IMAGE_URL = $element.attr("src");
var NATIVE_IMG = new Image();
NATIVE_IMG.src = $element.attr("src");
// Default attributes
var defaults = {
round : true,
最低0.47元/天 解锁文章
2092
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
