您的位置:

图片大小自动缩放js代码(图片大小自动缩放js代码是什么)

图片大小自动缩放js代码(图片大小自动缩放js代码是什么)

更新:

本文目录一览:

怎么用js实现图片的缩小?

一般来说,实现图片的放大缩小功能都用到了比较大的封装插件,特别是以jQuery插件居多,而实际上单纯实现对原图本身的放大缩小,用简单几行原生JS代码就可以做到。在今天分享的这个实例中,点击放大按钮不松鼠标,图片会不断的逐渐放大,当然也可以点一下放大一点,点击缩小按钮则反之,有需要的朋友可以考虑收藏备用哦

以下为全部代码:

html

    head

        meta http-equiv="Content-Type" content="text/html; charset=utf-8" /

        titlejavascript控制图片缩小或者放大/title

    /head

    body

        script type="text/javascript"

            var oTime;

            function changeSize(id,action){

             var obj=document.getElementById(id);

             obj.style.zoom=parseInt(obj.style.zoom)+(action=='+'?+10:-10)+'%';

             oTime=window.setTimeout('changeSize(\''+id+'\',\''+action+'\')',100);

            }

            document.onmouseup=function(){

             window.clearTimeout(oTime);

            }

        /script

        div style="height:350px; overflow: auto;"

        img id="headImg" src="

        button onmousedown="changeSize('headImg','+');" onmouseup="window.clearTimeout(oTime);"放大/button

        button onmousedown="changeSize('headImg','-');" onmouseup="window.clearTimeout(oTime);"缩小/button

    /body

/html

jS控制图片的放大和缩小?

图片按比例缩放

function DrawImage(Img,WIDTH,HEIGHT){

var image=new Image();

image.src=Img.src;

width=WIDTH;//预先设置的所期望的宽的值

height=HEIGHT;//预先设置的所期望的高的值

if(image.widthwidth||image.heightheight){//现有图片只有宽或高超了预设值就进行js控制

w=image.width/width;

h=image.height/height;

if(wh){//比值比较大==宽比高大

//定下宽度为width的宽度

Img.width=width;

//以下为计算高度

Img.height=image.height/w;

}else{//高比宽大

//定下宽度为height高度

img.height=height;

//以下为计算高度

Img.width=image.width/h;

}

}

}

img src="xxxx" onload=javascript:DrawImage(this,290,215);

求一个简单的点击图片放大缩小的JS代码

1、准备好需要用到的图标。

2、新建html文档。

3、书写hmtl代码。div id=allbox    div id=boxhome        img style="WIDTH: 107px; BOTTOM: 5px; HEIGHT: 176px; LEFT: 10px" id=imgSmallLeft class=imgBorder onClick="clearInterval(autoplay);moveD('l');"    。

4、书写并添加js代码。script src="js/ntes_jslib_1.x.js"/scriptscript src="js/zzsc.js"/script。

5、代码整体结构。

6、查看效果。

如何利用JS或者CSS样式来自动调整图片大小

js版和css版自动按比例调整图片大小方法,分别如下:

titlejavascript图片大小处理函数/title

script language=Javascript

var proMaxHeight = 150;

var proMaxWidth = 110;

function proDownImage(ImgD){

      var image=new Image();

      image.src=ImgD.src;

      if(image.width0  image.height0){

      var rate = (proMaxWidth/image.width  proMaxHeight/image.height)?proMaxWidth/image.width:proMaxHeight/image.height;

    if(rate = 1){   

     ImgD.width = image.width*rate;

     ImgD.height =image.height*rate;

    }

    else {

                          ImgD.width = image.width;

                          ImgD.height =image.height;

                  }

      }

}

/script

/head

body

img src="999.jpg" border=0 width="150" height="110"  onload=proDownImage(this);   /

img src="room.jpg" border=0 width="150" height="110" onload=proDownImage(this);   /

/body

纯css的防止图片撑破页面的代码,图片会自动按比例缩小:

style type="text/css"

.content-width {MARGIN: auto;WIDTH: 600px;}

.content-width img{MAX-WIDTH: 100%!important;HEIGHT: auto!important;width:expression(this.width  600 ? "600px" : this.width)!important;}

/style

div class="content-width"

  pimg src="/down/js/images/12567247980.jpg"//p

  pimg src="/down/js/images/12567247981.jpg"//p

/div

js实现图片滚轮、按钮缩放大小,图片旋转,图片拖拽

div class="upload-img-box" ref="moveWrap"

div class="show-box" ref="rotate" @mousedown="moveImg" @mousewheel.prevent="rollImg($event,)"

img :src="singleList.fileImgUrl" class="uploadimg" ref="img" :style="{transform:'scale('+multiples/100+') rotate('+rotate +'deg)'}"/

/div

div class="img-plus" @click="toBIgChange()"span class="tip"放大/span/div

div class="img-minus" @click="toSmallChange()"span class="tip"缩小/span/div

div class="img-rotate" @click="toRotate()"span class="tip"旋转/span/div

/div

图片大小自动缩放js代码(图片大小自动缩放js代码是什么)

