js图片简单放大缩小功能

作者：秋了秋发表时间：2016年02月24日

点击鼠标左键放大图片，点击鼠标右键缩小图片 I am a picture with no name 代码如下：

<img id="smartPic" style="width:100px;display:block;margin:0 auto;margin-top:100px;" src="/images/random/27.jpg" alt="I am a picture with no name" />
<script>
function stopDefault(e) {//阻止默认行为（可有可无，确保万无一失）
    if (e && e.preventDefault)
       e.preventDefault();
       else
       window.event.returnValue = false;
       return false;
}
(function() {
   var img = document.getElementById("smartPic");//获取点击元素
   var i = 1;//定义i初始值
   var imgWidth=parseInt(img.style.width);//获取图片宽度
   img.oncontextmenu=function(){ return false;} //取消右键菜单
   img.addEventListener("mousedown", function(event) {//鼠标按下事件
     var e = event || window.event; 
     if (e.button == 2) {//判断是右键事件
       stopDefault();
       i--;
     } else {
       i++;
     }
     i=i<1?1:i;                 
      this.style.width = imgWidth + i * 50 + "px"; //设置图片大小                         
   }, false)         
})()   
</script>