技術標籤：jqueryhtmlcss

首先我們來看一下大概的效果，因為沒有使用已封裝好的外掛，自己寫著玩的，效果比較粗糙，這裡只做個參考~

簡而言之就是滑鼠移到哪裡，哪裡看起來放大。

我的思路是在圖層上新增兩個div，一個是滑鼠選取的區域（圖上黃色的部分），一個是放大後的展示區域，當mouseover事件觸發的時候，滑鼠選取的區域，展示區display變成block。然後觸發mousemove事件的時候就可以讓選區跟著滑鼠跑了。

由於一個頁面裡面多次使用了這個效果，因此我將其簡單的做了一下封裝，以便重複使用。
先將相關效果程式碼附上：
html:
我是給每一個使用這個效果的div命名了一個class以便區分，比如例項裡的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>