這篇文章給大家詳細分析了用jquery實現放大鏡效果的方法，以及程式碼分享，有興趣的學習下。
jquery寫的兩種放大鏡效果，沒有使用到外掛。調理和思路清晰。不是使用物件導向方式寫的，初學者較容易看懂。廢話不多說，看程式碼。圖片這裡就不上傳了，大家自己找。最好是找到比例的，這樣效果比較好。
<body>
<p id="father">
<p id="container">
<img src="/static/imghwm/default1.png" data-src="img/400_1.jpg" class="lazy" style="max-width:90%" alt="透過jquery技術實現放大鏡" >
<img src="/static/imghwm/default1.png" data-src="img/400_2.jpg" class="lazy" alt="透過jquery技術實現放大鏡" >
<p class="shade"></p>
</p>
<p class="small first"><img src="/static/imghwm/default1.png" data-src="img/50_1.jpg" class="lazy" alt="透過jquery技術實現放大鏡" ></p>
<p class="small second"><img src="/static/imghwm/default1.png" data-src="img/50_2.jpg" class="lazy" alt="透過jquery技術實現放大鏡" ></p>
</p>
<p class="big">
<img src="/static/imghwm/default1.png" data-src="img/800_1.jpg" class="lazy" style="max-width:90%" alt="透過jquery技術實現放大鏡" >
<img src="/static/imghwm/default1.png" data-src="img/800_2.jpg" class="lazy" alt="透過jquery技術實現放大鏡" >
</p>
</body>css程式碼
*{padding: 0; margin: 0;}
#father .small{width: 50px; height: 50px; border: 2px solid #ccc; bottom: 0; position: absolute;}
#father .second{left: 70px;}
.third{left: 140px;}
#father{position: relative; top: 100px; left: 50px; height: 460px;}
#container{position: absolute; width: 400px; height: 400px;}
#container img{position: absolute; display: none;}
.shade{width: 200px; height: 200px; position: absolute; background: #000; opacity: 0.4; top: 0;
left: 0; display: none;}
.big{width: 400px; height: 400px; position: absolute; top: 100px; overflow: hidden; left: 500px; display: none;}
.big img{width: 800px; height: 800px; position: absolute; display: none;}js程式碼
<script type="text/javascript" src='js/jquery-1.12.4.min.js'></script>
<script type="text/javascript">
$(function () {
changePic('.first',0);
changePic('.second',1);
var shadeWidth = $('.shade').width(),//阴影的宽度
shadeHeight = $('.shade').height(),//阴影的高度
middleWidth = $('#container').width(),//容器的宽度
middleHeight = $('#container').height(),//容器的高度
bigWidth = $('.big').width(),//放大图片盒子的宽度
bigHeight = $('.big').height(),//放大图片盒子的高度
rateX = bigWidth / shadeWidth,//放大区和遮罩层的宽度比例
rateY = bigHeight / shadeHeight;//放大区和遮罩层的高度比例
//当鼠标移入与移出时阴影与放大去显现/消失
$('#container').hover(function() {
$('.shade').show();
$('.big').show();
}, function() {
$('.shade').hide();
$('.big').hide();
}).mousemove(function(e) {//当鼠标移动时，阴影和放大区图片进行移动
//记录下光标距离页面的距离
var x = e.pageX,
y = e.pageY;
//设置遮罩层的位置
$('.shade').offset({
top: y-shadeHeight/2,
left: x-shadeWidth/2
});
//获取遮罩层相对父元素的位置
var cur = $('.shade').position(),
_top = cur.top,
_left = cur.left,
hdiffer = middleHeight - shadeHeight,
wdiffer = middleWidth - shadeWidth;
if (_top < 0) _top = 0;
else if (_top > hdiffer) _top = hdiffer;
if (_left < 0) _left = 0;
else if (_left > wdiffer) _left =wdiffer;
//判断完成后设置遮罩层的范围
$('.shade').css({
top: _top,
left: _left
});
//设置放大区图片移动
$('.big img').css({
top: - rateY*_top,
left: - rateX*_left
});
});;
//封装的改变图片显示的函数
function changePic (element,index) {
$(element).click(function() {
$('#container img').eq(index).css('display', 'block').siblings().css('display', 'none');
$('.big img').eq(index).css('display', 'block').siblings().css('display', 'none');
});
}
});以上是常用的，下面這個是在原始圖基礎上放大的
htm
<body>
<p id="father">
<p id="container">
<img src="/static/imghwm/default1.png" data-src="img/400_1.jpg" class="lazy" style="max-width:90%" alt="透過jquery技術實現放大鏡" >
<img src="/static/imghwm/default1.png" data-src="img/400_2.jpg" class="lazy" alt="透過jquery技術實現放大鏡" >
<img src="/static/imghwm/default1.png" data-src="img/400_3.jpg" class="lazy" alt="透過jquery技術實現放大鏡" >
<p class="shade">
<img src="/static/imghwm/default1.png" data-src="img/800_1.jpg" class="lazy" style="max-width:90%" alt="透過jquery技術實現放大鏡" >
<img src="/static/imghwm/default1.png" data-src="img/800_2.jpg" class="lazy" alt="透過jquery技術實現放大鏡" >
<img src="/static/imghwm/default1.png" data-src="img/800_3.jpg" class="lazy" alt="透過jquery技術實現放大鏡" >
</p>
</p>
<p class="small first"><img src="/static/imghwm/default1.png" data-src="img/50_1.jpg" class="lazy" alt="透過jquery技術實現放大鏡" ></p>
<p class="small second"><img src="/static/imghwm/default1.png" data-src="img/50_2.jpg" class="lazy" alt="透過jquery技術實現放大鏡" ></p>
<p class="small third"><img src="/static/imghwm/default1.png" data-src="img/50_3.jpg" class="lazy" alt="透過jquery技術實現放大鏡" ></p>
</p>
</body>css程式碼
*{padding: 0; margin: 0;}
#father .small{width: 50px; height: 50px; border: 2px solid #ccc; bottom: 0; position: absolute;}
#father .second{left: 70px;}
.third{left: 140px;}
#father{position: relative; top: 100px; left: 50px; height: 460px;}
#container{position: absolute; width: 400px; height: 400px;}
#container img{position: absolute; display: none;}
.shade{width: 200px; height: 200px; position: absolute; top: 0;left: 0; display: none; border-radius: 50%; overflow: hidden; background: #000;}
.shade img{display: none; width: 800px; height: 800px; position: absolute;}js程式碼##
<span style="white-space:pre"> </span><script type="text/javascript" src='js/jquery-1.12.4.min.js'></script>
<script type="text/javascript">
$(function () {
changePic('.first',0);
changePic('.second',1);
changePic('.third',2);
var shadeWidth = $('.shade').width(),//阴影的宽度
shadeHeight = $('.shade').height(),//阴影的高度
middleWidth = $('#container').width(),//容器的宽度
middleHeight = $('#container').height(),//容器的高度
bigImgWidth = $('.shade img').width(),//放大图片盒子的宽度
bigImgHeight = $('.shade img').height(),//放大图片盒子的高度
rateX = bigImgWidth / middleWidth,//放大区和遮罩层的宽度比例2
rateY = bigImgHeight / middleHeight;//放大区和遮罩层的高度比例2
//当鼠标移入与移出时阴影与放大去显现/消失
$('#container').hover(function() {
$('.shade').show();
$('.big').show();
}, function() {
$('.shade').hide();
$('.big').hide();
}).mousemove(function(e) {//当鼠标移动时，阴影和放大区图片进行移动
//记录下光标距离页面的距离
var x = e.pageX,
y = e.pageY;
//设置遮罩层的位置
$('.shade').offset({
top: y-shadeHeight/2,
left: x-shadeWidth/2
});
//获取遮罩层相对父元素的位置
var cur = $('.shade').position(),
_top = cur.top,
_left = cur.left,
hdiffer = middleHeight - shadeHeight,
wdiffer = middleWidth - shadeWidth;
if (_top < 0) _top = 0;
else if (_top > hdiffer) _top = hdiffer;
if (_left < 0) _left = 0;
else if (_left > wdiffer) _left =wdiffer;
//判断完成后设置遮罩层的范围
$('.shade').css({
top: _top,
left: _left
});
//设置放大区图片移动
$('.shade img').css({
top: - _top*rateY*3/2,
left: - _left*rateX*3/2
});
});;
//封装的改变图片显示的函数
function changePic (element,index) {
$(element).click(function() {
$('#container img').eq(index).css('display', 'block').siblings().css('display', 'none');
$('.shade img').eq(index).css('display', 'block').siblings().css('display', 'none');
});
}
});
<span style="white-space:pre"> </span></script>上面是我整理給大家的，希望未來會對大家有幫助。 相關文章：
透過vue-cli webpack專案如何實作修改專案名稱#
以上是透過jquery技術實現放大鏡的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
jquery实现多少秒后隐藏图片Apr 20, 2022 pm 05:33 PM实现方法：1、用“$("img").delay(毫秒数).fadeOut()”语句，delay()设置延迟秒数；2、用“setTimeout(function(){ $("img").hide(); },毫秒值);”语句，通过定时器来延迟。
jquery怎么修改min-height样式Apr 20, 2022 pm 12:19 PM修改方法：1、用css()设置新样式，语法“$(元素).css("min-height","新值")”；2、用attr()，通过设置style属性来添加新样式，语法“$(元素).attr("style","min-height:新值")”。
axios与jquery的区别是什么Apr 20, 2022 pm 06:18 PM区别：1、axios是一个异步请求框架，用于封装底层的XMLHttpRequest，而jquery是一个JavaScript库，只是顺便封装了dom操作；2、axios是基于承诺对象的，可以用承诺对象中的方法，而jquery不基于承诺对象。
jquery怎么在body中增加元素Apr 22, 2022 am 11:13 AM增加元素的方法：1、用append()，语法“$("body").append(新元素)”，可向body内部的末尾处增加元素；2、用prepend()，语法“$("body").prepend(新元素)”，可向body内部的开始处增加元素。
jquery中apply()方法怎么用Apr 24, 2022 pm 05:35 PM在jquery中，apply()方法用于改变this指向，使用另一个对象替换当前对象，是应用某一对象的一个方法，语法为“apply(thisobj,[argarray])”；参数argarray表示的是以数组的形式进行传递。
jquery怎么删除div内所有子元素Apr 21, 2022 pm 07:08 PM删除方法：1、用empty()，语法“$("div").empty();”，可删除所有子节点和内容；2、用children()和remove()，语法“$("div").children().remove();”，只删除子元素，不删除内容。
jquery怎么去掉只读属性Apr 20, 2022 pm 07:55 PM去掉方法：1、用“$(selector).removeAttr("readonly")”语句删除readonly属性；2、用“$(selector).attr("readonly",false)”将readonly属性的值设置为false。
jquery on()有几个参数Apr 21, 2022 am 11:29 AMon()方法有4个参数：1、第一个参数不可省略，规定要从被选元素添加的一个或多个事件或命名空间；2、第二个参数可省略，规定元素的事件处理程序；3、第三个参数可省略，规定传递到函数的额外数据；4、第四个参数可省略，规定当事件发生时运行的函数。
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
AI Hentai Generator
免費產生 AI 無盡。
熱門文章
R.E.P.O.能量晶體解釋及其做什麼（黃色晶體）
2 週前By尊渡假赌尊渡假赌尊渡假赌
倉庫：如何復興隊友
4 週前By尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險：如何獲得巨型種子
4 週前By尊渡假赌尊渡假赌尊渡假赌
擊敗分裂小說需要多長時間？
3 週前ByDDD
R.E.P.O.保存文件位置：在哪里以及如何保護它？
3 週前ByDDD
熱工具
EditPlus 中文破解版
體積小，語法高亮，不支援程式碼提示功能
Dreamweaver Mac版
視覺化網頁開發工具
ZendStudio 13.5.1 Mac
強大的PHP整合開發環境
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
mPDF
mPDF是一個PHP庫，可以從UTF-8編碼的HTML產生PDF檔案。原作者Ian Back編寫mPDF以從他的網站上「即時」輸出PDF文件，並處理不同的語言。與原始腳本如HTML2FPDF相比，它的速度較慢，並且在使用Unicode字體時產生的檔案較大，但支援CSS樣式等，並進行了大量增強。支援幾乎所有語言，包括RTL（阿拉伯語和希伯來語）和CJK（中日韓）。支援嵌套的區塊級元素（如P、DIV），
