js图片简单放大缩小功能
作者:秋了秋 发表时间:2016年02月24日
点击鼠标左键放大图片,点击鼠标右键缩小图片 代码如下:
<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