当前位置: 秋叶网络博客 前端编程 ◊ js图片简单放大缩小功能

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="http://www.mizuiren.com/wp-content/themes/QIUYE/images/random/15.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>
4
除非注明,文章均由 秋叶网络博客 发布,欢迎转载。
转载请注明本文地址:http://www.mizuiren.com/6432.html
目录: 前端编程 | 标签: 图片缩放 | 5495次阅读