js實現(xiàn)鼠標滾輪控制圖片縮放效果的方法

字號:


    這篇文章主要介紹了js實現(xiàn)鼠標滾輪控制圖片縮放效果的方法,涉及onmousewheel事件及javascript操作圖片的技巧,具有一定參考借鑒價值,需要的朋友可以參考下
    本文實例講述了js實現(xiàn)鼠標滾輪控制圖片縮放效果的方法。分享給大家供大家參考。具體實現(xiàn)方法如下:
    代碼如下:
    <!doctype html public -//w3c//dtd xhtml 1.0 transitional//en >
    <html xmlns=>
    <head>
    <meta http-equiv=content-language content=zh-cn />
    <meta http-equiv=content-type content=text/html; charset=gb2312 >
    <title>用鼠標滾輪滾動控制圖片的縮小放大</title>
    <script language=javascript>
    function bbimg(o){
    var zoom=parseint(o.style.zoom, 10)||100;
    zoom+=event.wheeldelta/12;
    if (zoom>0) o.style.zoom=zoom+'%';
    return false;
    }
    </script>
    </head>
    <body>
    <p>將鼠標放在圖片上,點擊一下,然后滾動鼠標滾輪試試看</p>
    <p><img border=0 src=/images/m01.jpg onmousewheel=return bbimg(this)></p>
    <p> </p>
    <p> </p>
    <p> </p>
    </body>
    </html>
    希望本文所述對大家的javascript程序設計有所幫助。