让我们的小方块动起来

首先第一步给它一个div，再用jQuery给这个div设置一些样式，设置什么样式呢？就由我来为大家解读：

就是先设置宽高，再来张漂亮的图片
让图片的大小显示最大我们需要给它这个属性background-size设置它为100%，这样就可以实现我们想要的效果，另外：它的语法如下：backgroundsize: length|percentage|cover|contain;它其中的参数的意思分别是：

length：设置背景图像的高度和宽度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 "auto"。
percentage：以父元素的百分比来设置背景图像的宽度和高度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 "auto"。
cover：把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。
contain：把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。

第三．一定不能忘记设置定位"position": "absolute",，如果没有设置的话你的小方块就动不起来啦

其次我们要进入我们今天的正题了—jQuery，。

给我们的div绑定鼠标按下事件：$("div").mousedown(function (e) {})，不要忘记传一个参数哟，
我们要考虑到浏览器兼容的问题，所以var a = e || $(Event);这句代码别忘记，
*var div = $("div")[0];这句代码是将我们的jQuery对象转换成js对象，因为有一些方法是js的所以对象的转换很普遍，所以要牢记哟
再让我们来获取一下鼠标按下离页面上边和左边的距离，减去div离页面上边和左边的离距aa = e.clientX -div.offsetLeft; bb = e.clientY - div.offsetTop;
再给window绑定鼠标移入事件：window.οnmοusemοve=function (e) {}其中传入相同的参数，在获取一下鼠标所在的位置，在用鼠标所在位置减去第四步算出的距离，再把所获取的距离设置成div的top值和left值

最后给div绑定鼠标松开事件，在鼠标松开时让鼠标移入事件为false，综上所述就可以简单的实现小方块的拖拽，

效果如下：

被拖动前：

被拖动后：

使用jQuery让我们的小方块动起来相关推荐

在html中什么标签可以显示小方块,css列表前的小方块
css列表前的小方块自己用个符号·来代替,却发现怎么显示都比较小,后来自己研究才发现我的字体全部定义成tahoma了,只要采用"宋体"就正常了. 列表前的小方块--design ...
jQuery实现飞机大战小游戏
jQuery实现飞机大战小游戏一.效果图二.核心代码 1.创建地图 2.用户选择飞机界面 3.设置背景循环 4.创建飞机 5.创建敌机 6.敌机移动 7.设置敌机爆炸 8.创建子弹 9.检测子弹的 ...
使用 icon 字体图标出现小方块问题
今天在弄一个vue 项目的时候,碰到了引入icon 出现错误,现在总结一下问题: 主要碰到两个错误 1:路径错误,报错找不到modules, 2:路径错误,但是没有报错,只是显示小方块(也就是没有显示 ...
红色小方块单击爆炸式展开的菜单代码
代码简介:不知道能给它起个什么名字,就叫做"爆炸式菜单"吧,因为它的效果很像是爆炸开了,鼠标点击后会以一个五角星为基准单元依次展开,可以有多次,像链式表一样. 代码内容: < ...
解决sublime3的标签页乱码（小方块）
在使用sublime3打开一个中文名的文件时,有可能显示的是小方块.这种情况很有可能在你新买的电脑上发生,这是因为现在的电脑的DPI比较高,即使你安装了ConvertToUTF8也还是不会正确显示文件 ...
js实现随机生成小方块
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
俄罗斯小方块游戏html,通过h5的canvas手写一个俄罗斯方块小游戏
开始自己手写一个好玩的俄罗斯方块吧,上变形,左右移动,下加速,空格瞬移等功能,无聊的时候学习下canvas,f12 修改分数,体验金手指的快乐吧 1.定义界面,和按钮上下左右 2.js部分 1 ...
java 方块_哈工大java实验移动小方块
/*java第二次实验 * 移动小方块 */ import javax.swing.*; import java.awt.event.*; import java.awt.geom.*; import ...
IOS基础之愤怒的小方块
IOS基础之愤怒的小方块 // // ViewController.m // 18-愤怒的小方块 // // Created by 鲁军 on 2021/4/17. //#import "V ...

使用jQuery让我们的小方块动起来

让我们的小方块动起来

使用jQuery让我们的小方块动起来相关推荐

最新文章

热门文章