1、新建一个HTML文件，保存为test.html，用于编写代码实现拖放功能 。
2、在test.html添加一个div标签，并且给它一个id，用于下面编写样式。
3、通过div的id , 给div定义CSS样式，例如，把div定义为一个带边框的长方形。下面将实现将图片拖放在这个长方形中。
4、在div的下面定义一张被拖放图片，并设置该图片的属性为允许被拖放。
5、在被拖放的图片上加上一个ondragstart事件，即图片被拖动时触发这个事件。再给事件一个函数，用于拖动图片时，把图片保存在一个变量中。
6、运行代码，在浏览器中查看结果：至此，完成了使用JS实现拖放图片到div中的功能。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html charset=utf-8" />
<title>放大和缩小</title>
<script type="text/javascript">
window.onload = function(){
<!-- 获取图片对象要放在window.onload之中，否则无法获取图片对象；或者将script放在图片之后例如image2 -->
var image = document.getElementById("testImg")
image.onclick = function() {
var width = parseInt(this.width)
if(width == 750) {
this.width = 200
this.height = 180
} else {
this.width = 750
this.height = 536
}
}
}
</script>
</head>
<body>
<img id="testImg" src="../images/2139491297979223579.jpg" width="750" height="536" alt="长江" />
<img id="testImg2" src="../images/7666415_143721636125_2.jpg" width="1024" height="685" alt="黄河" />
<script type="text/javascript">
<!-- 由于页面在加载到此处时，图片已经加载完成，所以不需要放在window.load中 -->
var image2 = document.getElementById("testImg2")
image2.onclick = function() {
var width = parseInt(this.width)
if(width == 1024) {
this.width = 512
this.height = 340
} else {
this.width = 1024
this.height = 685
}
}
</script>
</body>
</html>
通过JS代码 document.getElementById('divID').style.etElementById('divID').style.display = 'none'。函数可以实现。
1、遮罩层：<div id="back"></div>，即作为背景层，覆盖整个页面。弹出层：<div id="form"></div>，即背景层上的一层，此层可根据#form{top: 10%left: 10%width: 20%height: 30%}，调整弹出层的弹出位置。
2、弹出层和遮罩层全部为div标签，可以利用display来控制显示和隐藏的属性，在js中，显示： document.getElementById('divID').style.display = document.getElementById('divID').style.display = 'none'。
3、显示遮罩层和弹出层，即可用图中popDiv（）函数表示： 其中，showId 表示弹出层的divId, backId 表示遮罩层的divId；函数第去、2行显示弹出层和遮罩，3、4、5行设置遮罩层的长度、宽度。
4、关闭弹出层和遮罩层用hideDiv函数（）， 其中：showId 表示弹出层的divId, backId 表示遮罩层的divId；先关闭弹出层，后关闭遮罩层。
5、点击按钮后，弹出，要给按钮加上onclick函数，<button onclick="popDiv('form','back')">点我，显示弹出层</button>。
6、整体代码如下，css 样式可根据个人的喜好自行添加。
