当前位置:首页 »“秋了秋”个人博客 » 前端编程 » 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="/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>
7
文章作者: “秋了秋”个人博客,本站鼓励原创。
转载请注明本文地址:http://netblog.cn/blog/6432.html
目录: 前端编程标签: 图片缩放 9366次阅读

请求播放音乐,请点击播放

登 录
点击获取验证码
还没账号?点击这里