js实现砖头在页面拖拉效果
作者：烽火戏诸诸诸侯 发布时间：2024-05-22 10:40:24
标签：js,页面拖拉
用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>
0
投稿猜你喜欢
Django(python)简单实现android的服务器端1. 所需工具PyCharm--python编辑工具，这里要写Django，因此- 官网下载就好， https://www.python.org/downloads/release/python-352/用installer
- SQL Server 2008 备份数据库：1.打开SQL , 找到要备份的数据库 , 右键 >> 任务 >>备份2
- 1、解决方案mysql是不支持跨库连接的，如果我们实在要连接的话可以用dblink方式。解释：dblink就是我们在创建表的时候连接到我们的
- 前言随着深度学习的不断发展，从开山之作Alexnet到VGG，网络结构不断优化，但是在VGG网络研究过程中，人们发现随着网络深度的不断提高，
- 需求说明当用户申请售后，商家未在n小时内处理，系统自动进行退款。商家拒绝后，用户可申请客服介入，客服x天内超时未处理，系统自动退款。用户收到
- 导入相关的包import pygame, sys, randomfrom pygame.locals import *设置屏幕大小以及基本参
- 1.os 库基本介绍os库提供通用的、基本的操作系统交互功能。三大操作系统：windowsMac OSLinuxos 库是python标准库
- 本篇文章主要介绍Java操作MongoDB。开发环境：System：WindowsIDE：eclipse、MyEclipse 8Databa
- 方法1：1.安装requests_toolbelt依赖库#代码实现def upload(self): login_
- #!/usr/bin/python #-*- encoding: utf-8 -*- import types class NotInteg
- 由于Django没有象rails一样指定项目的目录结构规范，很多人都对django项目的目录结构要如何组织而感到困惑。为此我又新创建了一个开
- 一、实现代码1.sql-- phpMyAdmin SQL Dump-- version 4.5.1-- http://www.phpmyad
- Django是一个开放源代码的Web应用框架，由Python写成。采用了MTV的框架模式，即模型M，视图V和模版T。它最初是被开发来用于管理
- 原始数据原始数据大致是这样子的：每条数据中的四个数据分别是 当前节点名称，节点描述（指代一些需要的节点属性),源节点（即最顶层节点），父节点
- 1. 从字典创建Dataframe>>> import pandas as pd>>> dict1 =
- 一、利用直方图的方式进行批量的图片缺陷检测（方法简单）二、步骤（完整代码见最后）2.1灰度转换（将原图和要检测对比的图分开灰度化）灰度化的作
- 从毕业实习算起，从事可用性方面的工作到现在已经5年了。在此记录笔者的一些所见所想，和大家讨论分享一下。用户研究在“以用户为中心”的界面设计方
- 1.file--->settings:2.搜索temlates,点击File and Code Templates,点击右侧的Pyth
- 导入所需库％matplotlib inlineimport sympyimport numpy as npimport matplotlib
