溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
今天小編給大家分享一下基于jquery怎么實現(xiàn)滾輪放大縮小圖片的相關知識點，內容詳細，邏輯清晰，相信大部分人都還太了解這方面的知識，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。
（1）滾輪控制放大縮小圖片。
實現(xiàn)代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<link rel="stylesheet" href="">
<script src="../static/js/jquery-1.11.1.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function() {
function zoomImg(o) {
var zoom = parseInt(o.style.zoom, 10) || 100;
zoom += event.wheelDelta / 12; //可適合修改
if (zoom > 0) o.style.zoom = zoom + '%';
}
$(document).ready(function() {
$("img").bind("mousewheel",
function() {
zoomImg(this);
return false;
});
});
})
</script>
</head>
<body>
<center>
<img src="../static/img/111.jpg" border="1px" />
</center>
</body>
</html>（2）點擊圖片，彈出遮罩層，再用滾輪控制圖片縮放，該場景一般用于聊天對話框。
實現(xiàn)代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<link rel="stylesheet" href="">
<script src="../static/js/jquery-1.11.1.min.js" type="text/javascript" charset="utf-8"></script>
<style>
/*************圖片預覽************/
#outerdiv {
position: fixed;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.7);
z-index: 2;
width: 100%;
height: 100%;
display: none;
}
#innerdiv {
position: absolute;
}
#bigimg {
border: 5px solid #fff;
cursor: pointer;
}
</style>
<script type="text/javascript">
$(function() {
function zoomImg(o) {
var zoom = parseInt(o.style.zoom, 10) || 100;
zoom += event.wheelDelta / 12; //可適合修改
if (zoom > 0) o.style.zoom = zoom + '%';
}
$(document).ready(function() {
$("img").bind("mousewheel",
function() {
zoomImg(this);
return false;
});
});
})
</script>
</head>
<body>
<center>
<img id="img" src="../static/img/111.jpg" border="1px" @click="bigimg()" />
</center>
<div id="outerdiv">
<div id="innerdiv">
<img id="bigimg" src="" onmousewheel="bigimg(this)" />
</div>
</div>
<script>
$(`#img`).click(function() {
var _this = $(this); //將當前的img元素作為_this傳入函數(shù)
imgShow("#outerdiv", "#innerdiv", "#bigimg", _this);
})
// 圖片縮放
function bigimg(obj) {
// alert(parseInt(obj.style.zoom, 10));
//obj是一個對象，初始時obj并沒有zoom屬性，所以給zoom賦值為100；
var zoom = parseInt(obj.style.zoom, 10) || 100;
//每次滾動鼠標時，改變zoom的大小
//event.wheelDelta有兩個值，120，-120，取值情況取決于滾動鼠標的方向；
zoom += event.wheelDelta / 12; //每次滾動加減10
if (zoom > 0)
obj.style.zoom = zoom + '%'; //更改后的zoom賦值給obj
return false;
}
// 預覽圖片
function imgShow(outerdiv, innerdiv, bigimg, _this) {
var src = _this.attr("src"); //獲取當前點擊的pimg元素中的src屬性
$(bigimg).attr("src", src); //設置#bigimg元素的src屬性
/*獲取當前點擊圖片的真實大小，并顯示彈出層及大圖*/
$("<img />").attr("src", src).load(function() {
var windowW = $(window).width(); //獲取當前窗口寬度
var windowH = $(window).height(); //獲取當前窗口高度
var realWidth = this.width; //獲取圖片真實寬度
var realHeight = this.height; //獲取圖片真實高度
var imgWidth, imgHeight;
var scale = 0.8; //縮放尺寸，當圖片真實寬度和高度大于窗口寬度和高度時進行縮放
if (realHeight > windowH * scale) { //判斷圖片高度
imgHeight = windowH * scale; //如大于窗口高度，圖片高度進行縮放
imgWidth = imgHeight / realHeight * realWidth; //等比例縮放寬度
if (imgWidth > windowW * scale) { //如寬度扔大于窗口寬度
imgWidth = windowW * scale; //再對寬度進行縮放
}
} else if (realWidth > windowW * scale) { //如圖片高度合適，判斷圖片寬度
imgWidth = windowW * scale; //如大于窗口寬度，圖片寬度進行縮放
imgHeight = imgWidth / realWidth * realHeight; //等比例縮放高度
} else { //如果圖片真實高度和寬度都符合要求，高寬不變
imgWidth = realWidth;
imgHeight = realHeight;
}
$(bigimg).css("width", imgWidth); //以最終的寬度對圖片縮放
var w = (windowW - imgWidth) / 2; //計算圖片與窗口左邊距
var h = (windowH - imgHeight) / 2; //計算圖片與窗口上邊距
$(innerdiv).css({ "top": h, "left": w }); //設置#innerdiv的top和left屬性
$(outerdiv).fadeIn("fast"); //淡入顯示#outerdiv及.pimg
});
$(outerdiv).click(function() { //再次點擊淡出消失彈出層
$(this).fadeOut("fast");
});
}
</script>
</body>
</html>$(document).ready(function() {
function zoomImage(event) {
event.preventDefault();
var image = $(this).find('img');
var delta = event.originalEvent.deltaY || event.originalEvent.detail || event.originalEvent.wheelDelta;
var zoom = delta > 0 ? -0.2 : 0.2;
var newWidth = image.width() + (image.width() * zoom);
var newHeight = image.height() + (image.height() * zoom);
image.width(newWidth).height(newHeight);
}
$('div.image-container').on('mousewheel DOMMouseScroll', zoomImage);
});在這個代碼中，我們首先為每個包含圖片的`div`元素附加了一個滾輪事件監(jiān)聽器，當用戶在這些元素上滾動滾輪時，會調用`zoomImage`函數(shù)進行放大/縮小操作。
在`zoomImage`函數(shù)內部，我們首先通過`$(this).find('img')`選擇器找到了當前元素內的`img`元素，接下來從滾輪事件中獲取了用戶的滾動方向，然后計算出當前圖片的放大/縮小后的寬度和高度，并將其重新賦值給了圖片元素。
以上就是“基于jquery怎么實現(xiàn)滾輪放大縮小圖片”這篇文章的所有內容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學習更多的知識，請關注億速云行業(yè)資訊頻道。
免責聲明：本站發(fā)布的內容（圖片、視頻和文字）以原創(chuàng)、轉載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權內容。
