控制操作-阿里云开发者社区

开发者社区> 爱六六> 正文

控制操作

简介: 通过按钮和上下左右键控制div中的属性向左移2像素    ← 按下时向左移10像素向右移2像素    → 按下时向右移10像素向上移2像素    ↑  按下时向上移10像素向下移2像素    ↓  按下时向下移10像素放大  ctrl + ↑  系数为1.
+关注继续查看

通过按钮和上下左右键控制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>

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
阿里云服务器怎么设置密码?怎么停机?怎么重启服务器?
如果在创建实例时没有设置密码,或者密码丢失,您可以在控制台上重新设置实例的登录密码。本文仅描述如何在 ECS 管理控制台上修改实例登录密码。
9497 0
IoC 控制反转
控制反转一般分为两种类型,依赖注入(Dependency Injection,简称DI)和依赖查找(Dependency Lookup)。依赖注入应用比较广泛。 控制反转(IOC)模式(又称DI:Dependency Injection)就是Inversion of Control,控制反转。在Java开发中,IoC意 味着将你设计好的类交给系统(一般是容器)去控制,而不是在你的类内部控制。这
1540 0
Spring之AOP事务操作
Spring之AOP事务操作 事务操作常用的API PlatformTransactionManager(平台事务管理器) Spring进行事务操作时候,主要使用一个PlatformTransactionManager接口,它表示事务管理器,即真正管理事务的对象。
1249 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,阿里云优惠总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系.
13186 0
封装多线程处理大量数据操作
们需要解决WaitAny和取得异步执行的返回值的问题。地球人都知道Thread和ThreadPool接受的委托都是没有返回值的。要想取的返回值,我们就得自己动手了,我们需要构造一个AsyncContext类,由这个类来保存异步执行的状态以并存储返回值。
619 0
利用jailkit-2.16.tar.gz + ssh 进行 chroot 操作[备忘]
目标  利用  jaikit 环境, 能够把某个目录虚拟成为 / ,  并且把远程用户限制在该目录中活动,与真正的系统 / 环境进行隔离 利用该环境能够避免开发人员过多地访问系统资源,增加系统安全性     1.      编译jailkit-2.16.tar.gz  ./configure &amp;&amp; make &amp;&amp; make install  
973 0
阿里云ECS云服务器初始化设置教程方法
阿里云ECS云服务器初始化是指将云服务器系统恢复到最初状态的过程,阿里云的服务器初始化是通过更换系统盘来实现的,是免费的,阿里云百科网分享服务器初始化教程: 服务器初始化教程方法 本文的服务器初始化是指将ECS云服务器系统恢复到最初状态,服务器中的数据也会被清空,所以初始化之前一定要先备份好。
6895 0
C\C++控制台程序隐藏方法总结
        学习计算机,往往先从Windows环境下学习编程,学习编程,往往从C学起,学习C,往往又从控制台程序学习,何为控制台,就是那个黑框白字的界面。
2016 0
+关注
爱六六
前端开发相关专家
164
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载