js,图片放大缩小

    var img = document.getElementsByTagName('img')[0];//图片元素

    img.onclick =function(){

//图片点击事件

        var imgH = img.height; //获取图片的高度

        var imgW = img.width; //获取图片的宽度

        if (imgW ==200 & imgH ==200) {

img.style.height =800 +'px';

            img.style.width =800 +'px';

        }else {

img.style.height =200 +'px';

            img.style.width =200 +'px';

        }

}



 var flag = true,//状态true为正常的状态,false为放大的状态

           imgH,//图片的高度

           imgW,//图片的宽度

           img = document.getElementsByTagName('img')[0];//图片元素

  img.onclick =  function(){

      //图片点击事件

       imgH = img.height; //获取图片的高度

       imgW = img.width; //获取图片的宽度

       if(flag){

           //图片为正常状态,设置图片宽高为现在宽高的2倍

           flag = false;//把状态设为放大状态

           img.height = imgH*2;

           img.width = imgW*2;

       }else{

           //图片为放大状态,设置图片宽高为现在宽高的二分之一

           flag = true;//把状态设为正常状态

           img.height = imgH/2;

           img.width = imgW/2;

       }


   }

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容