基于jquery的鼠標(biāo)滾動放大縮小圖片

一直以來都想寫一個圖片放大和縮小的小玩意，本來以為會很復(fù)雜，這幾天自己思考了一下，原來是so easy啊。目前實現(xiàn)的放大縮小，主要時依據(jù)鼠標(biāo)的滾輪觸發(fā)事件來實現(xiàn)的，廢話少說直接上源碼。

創(chuàng)新互聯(lián)專注于文水企業(yè)網(wǎng)站建設(shè),成都響應(yīng)式網(wǎng)站建設(shè)公司,成都商城網(wǎng)站開發(fā)。文水網(wǎng)站建設(shè)公司,為文水等地區(qū)提供建站服務(wù)。全流程定制開發(fā)，專業(yè)設(shè)計，全程項目跟蹤，創(chuàng)新互聯(lián)專業(yè)和態(tài)度為您提供的服務(wù)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>圖片放大縮小</title>

margin:0; padding:0;

}

body {

width:100%; height:100%; overflow:auto;

}

#img {

display:block;

width:20%;

margin:20px auto;

cursor:-webkit-zoom-in;

cursor:-moz-zoom-in;

border:4px solid #ccc;

}

</style>

$(document).ready(function(){

var img=$("#img");

var i=0;

img.bind('DOMMouseScroll mousewheel function(e) {

var ev=window.event||e;//處理瀏覽器兼容性問題

var scrollUnit=Math.max(-1,Math.min(1,(ev.wheelDelta||-ev.detail)));

var newWith=Math.max(100,Math.min(1600,parseInt(img.css("width"))+(30*scrollUnit)))+"px";

img.css("width",newWith);

console.log(i++);

console.log(img.css("width"));

});

</script>

</head>

<body>

</body>

</html>

針對源碼，做幾點說明和補充：

1，ev.wheelDelta和ev.detail

ev.wheelDelta, 除出火狐外的瀏覽器IE,chrome,Opera、Safari基本支持屬性，該屬性取值為+,-,120；

ev.detail,為火狐特有的事件屬性，取值+，-3；

2,Math.min,Math.max

這個地方的取最大值和最小值，最好自己琢磨一下，稍微有一個繞。

3，放大縮小的倍數(shù)和最值問題

1和-1控制縮小和放大速率，絕對值越大縮放效果越明顯。

100,1600，分別為縮小的最小值和放大的最大值。

基本就這么多了，歡迎大家提出寶貴建議和想法。

本文標(biāo)題：基于jquery的鼠標(biāo)滾動放大縮小圖片
當(dāng)前網(wǎng)址：http://muchs.cn/article32/ihgcsc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供手機(jī)網(wǎng)站建設(shè)、微信小程序、網(wǎng)站改版、定制網(wǎng)站、網(wǎng)站營銷、微信公眾號

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容