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

js图片简单放大缩小功能

作者:秋叶 发表时间:2016年2月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>
转载请保留链接:js图片简单放大缩小功能 | 出处:秋叶个人博客| 本文链接地址:http://www.mizuiren.com/6432.html
目录: 前端编程 | 标签: | 4550次阅读