基於jquery的鼠標滾動放大縮小圖片

時間 2021-01-30

標籤 javascript css html java jquery web chrome 瀏覽器 ide 欄目 JQuery 简体版

原文原文鏈接

一直以來都想寫一個圖片放大和縮小的小玩意，原本覺得會很複雜，這幾天本身思考了一下，原來是so easy啊。目前實現的放大縮小，主要時依據鼠標的滾輪觸發事件來實現的，廢話少說直接上源碼。javascript

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

<html xmlns="http://www.w3.org/1999/xhtml">html

<head>java

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

*{瀏覽器

margin:0; padding:0;ide

}ui

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，放大縮小的倍數和最值問題

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

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

基本就這麼多了，歡迎你們提出寶貴建議和想法。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。