溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
簡介
網上有許多放大鏡的jquery的插件，但是用著不是那么得心應手，現在一頁代碼實現一個放大鏡功能，如果需要附加的功能可以手動修改，原理都在注釋里
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>放大鏡效果</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.small {
margin-left:40px;
margin-top:50px;
width: 150px;
height: 150px;
/*border: 2px solid yellow;*/
}
.small>img {
width: 150px;
height: 150px;
}
.slider {
width: 50px;
height: 50px;
background: rgba(180,180,135,0.3);
position: absolute;
display: none;
}
#big {
//設置為固定大小;
width: 200px;
height: 200px;
position: absolute;
/* border: 2px solid red;*/
overflow: hidden;
display: none;
}
</style>
</head>
<body>
<!--縮略圖-->
<div class="small">
<img src="thumb.jpg" />
<!--放大鏡,在原圖不上的小塊-->
<div class="slider"></div>
</div>
<!--放大鏡區域，大圖，設置為none隱藏-->
<div id="big">
<img id="bigImg" src="big.jpg" />
</div>
even.clientX<input type="text" value="0" id="test" /><br/>
even.clientY<input type="text" value="0" id="test1" />
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript">
var small = $(".small")[0];
var slider = $(".slider")[0];
var big = document.getElementById("big");//試一試js獲取
var bigImg = document.getElementById("bigImg");
//讓slider跟隨鼠標移動.給小的方塊綁定事件
$(".small").mousemove(function(e) {
var even = e || event; //兼容火狐瀏覽器
var x = even.clientX - small.offsetLeft - slider.offsetWidth/2;
var y = even.clientY - small.offsetTop - slider.offsetHeight/2;
//測試even.clientX和even.clientY
$("#test").val(even.clientX);
$("#test1").val(even.clientY);
//水平方向的最大值
var maxX = small.clientWidth - slider.clientWidth;
//豎直方向的最大值
var maxY = small.clientHeight - slider.clientHeight;
if(x<0){
//相當于超出左側,超出左側時,拉回
x=0;
}
//超出右側時拉回
if(x>maxX){
x = maxX;
}
//頂部超出
if(y<0){
y=0;
}
//底部超出
if(y>maxY){
y = maxY;
}
slider.style.top = (y+small.offsetTop) + "px";
slider.style.left = (x+small.offsetLeft) + "px";
//放大的圖片的主要實現代碼:比例計算, big.scrollLeft是id=big的div中下方滾軸的位置
//由于id=big的div設置成固定大小，而圖片又非常大，所以這個div就像個放大鏡一樣在大圖上晃
//比例計算很簡單，鼠標在縮略圖的位置與縮略圖寬高比=鼠標在大圖位置與大圖寬高比，現在未知數是大圖鼠標的位置
big.scrollLeft = x/maxX * (bigImg.clientWidth - big.clientWidth) ;
big.scrollTop = y/maxY * (bigImg.clientHeight -big.clientHeight) ;
});
//鼠標移入事件
$(".small").mouseenter(function(){
//鼠標移入到縮略圖時候實現,上面出現的小的方塊
$(".slider").css("display","block");
$("#big").css("top",small.offsetTop+"px");
//隱藏的大圖=獲取左圖的左邊位置+寬度+10(隔開點縫隙與縮略圖)+px
big.style.left = small.offsetLeft + small.offsetWidth + 10 + "px";
//右側的大圖區域顯示出來圖片
$("#big").css("display","block");
});
//移除事件
//添加鼠標移出事件,鼠標移出縮略圖的時候
$(".small").mouseleave(function(){
$(".slider").css("display","none");
$("#big").css("display","none");
});
</script>
</body>
</html>
下載demo
https://github.com/mytheshow/...
鏈接： http://pan.baidu.com/s/1nvMBgb3
以上所述是小編給大家介紹的jquery實現放大鏡簡潔代碼，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對億速云網站的支持！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