本文目录一览: 1、怎么用js实现图片的缩小? 2、jS控制图片的放大和缩小? 3、求一个简单的点击图片放大缩小的JS代码 4、如何利用JS或者CSS样式来自动调整图片大小 5、js实现图片滚轮、按钮

2023-12-08
手机端手势放大缩小js代码,手机缩小屏幕手势

本文目录一览: 1、js 判断双手指滑动 应该说是:在vue中如何实现 对div 双手指的放大和缩小功能。 2、求一个简单的点击图片放大缩小的JS代码 3、js 手机屏上两根手指放大缩小图片(类似ap

2023-12-08
php图片裁剪与缩放,php压缩图片大小

2022-11-28
鼠标悬停显示图片的js代码(js鼠标悬停放大图片)

本文目录一览: 1、鼠标悬停在小图上,自动出现大图的代码是什么? 2、鼠标悬停特效代码怎么写,鼠标放在小图片上旁边显示一张大图片? 3、鼠标悬停显示图片的js代码 高手帮我看看 位置问题 鼠标悬停在小

2023-12-08
js图片放大镜特效源代码下载(js放大镜的实现原理)

本文目录一览: 1、求帮我添加一个JS放大镜效果 2、javascript放大镜代码 3、求一个简单的点击图片放大缩小的JS代码 求帮我添加一个JS放大镜效果 JS放大镜效果,lz注意下编码问题,图片

2023-12-08
js弹出图片代码(js弹出图片代码怎么办)

本文目录一览: 1、用js脚本,怎么实现弹出选择图片的对话框,并将文件上传到服务器 2、javascript点击查看图片,弹框显示图片,怎么用js怎么实现? 3、js如何实现点击图片弹出窗口并放大这张

2023-12-08
php上传图片按比例缩小(php图片压缩成指定大小)

2022-11-11
seajs代码压缩,js 代码压缩

本文目录一览: 1、网页设计中 JS文件比较多,影响网页的加载速度,怎么解决 2、用了webpack还需要用seajs吗 3、网站优化:所有的js代码放到同一个js文件中好,还是不同的页面根据需要创建

2023-12-08
js图片转动代码(图片切换js特效代码)

本文目录一览: 1、javascript让图片移动的函数 2、JS控制图片向左向右移动的代码 3、js实现图片旋转效果 4、js 怎么实现点击一次图片旋转90度,再点击再转90度呢 5、JavaScr

2023-12-08
js手机端图片上传代码,js手机端图片上传代码是什么

本文目录一览: 1、如何在前端用js进行多图片上传 2、怎么用html5或js调用手机的摄像头拍照上传以及调用手机相册选取照片 3、js图片上传直接浏览的代码? 4、JS:上传图片 5、jsp上传图片

2023-12-08
js播放代码的问题,js自动播放

本文目录一览: 1、js播放代码的问题,请js高手指点,急!在线等~ 2、为什么用javascript代码本地测试可以播放视频而网站后台添加却无法播放呢? 3、Javascript音乐播放器为什么不能

2023-12-08
简单的js图片滚动轮播代码,简单的js图片滚动轮播代码大全

2022-11-23
js优秀代码图片,js好玩的代码

本文目录一览: 1、js代码控制图片移动 2、图片自动切换的JS代码 3、JS 显示 上传 图片 ,,高手帮我解释一下这段代码 4、求一个图片自动切换的JS代码。 5、如何用JS实现简单的图片替换 6

2023-12-08
js轮播图标代码,js自动轮播图代码

本文目录一览: 1、js实现轮播代码怎么写? 2、JS制作轮播图 3、简单的HTML+js图片轮播? 4、JS轮播弹窗代码 5、求首页js轮播图代码 6、图片自动播放轮播JQ,js代码。 js实现轮播

2023-12-08
关于js自动切换图片的代码(js图片自动随机切换)

本文目录一览: 1、js控制图片自动切换后且切换后图片超级链接正确,代码如下: 2、图片自动切换的JS代码 3、js的关于自动图片切换的代码解释,我看不懂 4、怎样用javascript实现图片定时切

2023-12-08
2017js代码大全(js新手代码大全)

本文目录一览: 1、关于JS的代码 2、下面是一段Js语言代码。我是初学者,大神,花括号里的各个代码如何理解? 3、JS鼠标事件大全 JS鼠标事件有哪些 4、什么地JS?什么是JSP? 5、JS 代码

2023-12-08
放大镜js源码,js京东放大镜

本文目录一览: 1、JS脚本实现开关网页放大镜 2、javascript放大镜代码 3、求帮我添加一个JS放大镜效果 4、JS图片放大扩展,按钮开关放大镜 5、怎么用javascript代码实现淘宝宝

2023-12-08
php图片长宽,php怎么设置图片的大小

2023-01-06
js图片秀代码(js操作图片)

本文目录一览: 1、我想把一个图片代码写到js了里面,然后调用这个js,就可以直接显示图片在网页上,怎么写? 2、JavaScript 的网页图片切换代码 3、Js获取图片原始宽高的实现代码 我想把一

2023-12-08
php图片按比例缩放,php缩小图片

2022-11-26