<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>鼠标按下，DIV跟随移动</title>

<style>

*{

margin: 0;

padding: 0;

}

#ball{

width: 200px;

height: 200px;

background: pink;

border-radius: 50%;

cursor: move;

position: absolute;

}

</style>

</head>

<body>

<div id="ball"></div>

</body>

<script>

//获取元素

var ball = document.getElementById('ball');

console.log(ball);

//声明全局变量

var leftCha,topCha;

//定义鼠标是否按下的标识

var isDown = false;

ball.onmousedown = function(e){

var e = e || window.event;

leftCha = e.clientX - ball.offsetLeft;

topCha = e.clientY - ball.offsetTop;

isDown = true;

}

window.onmousemove = function(e){

var e = e || window.event;

if(!isDown){

return;  //终止程序执行

}

ball.style.left = e.clientX - leftCha + 'px';

ball.style.top = e.clientY - topCha + 'px';

}

ball.onmouseup = function(e){

isDown = false;

}

</script>

</html>

【案例】鼠标按下，DIV跟随移动的更多相关文章

  1. JQ方法实用案例///鼠标移动到div和修改ipt中弹窗、CSS鼠标变小手、JQ获取元素属性、JQ选择器

    今天学习了jQ,jQ对js的帮助很大,菜鸟教程上也有属性.可以查看 js 和 jquery主要的区别 在 dom    想用jquery  必须先引入(顺序问题)        先css 再js:   ...

  2. javascript--鼠标拖拽窗口案例（鼠标按下，在鼠标移动过程中，盒子跟着一起移动，鼠标松开，盒子停止移动）

    界面如图所示: 要求:在“信息注册”栏,按下鼠标,然后鼠标在页面移动,在鼠标移动过程中,该窗口跟着鼠标移动,当鼠标松开的时候,窗口停止移动.点击“关闭”,该窗口隐藏. 实现思路: 1.页面结构分析:一 ...

  3. 经典的 div + css 鼠标 hover 下拉菜单

    经典的 div + css 鼠标 hover 下拉菜单 效果图: 源码: <html> <head> <meta charset="utf-8"> ...

  4. div跟随鼠标移动

    1.目标是实现div跟随鼠标而移动,分三种情况进行实现 a)首先获取div,进行绑定鼠标移动事件,给div开启定位功能 第一种实现方式,假如body的大小跟页面大小一样,则可以用这个方法. 1)获取鼠 ...

  5. jQuery---钢琴案例 （按下1-9数字键，能触发对应的mouseenter事件）

    钢琴案例 (按下1-9数字键,能触发对应的mouseenter事件) 1. 结合之前的学习,主要内容,就是on注册keyup事件,函数里传入e, 用e.keyCode,来获取1-9的数字的范围. 如果 ...

  6. 案例：简易的Div拖拽

    案例:简易的Div拖拽 鼠标移入Div区域后,按下鼠标左键,可以拖动Div移动;松开鼠标左键,Div拖动停止.同时要求Div不能拖出屏幕显示区域外. 拖拽原理:距离不变.三个事件(onmousedow ...

  7. 原生态js，鼠标按下后，经过了那些单元格

    本来是要判断那些单元格被选中,结果发现行不通,只能判断鼠标按下后,经过了那些单元格 之所以发出来,是觉得案例还有很多有意思的地方 onmouseover  的持续触发,导致了很多重复元素 由于将事件绑 ...

  8. 简单的鼠标可拖动div 兼容IE/FF

    来源:http://www.cnblogs.com/imwtr/p/4355416.html 作者: 主要思路: 一个div,注册监听onmousedown事件,然后处理获取的对象及其相关值(对象高度 ...

  9. 只要把鼠标移上Div方框，方框就自动顺时针旋转

    这是一个CSS3特效,IE下看不到效果.一个Div方框,在CSS3代码的作用下,只要把鼠标移上Div方框,方框就自动顺时针旋转.代码量不大,甚至有些简单,作为一个基础的CSS3实例,我想还是比较不错的 ...

随机推荐

  1. NX二次开发-NXOPEN找相切面方法ScRuleFactory()->CreateRuleFaceTangent

    #include <uf_defs.h> #include <uf_ui_types.h> #include <iostream> #include <NXO ...

  2. 2015年7个重要的Web设计趋势

    Web设计趋势每一年都会有所变化.但设计师的创意天赋是推动改变网页设计标准的法则.如果在2015年,网页缺少以下7个设计元素,必定被淘汰~ 1.排版更灵活 这部分的主要焦点在于,字体展现会受到新兴排版 ...

  3. Victor and String HDU - 5421 双向回文树

    题意: 有n种操作,开始给你一个空串,给你4中操作 1 c  在字符串的首部添加字符c 2 c  在字符串的尾部添加字符c 3  询问字符中的本质不同的回文串的个数 4 询问字符串中回文串的个数 思路 ...

  4. 【2018ACM/ICPC网络赛】沈阳赛区

    这次网络赛没有打.生病了去医院了..尴尬.晚上回来才看了题补简单题. K  Supreme Number 题目链接:https://nanti.jisuanke.com/t/31452 题意:输入一个 ...

  5. java获得磁盘、网络实时I/O速率

    最近项目中需要一个平台硬件资源的监控模块,当时采用了Sigar中api,但是做到针对磁盘和网络的实时I/O速率的时候发现Sigar并没有直接支持的接口.于是……它就诞生了.底层采用C++编写,通过ja ...

  6. netty 文件传输

    FileServer package com.zhaowb.netty.ch13_1; import io.netty.bootstrap.ServerBootstrap; import io.net ...

  7. more指令和less指令使用的区别

    more和less都是可以一页一页的翻动 more翻页的时候,显示有百分比在最下一行 less没有 more可以用来查询 空白键 (space):代表向下翻一页:Enter :代表向下翻『一行』:/字 ...

  8. JS对象 返回/设置年份方法 get/setFullYear() 返回/设置年份，用四位数表示。.顺序格式依次为：星期、月、日、年、时、分、秒、时区。(火狐浏览器)

    返回/设置年份方法 get/setFullYear() 返回/设置年份,用四位数表示. var mydate=new Date();//当前时间2014年3月6日 document.write(myd ...

  9. 利用 Dockerfile 定制镜像

    镜像的定制实际上就是定制每一层所添加的配置.文件. 如果我们可以把每一层修改.安装.构建.操作的命令都写入一个脚本,用这个脚本来构建.定制镜像, 那么之前提及的无法重复的问题.镜像构建透明性的问题.体 ...

  10. wpf datagrid 如何自定义行的控件实例，（textbox 并选中则全选）

    主要是为了用户输入方便 按回车,选中下一列,text自动获取焦点,输入状态 获取控件实例  https://blog.csdn.net/m15188153014/article/details/486 ...