【使用JS制作一个鼠标可拖的DIV（二）——限制区域移动】的更多相关文章

使用JS制作一个鼠标可拖的DIV（二）——限制区域移动

这次是要对上一篇的内容进行扩展. 由于需要对可拖动的 DIV 进行一个区域范围的限制,所以要给于一个容器,让可拖动的 DIV 元素不能逃出该容器的大小范围. 一.思路 1.在外层增加一个 DIV 容器,并设置好容器的大小.(即:宽和高) 当容器存在边框的时候,由于这里还没找到获取的方法,所以,在容器边框大于 0 的时候,获得的容器的限制区域的坐标会有误差. 为了避免这情况,可以在多加一次容器,有边框样式的在外层,无边框样子的在内层. 例: <style> #mainContainer { bo…

使用JS制作一个鼠标可拖的DIV（一）——鼠标拖动

使用 JS 来实现一个可拖动的DIV,主要是使用到以下几个事件: 1.鼠标按下:DIV元素的onmousedown. 2.鼠标按住拖动:document 的 onmousemove 元素. 3.鼠标放开:document 的 onmouseup 元素. 一.思路 1.当使用点击要拖动的 DIV 时,要首先计算出鼠标的位置与元素位置的差值: 1.1.X坐标的差值 = 鼠标当前位置的X坐标 - DIV元素的X坐标(即:左偏移量) 1.2.Y坐标的差值 = 鼠标当前位置的Y坐标 - DIV元素的Y坐标…

使用JS制作一个鼠标可拖的DIV（四）——缩放

原理与鼠标拖动 DIV 相同. 下面就先实现一个在DIV的右上角显示一个小正方形(类似). 当鼠标按下并拖动时,DIV会以要拖动的元素的左下角的坐标点定位,根据鼠标的拖动,按比例的扩大或缩小. 一.思路 1.鼠标按时事件. 这里要初始化数据. 同移动一样,给小正方形绑定鼠标按时事件. (1)获得并保存要移动的元素(parent)的宽(parentWidth)与高(parentHeight). 即:元素缩放前的宽与高. (2)由于是要按比例缩放,所以,要在这时计算出宽与高的比例(scale),得到…

使用JS制作一个鼠标可拖的DIV（三）——移动带图片DIV

当DIV元素里,存在图片元素的时候,会使拖动出现异常. 因为图片元素本身就支持拖动,所以,只要在图片标签加入:draggable='false'. 如下: <div onmousedown="moveBind(this, event)" style="width:50px;height:50px; left:285px;top:370px; position:absolute;"><img src="http://pic.cnitblog…

用JS制作一个信息管理平台完整版

  前  言 JRedu 在之前的文章中,介绍了如何用JS制作一个实用的信息管理平台. 但是那样的平台功能过于简陋了,我们今天来继续完善一下. 首先我们回顾一下之前的内容.   1.JSON的基础知识 1.1  什么是JSON JSON是数据交互中,最常用的一种数据格式. 由于各种语言的语法都不相同,在传递数据时,可以将自己语言中的数组.对象等转换为JSON字符串. 传递之后,可以将JSON字符串,再解析为JSON对象. JSON对象的使用与JS中的对象基本相同,唯一需要区别的是,JSON中的键…

three.js 制作一个三维的推箱子游戏

今天郭先生发现大家更喜欢看我发的three.js小作品,今天我就发一个3d版本推箱子的游戏,其实webGL有很多框架,three.js并不合适做游戏引擎,但是可以尝试一些小游戏.在线案例请点击博客原文. 要制作一个推箱子游戏,正常要有以下4个步骤 定义一些数组,要有开始箱子数组.结束箱子数组.地面数组还有墙面数组,有这四个数组就可以组成一个关卡. 根据数组初始化地面墙面箱子和目标地点标志物. 使用FirstPersonControls控制器,控制相机移动,根据地面箱子和墙面算出可移动区域. 根据…

JS制作一个创意数字时钟

通过js代码制作一个创意数字时钟 通过JS代码实现创意数字时钟效果如下:由数字化的卡通形象图片取代常规的数字显示当前实时北京时间.具体效果示例: 核心重点: (1)Date方法的初步了解 (2)构建模型,从特殊到一般. <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>cnblog头部轮播图</title&…

用js制作一个计算器

使用js制作计算器 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content=""> <meta n…

用js写一个鼠标坐标实例

HTML代码 写一个div来作为鼠标区域 div中写一个span显示坐标信息 <body> <div id=""> <span></span> </div> </body> 给div和span增加样式并定位 <style type="text/css"> div{ position: relative;/* 定位信息 */ background-color: #398439; /*…

用Phaser来制作一个html5游戏——flappy bird （二）

在上一篇教程中我们完成了boot.preload.menu这三个state的制作,下面我们就要进入本游戏最核心的一个state的制作了.play这个state的代码比较多,我不会一一进行说明,只会把一些关键的东西挑出来说. 我们点击游戏菜单中的开始按钮后,首先出现的是这个画面: 在第一部分的教程中,我们已经制作了一个游戏菜单的场景,这个页面也跟那个差不多,只不过这个页面去除了游戏标题和开始按钮,而多出了Get Ready以及提示点击屏幕来操作游戏的两张图片.在这个state里,我们需要启用物理引…