js实现砖头在页面拖拉效果
作者：烽火戏诸诸诸侯 时间：2024-05-22 10:40:24
用js实现一个砖头在页面，但鼠标点击拖动时，砖头在页面上形成拖拉效果：
刚开始时：
鼠标点击拖动后：
实现代码：
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
*{
margin:0px;
padding:0px;
}
#zhuantou{
width:120px;
height:60px;
background-image:url(1.jpg);
position:fixed;
left:100px;
top:50px;
}
</style>
<body>
<div id="zhuantou">
</div>
<script>
var zt=document.querySelector("#zhuantou");
var isPressed=false;
var offsetX=0;
var offsetY=0;
zt.onmousedown=function(event){
isPressed=true;
this.style.cursor="move";
offsetX=event.offsetX;
offsetY=event.offsetY;
};
zt.onmouseup=function(){
isPressed=false;
this.style.cursor="default";
};
zt.onmousemove=function(event){
if(!isPressed){
return;
}
zt.style.left=(event.clientX-offsetX)+"px";
zt.style.top=(event.clientY-offsetX)+"px";
};
</script>
</body>
</html>
标签：js,页面拖拉
0
投稿猜你喜欢
python自动化测试selenium执行js脚本实现示例
2023-10-23 06:41:58
javascript检测页面是否缩放的小例子
2024-04-10 16:13:50
js实现关闭网页出现是否离开提示
2024-05-09 10:36:13
MySQL中关于临时表的一些基本使用方法
2024-01-18 01:22:34
各种Python库安装包下载地址与安装过程详细介绍(Windows版)
2021-01-27 14:00:05
vuex state及mapState的基础用法详解
2024-05-13 09:07:23
手把手教你将Flask应用封装成Docker服务的实现
2023-05-27 06:57:15
mysql插入前判断数据是否存在的操作
2024-01-19 20:45:24
Python数据分析基础之文件的读取
2022-10-16 21:25:21
python Airtest自动化测试工具的的使用
2023-10-28 02:12:57
Python实现读取机器硬件信息的方法示例
2021-02-04 16:28:55
ASP 判断是否有中文的代码
2011-04-15 11:07:00
PHP中PDO基础教程 入门级
2023-11-14 16:34:39
对python中assert、isinstance的用法详解
2022-04-29 14:10:54
关于PyQt5主窗口图标显示问题汇总
2022-03-27 08:23:18
PHP webshell检查工具 python实现代码
2024-05-03 15:06:00
数据库清除日志文件(LDF文件过大)
2024-01-14 04:05:36
Java如何连接数据库图文教程
2024-01-16 20:45:16
Python3实现爬取简书首页文章标题和文章链接的方法【测试可用】
2021-10-08 00:22:10
python修改全局变量可以不加global吗?
2021-01-11 08:10:56
