控制操作

通过按钮和上下左右键控制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{960px; margin: 0px auto;} #opts{ 400px; padding: 8px; margin: 0px auto; overflow: hidden;} #opts input{margin-right: 40px; margin-bottom: 10px; padding: 6px;} #content{ 400px; height: 650px; margin: 0px auto; position: relative; border:1px solid #ccc; overflow: hidden; } #content .mask{ 260px; height: 460px; position: absolute; left:70px; top: 95px; border: 2px solid #FF0000; z-index: 999;} #box{ 300px; height: 500px; position: absolute; left:50px; top: 75px; } #box img{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>

相关阅读:
关于position定位
获取滚动条距离的兼容问题
margin取百分值
float 与 display：inline-block
Object.getOwnPropertyNames()
正则表达式的方法：replace，match，test（replace参数可以是回调函数）
offset / scroll / client Left / Top
client / page / offset / screen X / Y
原生js贪吃蛇
Functional PHP 5.3 Part I

原文地址：https://www.cnblogs.com/kuikui/p/2583904.html