[转载] 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 / 1.2;
                oImg.height = oImg.height / 1.2;
            }
        }

		//获取div的四个顶点坐标
		   function getDivPosition()
		   {
		   var odiv=document.getElementById(‘picDiv‘);
		 //  alert(odiv.getBoundingClientRect().left);
		 // alert(odiv.getBoundingClientRect().top);

		   var xLeft,xRigh,yTop,yBottom;
		   return {
				xLeft:odiv.getBoundingClientRect().left,
				xRigh:odiv.getBoundingClientRect().left+130,
				yTop:odiv.getBoundingClientRect().top,
				yBottom:odiv.getBoundingClientRect().top+130
				};
		   }

		 //获取鼠标坐标
		   function mousePos(e)
		   {
				var x,y;
				var e = e||window.event;
				return {
				x:e.clientX+document.body.scrollLeft+document.documentElement.scrollLeft,
				y:e.clientY+document.body.scrollTop+document.documentElement.scrollTop
				};
			};

		//在固定div层拖动图片
		var ie = document.all;
        var nn6 = document.getElementById && !document.all;
        var isdrag = false;
        var y, x;
        var oDragObj;

		//鼠标移动
        function moveMouse(e) {
		        //鼠标的坐标
				mousePos(e).x   ;
				mousePos(e).y  ;
				//div的四个顶点坐标
				getDivPosition().xLeft
				getDivPosition().xRigh
				getDivPosition().yTop
				getDivPosition().yBottom

			if(isdrag && mousePos(e).x > getDivPosition().xLeft &&  mousePos(e).x < getDivPosition().xRigh  &&  mousePos(e).y >getDivPosition().yTop && mousePos(e).y< getDivPosition().yBottom )
			{
                oDragObj.style.top = (nn6 ? nTY + e.clientY - y : nTY + event.clientY - y) + "px";
                oDragObj.style.left = (nn6 ? nTX + e.clientX - x : nTX + event.clientX - x) + "px";
                return false;
            }
        }

		//鼠标按下才初始化
        function initDrag(e) {
            var oDragHandle = nn6 ? e.target : event.srcElement;
            var topElement = "HTML";
            while (oDragHandle.tagName != topElement && oDragHandle.className != "dragAble") {
                oDragHandle = nn6 ? oDragHandle.parentNode : oDragHandle.parentElement;
            }
            if (oDragHandle.className == "dragAble") {
                isdrag = true;
                oDragObj = oDragHandle;
                nTY = parseInt(oDragObj.style.top + 0);
                y = nn6 ? e.clientY : event.clientY;
                nTX = parseInt(oDragObj.style.left + 0);
                x = nn6 ? e.clientX : event.clientX;
                document.onmousemove = moveMouse;
                returnfalse;
            }
        }
        document.onmousedown = initDrag;
        document.onmouseup = newFunction("isdrag=false");

     </script>

</head>
<body>
    <divid="picDiv" >
		<imgid="pic"class="dragAble"alt="头像"src="2.jpg" />
        <br />
    </div>

	 <inputid="btn1"type="button"value="放大"onclick="ImageChange(true)" />
     <inputid="btn2"type="button"value="缩小"onclick="ImageChange(false)" />
	<!--  <input id="btn3" type="button" value="div的坐标" onclick="getDivPosition()" />  -->
</body>
</html>

© 著作权归作者所有

转自:http://my.oschina.net/u/1172409/blog/148618

时间: 2024-10-18 18:02:25

[转载] js实现拖拽和放大 图片的相关文章

jquery.dragsort.js 实现拖拽过程遇到的问题

1.在IE下第一次拖动的时候,被拖动的li元素会不显示,查了很多资料发现是因为在IE中定位出了问题,li标签还在,只是位置计算出错.解决的办法是在li的css样式中position设置为relative.这个问题在火狐等其他浏览器是不存在的. 2.如果拖动的li所在容器出现了滚动条,当滚动条滑到最下面的时候,拖拽下面的li的浮动层位置会出现偏移.解决的办法是在jquery.dragsort.js中,this.draggedItem.css({ top: top, left: left });这句

gridster.js–可拖拽的网格插件

gridster.js–可拖拽的网格插件 gridster.js 是一个 jQuery 插件用来构建直观的可拖放的布局,支持多列布局,你还可以动态的添加和删除表格中的元素. \ 主要特性 1.只依赖jQuery 2.支持元素的添加和删除 3.文档比较全 4.拥有测试用例,你可以查看你的浏览器的测试结果 5.比较适合开发益智游戏 如何使用 引入类库,包括jQuery和gridster.js: <script src="http://ajax.googleapis.com/ajax/libs/

用js实现拖拽功能

平常我们在网上可以看到,按住一张图片,然后拖到另一处去,前天在网上看石川(Blue)老师 的js课堂,有见过这个,写下来与大家分享一下: 1,先画个div小红块,样式设置如下: #div1{width: 200px; height: 200px; background-color: red; position:absolute;} 这里的positon属性很重要,如果没有这个,根本拖不动你可以试一下. 2,然后需要用到三个事件,onmousedown, onmousemove, onmouseu

Ant Design -- 图片可拖拽效果,图片跟随鼠标移动

Ant Design 图片可拖拽效果,图片跟随鼠标移动,需计算鼠标在图片中与图片左上角的X轴的距离和鼠标在图片中与图片左上角的Y轴的距离. constructor(props) { super(props); this.dragDrop = false; // 图片是否被拖动中 this.apartX = 0; // 鼠标在图片中与图片左上角的X轴的距离 this.apartY = 0; //鼠标在图片中与图片左上角的Y轴的距离 this.state = { value: 1, previewV

JS—实现拖拽

JS中的拖拽示例:    1)实现拖拽思路:当鼠标按下和拖拽过程中,鼠标与拖拽物体之间的相对距离保持不变    2)实现拖拽遇到的问题:        问题1:当鼠标按下移动过快时,离开了拖拽的物体时,这时拖拽物体将不再随着鼠标移动                因为拖拽的div太小了,这时我们可以将在拖拽物体上的mousemove事件放到document上面                同时将mouseup也改为document上面的事件                IE下直接用obj.s

js 利用jquery.gridly.js实现拖拽并且排序

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src='javascripts/jquery.js' type='text/javascript'></script> <script src='javascripts/jqu

js实现拖拽框

纯js版的拖拽框,该效果很简单 直接看代码..... <!doctype html> <html> <head> <meta charset="urf-8"/> <style> #box{ border:1px solid #ccc; position:absolute; border-radius:4px; border-shadow:10px 10px 5px #888888; } #box h1{ margin:0; p

一个用js实现拖拽的小例子

代码: 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 7 <style> 8 9 body { 10 margin: 0; 11 } 12 13 #rect { 14 width: 100px; 15 height: 100px; 16 b

JS简易拖拽效果

原理:注册mousemove事件,使元素跟随鼠标挪动:注册mouseup事件,移除mousemove事件,使得松开鼠标时元素不再跟随移动,能够固定在指定位置.在mousedown事件中注册mousemove事件和mouseup事件,这样便可完成一次完整的拖拽. 重点:IE中setCapture()的应用.它的作用是捕捉所有的MouseEvent,设置完成后,即使鼠标移出窗口注册的鼠标事件仍然能够被触发.它在此处的作用是当鼠标移动过快越出元素的边界使得原本将要失效的mousemove事件依然能够发