關於部落格
超越自我的界線....
  • 258000

    累積人氣

  • 0

    今日人氣

    0

    訂閱人氣

【JavaScript】滾動滑鼠滾輪來縮放圖片

 juell 之新生活習慣中

雖然某些事情我不喜歡有太多的改變



下定決心改變

或許是個不錯的決定

☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆
 
今天要分享的是

滾動滑鼠滾輪來縮放圖片

JavaScript

 <script type="text/javascript">
<!--
     //預設大小
     var percent = 100;
    //縮放圖片,滾動以10%作為縮放的級距
    function zoomPic(obj)
      {
                 //滾輪向上滾動
                if (event.wheelDelta >= 120) percent +=10;
               //滾輪向下滾動
              else if (event.wheelDelta <= -120  && percent >10) percent -=10; 
             
             //縮放圖片
             document.getElementById(obj).style.zoom = percent + "%";
             //目前縮放比例
             document.getElementById("perc").innerText = percent + "%"; 
            //回傳false(頁面不會跟著滾輪上下滾)
            return false;
             }
//-->
</script>
 


 

 























HTML
<img id="pic" src="圖片位址" onmousewheel="return zoomPic('pic');">

用滑鼠滾滾滾...照片就會放打縮小勒

相簿設定
標籤設定
相簿狀態