用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实现一个砖头在页面拖拉效果的更多相关文章

  1. 1000粉！使用Three.js实现一个创意纪念页面 🏆

    声明:本文涉及图文和模型素材仅用于个人学习.研究和欣赏,请勿二次修改.非法传播.转载.出版.商用.及进行其他获利行为. 背景 不知不觉,掘金关注者人数已经超过 1000 人,因此特地做了这个页面纪念一 ...

  2. Vue.js实现一个SPA登录页面的过程

    技术栈 vue.js 主框架 vuex 状态管理 vue-router 路由管理 一般过程 在一般的登录过程中,一种前端方案是: 检查状态:进入页面时或者路由变化时检查是否有登录状态(保存在cooki ...

  3. 用js做一个简单的留言板效果

    html部分: 1: <!DOCTYPE> 2: <html lang="zh-en"> 3: <head> 4: <title>j ...

  4. Vue.js写一个SPA登录页面的过程

    技术栈 vue.js 主框架 vuex 状态管理 vue-router 路由管理 一般过程 在一般的登录过程中,一种前端方案是: 检查状态:进入页面时或者路由变化时检查是否有登录状态(保存在cooki ...

  5. HTML/CSS+JS制作一个高考倒计时页面

    2020-07-09更新 修复倒计时归零后出现负数的bug 自动切换至下一年日期 ##效果展示 前言 在B站上找视频学习的,勉强搞出来了,写下此篇文章作为笔记,也希望有更多感兴趣的人能够有所收获. ( ...

  6. Vue.js实现一个SPA登录页面的过程【推荐】

    地址:https://www.jb51.net/article/112550.htm vue路由跳转时判断用户是否登录功能的实现 地址:https://www.jb51.net/article/126 ...

  7. 领导让我重新做一个微信H5页面！

    leader:我们需要做一个微信H5页面,效果如图,功能如描述,时间越快越好. 需求是不是很简单呢?2015-11-24 12:44:00文末有最新更新 背景描述 前几天微信转发相关项目开发后,这是第 ...

  8. 如何查看一个网页特定效果的js代码（动画效果可js和css）（页面可以看到js的源代码）

    如何查看一个网页特定效果的js代码(动画效果可js和css)(页面可以看到js的源代码) 一.总结 1.动画效果可能是 CSS 实现的,也可能是 JS 实现的. 2.直接Chrome的F12调试即可, ...

  9. 使用 SVG 实现一个漂亮的页面预加载效果

    今天我们要为您展示如何使用 CSS 动画, SVG 和 JavaScript 创建一个简单的页面预加载效果.对于网站来说,这些预载入得画面提供了一种创造性的方法,使用户在等待内容加载的时候不会那么无聊 ...

随机推荐

  1. 【HTML】Intermediate2：Text: AbbreviationsQuotations Code

    1.</abbr> attribute:title 2.Quotations blockquote :standalone often multi-line quotations-cite ...

  2. 完美atoi，哈哈

    /* atoi算法,要求完美版 有两种,一种是用longlong,一种是真用int “” " " “-” “+” “ -23” “ +23” “12a" "ab ...

  3. Ant执行一个含有main方法的class文件

    目前需要使用ant来执行一个含有main方法的class文件,并且需要通过命令来行传两个参数(start和end)到main方法. <target name="gsp" de ...

  4. java动态编程库，利用动态编程打印运行时调用全景(函数调用关系链)

    如果是一般java程序,不追求性能极致,想使用方便,推荐使用 Javassist 库. 如果是android程序,或者一般java程序欲追求性能极限,推荐使用 asm for java 及 asmde ...

  5. 安装 Linux 与 Windows 10 双系统，你需要了解的一切

    该选Windows 10还是Linux Mint?鱼与熊掌当然可以兼得,但咱们得掌握点小技巧才能顺利搞定. Windows 10绝不是唯一一款值得我们安装在自己计算机之上的免费操作系统.Linux只靠 ...

  6. 几乎每个文件里面都有 #ifdef __cplusplus extern "C" { #endif 可我没找到程序里那个地方定义了__cplusplus 啊？这又是怎么回事呢？

    我们的C语言有个进化版,叫C++,这个想必楼主知道,Keil MDK是支持C++编程的,也就是说,你可以用C语言或者C++写你的程序,都可以. 但是,有一个问题,就是头文件的问题,C语言写的头文件C+ ...

  7. 转载 yii2-按需加载并管理CSS样式/JS脚本

    一.资源包定义 Yii2对于CSS/JS 管理,使用AssetBundle资源包类. 创建如下: backend/assets/AppAsset.php namespace backend\asset ...

  8. 使用VisualSVN Server搭建SVN服务器(转载)

    转载于http://www.cnblogs.com/greywolf/archive/2013/01/28/2879952.html 使用 VisualSVN Server来实现主要的 SVN功能则要 ...

  9. IOS - view之间切换

    //进入下一页 - (IBAction)Go:(id)sender { TwoViewController *twoVC = [[TwoViewController alloc] init];//这里 ...

  10. 关于IOS中UIWebView 加载HTML内容

    NSString *strContent=[info objectForKey:@"newContent"]; { NSArray *paths = NSSearchPathFor ...