一般来说，实现图片的放大缩小功能都用到了比较大的封装插件，特别是以jQuery插件居多，而实际上单纯实现对原图本身的放大缩小，用简单几行原生JS代码就可以做到。在今天分享的这个实例中，点击放大按钮不松鼠标，图片会不断的逐渐放大，当然也可以点一下放大一点，点击缩小按钮则反之，有需要的朋友可以考虑收藏备用哦
以下为全部代码：
<html><head>
<meta http-equiv="Content-Type" content="text/html charset=utf-8" />
<title>javascript控制图片缩小或者放大</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>
<!DOCTYPE HTML><html>
<head>
<title>Page Title</title>
<meta http-equiv="Content-Type" content="text/html charset=UTF-8" />
<style>
.wrap{
margin: 0 auto
width:1000px
height:1000px
border:1px solid gray
}
.wrap>div{
float:left
}
.wrap>#p{
width:80%
height:1000px
position:relative
overflow:auto
border:1px solid gray
}
div.d{
width:19%
height:1000px
}
#dd{
width:100px
height:100px
left:300px
top:300px
position:absolute
background-color:#c81623
}
</style>
<script>
onload=function(){
var div=document.getElementById("dd")
var sf=document.getElementById("sf")
var ydx=document.getElementById("ydx")
var ydy=document.getElementById("ydy")
var p=document.getElementById("p")
sf.value=parseFloat(getStyle(div,"width"))*100/500
ydx.value=parseFloat(getStyle(div,"left"))*100/parseFloat(getStyle(p,"width"))
ydy.value=parseFloat(getStyle(div,"top"))*100/parseFloat(getStyle(p,"height"))
}
var rotate=function(obj){
var div=document.getElementById("dd")
div.style['transform'] = div.style['-webkit-transform'] = 'rotate(' + obj.value*360*0.01 + 'deg)'
}
var scale=function(obj,w){
var div=document.getElementById("dd")
var h=parseFloat(getStyle(div,"height"))
var ww=parseFloat(getStyle(div,"width"))
div.style.height=div.style.width=w*0.01*obj.value +"px"
var lef=parseFloat(getStyle(div,"left"))
var tp = parseFloat(getStyle(div,"top"))
div.style.left=lef-(parseFloat(div.style.width)-ww)/2+"px"
div.style.top=tp-(parseFloat(div.style.height)-h)/2+"px"
}
var movex=function(obj,w){
var div=document.getElementById("dd")
var p=document.getElementById("p")
div.style.left=obj.value*0.01*(parseFloat(getStyle(p,"width"))-parseFloat(getStyle(div,"width")))+"px"
}
var movey=function(obj,w){
var div=document.getElementById("dd")
var p=document.getElementById("p")
div.style.top=obj.value*0.01*(parseFloat(getStyle(p,"height"))-parseFloat(getStyle(div,"height")))+"px"
}
var getStyle=function(obj,attr){
if(obj.currentStyle){
return obj.currentStyle[attr]
}else if(window.getComputedStyle){
var styleVal = window.getComputedStyle(obj, null)[attr]
? window.getComputedStyle(obj, null)[attr] :
window.getComputedStyle(obj, null).getPropertyValue(attr)
return styleVal
}
}
</script>
</head>
<body>
<div class="wrap">
<div id="p">
<div id="dd"></div>
</div>
<div class="d">
旋转:
<input type="range" id="xz" max=100 min=0 value=0 oninput="rotate(this)" />
缩放:
<input type="range" id="sf" max=100 min=0 value=0 oninput="scale(this,500)" />
移动X:
<input type="range" id="ydx" max=100 min=0 value=0 oninput="movex(this)" />
移动Y:
<input type="range" id="ydy" max=100 min=0 value=0 oninput="movey(this)"/>
</div>
</div>
</body>
</html>
前端的童鞋们可能会遇到这样一个问题，UI设计师给出了一套设计图，我们需要自适应各种屏幕，且各个元素的大小和字体大小也随之缩放。
看到这个需求，本人首先会想到之前的思路是媒体查询，检测不同范围的屏幕宽度，写不同的样式来改变排版，以适应pc、ipad和移动端等。
假设屏幕大于999px都属于pc端，pc 分为大屏超大屏，我们需要响应大屏到超大屏之间的适应，举个栗子：
例如：媒体查询 （屏幕999~1200 div.title 都是 200px 宽，1200~1440。。。）
也就是说某个区间内，div.title 的宽度是不变的，当然你要设成百分比也不是可变的，那字体是否也可变呢？想要实时响应字体大小和元素大小又该如何解决呢?
这里我们可以使用一个插件，可以很轻松的解决掉这个实时响应等比缩放的问题： px2rem 插件。
安装
配置
需要结合 rem.js 配置
到这里配置完成啦，看下效果
配置前
配置后
哇哦，是不是很简单，是不是很神奇，小伙伴们赶快试试吧 ~~
点赞 ~~ 转发 ~~
还有两款插件，分别为：
postcss-plugin-px2rem 和 postcss-pxtorem
postcss-plugin-px2rem 在 vue.confing 中常用配置为：
postcss-pxtorem 在 vue.confing 中常用配置为：
