jQuery怎么實現(xiàn)鼠標滾輪控制圖片縮放

發(fā)布時間：2022-03-05 10:56:58 來源：億速云閱讀：345 作者：iii 欄目：web開發(fā)

本文小編為大家詳細介紹“jQuery怎么實現(xiàn)鼠標滾輪控制圖片縮放”，內(nèi)容詳細，步驟清晰，細節(jié)處理妥當，希望這篇“jQuery怎么實現(xiàn)鼠標滾輪控制圖片縮放”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學習新知識吧。

　　<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

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

　　<head>

　　<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>

　　<title>www.jb51.net鼠標滾輪控制圖片縮放</title>

　　<scripttype="text/javascript"src="jquery-1.7.2.min.js"></script>

　　<scripttype="text/javascript">

　　$(function(){

　　functionzoomImg(o){

　　varzoom=parseInt(o.style.zoom,10)||100;

　　zoom+=event.wheelDelta/2;//可適合修改

　　if(zoom>0)o.style.zoom=zoom+'%';

　　}

　　$(document).ready(function(){

　　$("img").bind("mousewheel",

　　function(){

　　zoomImg(this);

　　returnfalse;

　　});

　　})

　　</script>

　　</head>

　　<body>

　　<imgsrc="1.jpg"/>

　　</center>

　　</body>

　　</html>

讀到這里，這篇“jQuery怎么實現(xiàn)鼠標滾輪控制圖片縮放”文章已經(jīng)介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領會，如果想了解更多相關(guān)內(nèi)容的文章，歡迎關(guān)注億速云行業(yè)資訊頻道。

向AI問一下細節(jié)

猜你喜歡