通过按钮和上下左右键控制div中的属性向左移2像素 ← 按下时向左移10像素向右移2像素 → 按下时向右移10像素向上移2像素 ↑ 按下时向上移10像素向下移2像素 ↓ 按下时向下移10像素放大 ctrl + ↑ 系数为1.01扩大 缩小 ctrl + ↓ 系数为0.99减小快速使图片位于红色方框内确定计算图片在红色边框内的坐标位置
<!DOCTYPE html> <html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <style type="text/css"> *{margin:0px; padding: 0px;} #page{width:960px; margin: 0px auto;} #opts{width: 400px; padding: 8px; margin: 0px auto; overflow: hidden;} #opts input{margin-right: 40px; margin-bottom: 10px; padding: 6px;} #content{ width: 400px; height: 650px; margin: 0px auto; position: relative; border:1px solid #ccc; overflow: hidden; } #content .mask{width: 260px; height: 460px; position: absolute; left:70px; top: 95px; border: 2px solid #FF0000; z-index: 999;} #box{ width: 300px; height: 500px; position: absolute; left:50px; top: 75px; } #box img{width:100%; height: 100%;} </style> </head> <body> <div id="page"> <div id="opts"> <input id="left" type="button" value="向左" /> <input id="right" type="button" value="向右" /> <input id="up" type="button" value="向上" /> <input id="down" type="button" value="向下" /> <input id="enlarge" type="button" value="放大" /> <input id="narrow" type="button" value="缩小" /> <input id="fast" type="button" value="快速" /> <input id="good" type="button" value="确定" /> </div> <div id="content"> <div id="mask" class="mask"></div> <div id="box"><img alt="" src="http://images.cnblogs.com/cnblogs_com/kuikui/354173/r_test3.jpg" /></div> </div> </div> <script type="text/javascript"> function $(id){return document.getElementById(id);} function addEvent(element, type, handler) { if (element.addEventListener) { element.addEventListener(type, handler, false); } else if (element.attachEvent) { element.attachEvent("on" + type, handler); } else { element["on" + type] = handler; } } addEvent(window,"load",function(){ var oBox = $("box"); var left = $("left"); var right = $("right"); var up = $("up"); var down = $("down"); var enlarge = $("enlarge"); var narrow = $("narrow"); var fast = $("fast"); var good = $("good"); var mask = $("mask"); addEvent(left,"click",function(){ oBox.style.left = oBox.offsetLeft - 2 + "px"; return false; }); addEvent(right,"click",function(){ oBox.style.left = oBox.offsetLeft + 2 + "px"; return false; }); addEvent(up,"click",function(){ oBox.style.top = oBox.offsetTop - 2 + "px"; return false; }); addEvent(down,"click",function(){ oBox.style.top = oBox.offsetTop + 2 + "px"; return false; }); addEvent(enlarge,"click",function(){ var oldWidth = oBox.offsetWidth; var oldHeight = oBox.offsetHeight; oBox.style.width = oBox.offsetWidth * 1.01 + "px"; oBox.style.height = oBox.offsetHeight * 1.01 + "px"; oBox.style.left = oBox.offsetLeft - (oBox.offsetWidth - oldWidth) / 2 + "px"; oBox.style.top = oBox.offsetTop - (oBox.offsetHeight - oldHeight) / 2 + "px"; return false; }); addEvent(narrow,"click",function(){ var oldWidth = oBox.offsetWidth; var oldHeight = oBox.offsetHeight; oBox.style.width = oBox.offsetWidth * 0.99 + "px"; oBox.style.height = oBox.offsetHeight * 0.99 + "px"; oBox.style.left = oBox.offsetLeft - (oBox.offsetWidth - oldWidth) / 2 + "px"; oBox.style.top = oBox.offsetTop - (oBox.offsetHeight - oldHeight) / 2 + "px"; return false; }); addEvent(fast,"click",function(){ oBox.style.width = "260px"; oBox.style.height = "460px"; oBox.style.left = "72px"; oBox.style.top = "97px"; return false; }); addEvent(good,"click",function(){ var ax = mask.offsetLeft - oBox.offsetLeft; var ay = mask.offsetTop - oBox.offsetTop; var bx = mask.offsetLeft - oBox.offsetLeft + mask.offsetWidth; var by = mask.offsetTop - oBox.offsetTop; var cx = mask.offsetLeft - oBox.offsetLeft; var cy = mask.offsetTop - oBox.offsetTop + mask.offsetHeight; var dx = mask.offsetLeft - oBox.offsetLeft + mask.offsetWidth; var dy = mask.offsetTop - oBox.offsetTop + mask.offsetHeight; alert(ax+" "+ay+" "+" "+dx+" "+dy); return false; }); var bLeft = bTop = bRight = bBottom = bCtrlKey = false; setInterval(function () { if (bLeft) { oBox.style.left = oBox.offsetLeft - 10 + "px" } else if (bRight) { oBox.style.left = oBox.offsetLeft + 10 + "px" } if (bTop) { oBox.style.top = oBox.offsetTop - 10 + "px" } else if(bBottom) { oBox.style.top = oBox.offsetTop + 10 + "px" } limit(); },30); document.onkeydown = function (event) { var event = event || window.event; bCtrlKey = event.ctrlKey; switch (event.keyCode) { case 37: bLeft = true; break; case 38: if(bCtrlKey) { var oldWidth = oBox.offsetWidth; var oldHeight = oBox.offsetHeight; oBox.style.width = oBox.offsetWidth * 1.5 + "px"; oBox.style.height = oBox.offsetHeight * 1.5 + "px"; oBox.style.left = oBox.offsetLeft - (oBox.offsetWidth - oldWidth) / 2 + "px"; oBox.style.top = oBox.offsetTop - (oBox.offsetHeight - oldHeight) / 2 + "px"; break; } bTop = true; break; case 39: bRight = true; break; case 40: if(bCtrlKey) { var oldWidth = oBox.offsetWidth; var oldHeight = oBox.offsetHeight; oBox.style.width = oBox.offsetWidth * 0.75 + "px"; oBox.style.height = oBox.offsetHeight * 0.75 + "px"; oBox.style.left = oBox.offsetLeft - (oBox.offsetWidth - oldWidth) / 2 + "px"; oBox.style.top = oBox.offsetTop - (oBox.offsetHeight - oldHeight) / 2 + "px"; break; } bBottom = true; break; } return false }; document.onkeyup = function (event) { switch ((event || window.event).keyCode) { case 37: bLeft = false; break; case 38: bTop = false; break; case 39: bRight = false; break; case 40: bBottom = false; break; } }; var content = $("content"); function limit(){ var doc = [content.clientWidth, content.clientHeight] oBox.offsetLeft <=0 && (oBox.style.left = 0); oBox.offsetTop <=0 && (oBox.style.top = 0); doc[0] - oBox.offsetLeft - oBox.offsetWidth <= 0 && (oBox.style.left = doc[0] - oBox.offsetWidth + "px"); doc[1] - oBox.offsetTop - oBox.offsetHeight <= 0 && (oBox.style.top = doc[1] - oBox.offsetHeight + "px"); } }); </script> </body> </html>
运行代码
