實(shí)現(xiàn)jquery放大鏡的兩種方法
更新時間：2018年02月22日 14:10:17 作者：web_emmet
本篇文章給大家詳細(xì)分析了用jquery實(shí)現(xiàn)放大鏡效果的方法，以及代碼分享，有興趣的學(xué)習(xí)下。
jquery寫的兩種放大鏡效果，沒有使用到插件。調(diào)理和思路清晰。不是使用面向?qū)ο蠓绞綄懙?，初學(xué)者較容易看懂。廢話不多說，看代碼。圖片這里就不上傳了，大家自己找下。最好是找到比例的，這樣效果比較好。
<body>
<div id="father">
<div id="container">
<img src="img/400_1.jpg" style="display: block;">
<img src="img/400_2.jpg" >
<div class="shade"></div>
</div>
<div class="small first"><img src="img/50_1.jpg"></div>
<div class="small second"><img src="img/50_2.jpg"></div>
</div>
<div class="big">
<img src="img/800_1.jpg" style="display: block;">
<img src="img/800_2.jpg">
</div>
</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,//放大區(qū)和遮罩層的寬度比例
rateY = bigHeight / shadeHeight;//放大區(qū)和遮罩層的高度比例
//當(dāng)鼠標(biāo)移入與移出時陰影與放大去顯現(xiàn)/消失
$('#container').hover(function() {
$('.shade').show();
$('.big').show();
}, function() {
$('.shade').hide();
$('.big').hide();
}).mousemove(function(e) {//當(dāng)鼠標(biāo)移動時，陰影和放大區(qū)圖片進(jìn)行移動
//記錄下光標(biāo)距離頁面的距離
var x = e.pageX,
y = e.pageY;
//設(shè)置遮罩層的位置
$('.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;
//判斷完成后設(shè)置遮罩層的范圍
$('.shade').css({
top: _top,
left: _left
});
//設(shè)置放大區(qū)圖片移動
$('.big img').css({
top: - rateY*_top,
left: - rateX*_left
});
});;
//封裝的改變圖片顯示的函數(shù)
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');
});
}
});
以上是常用的，下面這個是在原圖基礎(chǔ)上放大的
htm
<body>
<div id="father">
<div id="container">
<img src="img/400_1.jpg" style="display: block;">
<img src="img/400_2.jpg" >
<img src="img/400_3.jpg" >
<div class="shade">
<img src="img/800_1.jpg" style="display: block;">
<img src="img/800_2.jpg">
<img src="img/800_3.jpg">
</div>
</div>
<div class="small first"><img src="img/50_1.jpg"></div>
<div class="small second"><img src="img/50_2.jpg"></div>
<div class="small third"><img src="img/50_3.jpg"></div>
</div>
</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,//放大區(qū)和遮罩層的寬度比例2
rateY = bigImgHeight / middleHeight;//放大區(qū)和遮罩層的高度比例2
//當(dāng)鼠標(biāo)移入與移出時陰影與放大去顯現(xiàn)/消失
$('#container').hover(function() {
$('.shade').show();
$('.big').show();
}, function() {
$('.shade').hide();
$('.big').hide();
}).mousemove(function(e) {//當(dāng)鼠標(biāo)移動時，陰影和放大區(qū)圖片進(jìn)行移動
//記錄下光標(biāo)距離頁面的距離
var x = e.pageX,
y = e.pageY;
//設(shè)置遮罩層的位置
$('.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;
//判斷完成后設(shè)置遮罩層的范圍
$('.shade').css({
top: _top,
left: _left
});
//設(shè)置放大區(qū)圖片移動
$('.shade img').css({
top: - _top*rateY*3/2,
left: - _left*rateX*3/2
});
});;
//封裝的改變圖片顯示的函數(shù)
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>
您可能感興趣的文章:
- jquery圖片放大鏡效果
- jquery實(shí)現(xiàn)放大鏡簡潔代碼(推薦)
- jQuery實(shí)現(xiàn)的放大鏡效果示例
- 基于jquery編寫的放大鏡插件
- jQuery實(shí)現(xiàn)圖片局部放大鏡效果
- jQuery實(shí)現(xiàn)放大鏡效果實(shí)例代碼
- 基于jQuery仿淘寶產(chǎn)品圖片放大鏡特效
- 基于jQuery實(shí)現(xiàn)放大鏡特效
- jquery實(shí)現(xiàn)圖片放大鏡功能
- 基于jQuery仿淘寶產(chǎn)品圖片放大鏡代碼分享
- 基于jquery實(shí)現(xiàn)放大鏡效果
- 使用jquery實(shí)現(xiàn)放大鏡效果
- jquery放大鏡效果超漂亮噢
- jquery圖片放大鏡功能的實(shí)例代碼
- 基于jquery的放大鏡效果
相關(guān)文章
jQuery中ajax的相關(guān)知識點(diǎn)匯總
這篇文章主要給大家介紹了關(guān)于jQuery中ajax相關(guān)知識點(diǎn)的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-03-03
jQuery第一次運(yùn)行頁面默認(rèn)觸發(fā)點(diǎn)擊事件的實(shí)例
下面小編就為大家分享一篇jQuery第一次運(yùn)行頁面默認(rèn)觸發(fā)點(diǎn)擊事件的實(shí)例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-01-01
基于jQuery實(shí)現(xiàn)左右圖片輪播（原理通用）
這篇文章主要介紹了基于jQuery實(shí)現(xiàn)左右圖片輪播，實(shí)現(xiàn)原理通用可通用，希望能和大家分享一下思路，感興趣的小伙伴們可以參考一下2015-12-12
jQuery實(shí)現(xiàn)帶3D切割效果的輪播圖功能示例【附源碼下載】
這篇文章主要介紹了jQuery實(shí)現(xiàn)帶3D切割效果的輪播圖功能,結(jié)合實(shí)例形式分析了jQuery輪播圖相關(guān)的界面布局、3D效果實(shí)現(xiàn)與事件響應(yīng)等相關(guān)操作技巧,并附帶源碼供讀者下載參考,需要的朋友可以參考下2019-04-04
jQuery實(shí)現(xiàn)html表格動態(tài)添加新行的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)html表格動態(tài)添加新行的方法,涉及jQuery鼠標(biāo)事件及頁面元素的操作技巧,需要的朋友可以參考下2015-05-05
用jQuery中的ajax分頁實(shí)現(xiàn)代碼
去年的時候剛接觸Jquery，也就做界面特效用了下，對其很有興趣，迫于現(xiàn)在項目中不怎么用，對其甚是想念呀，這不沒抽點(diǎn)時間再來看看Juery中好玩的東西。2011-09-09
這篇文章主要介紹了jQuery使用height()獲取高度需要注意的地方,對于display:none或者隱藏的部分無法獲取到其高度,這是使用jQuery的height方法需要注意的地方,需要的朋友可以參考下2014-12-12
jQuery實(shí)現(xiàn)簡單的列表式導(dǎo)航菜單效果代碼
這篇文章主要介紹了jQuery實(shí)現(xiàn)簡單的列表式導(dǎo)航菜單效果代碼,涉及jquery操作鼠標(biāo)事件及頁面元素樣式動態(tài)變換的實(shí)現(xiàn)技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-08-08
jQuery 1.4給開發(fā)者帶來了很多值得興奮的新特性，同時使用jQuery的人也越來越多，為了方便大家對jQuery的使用，下面列出了一些jQuery使用技巧。2010-11-11
jQuery實(shí)現(xiàn)智能判斷固定導(dǎo)航條或側(cè)邊欄的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)智能判斷固定導(dǎo)航條或側(cè)邊欄的方法,涉及jQuery針對頁面元素屬性的判斷與動態(tài)操作相關(guān)技巧,需要的朋友可以參考下2016-09-09