js实现拖拽和放大 图片
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了 js实现拖拽和放大 图片相关的知识,希望对你有一定的参考价值。
现在主流的大型网站在 账户设置模块都会有上传头像的功能,做的比较好的都会有上传头像后对这个图片做编辑的功能,比如拖拽图片显示范围,或者放大图片。像QQ的头像设置、淘宝等商场的上传图片设置。
现在本人参与的项目也需要实现这个功能,花了两天时间在页面实现了图片拖拽和方法功能,现在分享下代码,求拍砖。
----注:直接把代码拷进一个空白的html文件就可以看到效果了,记得修改图片路径就可以了。
<!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">
<meta http-equiv="Content-Type" Content="text/html; charset=UTF-8">
<head >
<title>图片缩放和固定div层拖动</title>
<style type="text/css">
#picDiv
{
margin:8px 8px 4px 0;
border:1px solid #666666;
padding:0;
width:120px;
height:120px;
float:left;
overflow:hidden;
position:relative;
cursor:move;
}
.dragAble
{
position: absolute;
cursor: move;
}
</style>
<script language="javascript" type="text/javascript">
//图片放大和缩小(兼容IE和火狐,谷歌)
function ImageChange(args) {
var oImg = document.getElementById("pic");
if (args) {
oImg.width = oImg.width * 1.2;
oImg.height = oImg.height * 1.2;
// oImg.style.zoom = parseInt(oImg.style.zoom) + (args ? +20 : -20) + ‘%‘;
}
else {
oImg.width = oImg.width /