自己写了一个放大镜效果jQuery+css+html

首先我们来看一下大概的效果，因为没有使用已封装好的插件，自己写着玩的，效果比较粗糙，这里只做个参考~

简而言之就是鼠标移到哪里，哪里看起来放大。

我的思路是在图层上新增两个div，一个是鼠标选取的区域（图上黄色的部分），一个是放大后的展示区域，当mouseover事件触发的时候，鼠标选取的区域，展示区display变成block。然后触发mousemove事件的时候就可以让选区跟着鼠标跑了。

由于一个页面里面多次使用了这个效果，因此我将其简单的做了一下封装，以便重复使用。
先将相关效果代码附上：
html:
我是给每一个使用这个效果的div命名了一个class以便区分，比如实例里的focus1，
class=“occCaseMain focus1”

	<div class="occCaseMain  focus1">
				<div class="occCaseMainL">
					<div class="occCaseMainImg bigimageBox">
				<img src="./images/Jewelryinspectionsystem.png" class="bigimage">
					<div class="magnifier"></div>   //鼠标选取区域
						</div>
					</div>
						<div class="right">//放大后展示区域
				<img src="" mirror>
						</div>
						........................
							</div>

css:这是在原有样式上的一个新增，主要是注意定位position，其他没什么重点

.right {
	position: absolute;
	overflow: hidden;
	width: 350px;
	height: 350px;
	left: 650px;
	top: 0;
	display: none;
	z-index: 999;
}
.right img{
	position: absolute;
    width:954px;
    height:594px;
}
.magnifier {
	width: 150px;
	height: 150px;
	background: rgba(254, 238, 167, 0.4);
	/* 半透明效果 */
	position: absolute;
	z-index: 2;
	display: none;
}
.occCaseMain {
	margin: 0 auto;
	width: 1280px;
	height: 500px;
	background: #fff;
	position: relative;
}

JavaScript:
var bigger1 = new bigger(); 构造函数创建实例对象，这个不用多说

	<script type="text/javascript">
			var bigger1 = new bigger();
			var bigger2 = new bigger();
			var bigger3 = new bigger();
			var bigger4 = new bigger();

			bigger1.init({
				el: '.focus1'
			})
			bigger2.init({
				el: '.focus2'
			})
			bigger3.init({
				el: '.focus3'
			})
			bigger4.init({
				el: '.focus4'
			})

			function bigger() {
				this.init = function (obj) {
					var _this = this;
					this.dom = $(obj.el);
					for (var i in obj) {
						this[i] = obj[i]
					}
					_this.event();
				},
				this.event=function(){
					var _this = this;
					this.dom.find(".bigimageBox").mouseover(function (even) {
						_this.dom.find('.magnifier').css('display', 'block'); //遮罩显示
						_this.dom.find('.right').css('display', 'block');
					})
				//当鼠标在原图中移动的时候

				this.dom.find(".bigimageBox").mousemove(function (e) {
					//放大镜框跟着鼠标移动而移动
					//获取鼠标位置
					var pageX = e.pageX;
					var pageY = e.pageY;
					//获取原图在文档中的偏移位置
					var offsetX = _this.dom.find('.bigimage').offset().left;
					var offsetY = _this.dom.find('.bigimage').offset().top;
					//计算鼠标在原图里的相对位置
					var relativeX = pageX - offsetX;
					var relativeY = pageY - offsetY;
					//鼠标在非边界的时候处于放大镜框的中心，根据鼠标位置计算放大镜的位置
					var magOffsetX = _this.dom.find('.magnifier').width() / 2;
					var magOffsetY = _this.dom.find('.magnifier').height() / 2;

					var address = _this.dom.find('.bigimage').attr("src");
					_this.dom.find("[mirror]").attr("src", address);

					_this.dom.find('.magnifier').css({
						left: relativeX - magOffsetX + 'px',
						top: relativeY - magOffsetY + 'px'
					});

					//然后获取放大镜框的最新位置，处理边界情况会使用到
					var magX = _this.dom.find('.magnifier').position().left;
					var magY = _this.dom.find('.magnifier').position().top;

					//处理边界问题！！！！！！！！！！！！！！！
					//首先确定边界！
var maxMagX = _this.dom.find('.bigimage').width() - _this.dom.find('.magnifier').width()
var maxMagY = _this.dom.find('.bigimage').height() - _this.dom.find('.magnifier').height()
					// 左边界
					if (magX <= 0) {
						_this.dom.find('.magnifier').css('left', '0px');
					}
					// 右边界
					if (magX >= maxMagX) {
						_this.dom.find('.magnifier').css('left', maxMagX + 'px');
					}
					// 上边界
					if (magY <= 0) {
						_this.dom.find('.magnifier').css('top', '0px');
					}
					// 下边界
					if (magY >= maxMagY) {
						_this.dom.find('.magnifier').css('top', maxMagY + 'px');
					}

					//实现图片随着放大镜框的移动而移动
					//按照比例缩放移动原图窗口中的图片
					var originX = magX * 1.5;
					var originY = magY * 1.5;

					_this.dom.find('[mirror]').css({
						left: -originX + 'px',
						top: -originY + 'px'
					});
				})
				//鼠标离开
				this.dom.find('.bigimageBox').mouseout(function () {
					_this.dom.find(".magnifier").css("display", "none");
					_this.dom.find('.right').css("display", "none");
				   })
				}
			}
		</script>