<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<title>每天一个JavaScript实例-铺货鼠标点击位置并将元素移动到该位置</title>

<style>

#info{

		width:100px;

		height:100px;

		background:red;

		position:absolute;

		top:0;

		left:0;

	}

</style>

<script>

window.onload = function(){

		document.onclick = clickwhere;

	}

	function clickwhere(evt){

			evt = evt || window.event;

			var x =0;

			var y = 0;

			if (evt.pageX){

				x = evt.pageX;

				y = evt.pageY;

				}else if(evt.clientX){

					var offsetX = 0;

					var offsetY = 0;

					if(document.documentElement.scrollleft){

						offsetX = document.documentElement.scrollLeft;

						offsetY = document.documentElement.scrollTop;

						}else if(document.body){

							offsetX = document.body.scrollLeft;

							offsetY = document.body.scrollTop;

							}

						x = evt.clientX + offsetX;

						y = evt.clientY + offsetY;

					}

					var style = "left:" +x + "px;top:"+ y + "px";

					var box = document.getElementById("info");

					box.setAttribute("style",style);

		}

</script>

</head>

<body>

<div id = "info">

</div>

</body>

</html>

每天一个JavaScript实例-铺货鼠标点击位置并将元素移动到该位置的更多相关文章

  1. 每天一个JavaScript实例-从一个div元素删除一个段落

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  2. 每天一个JavaScript实例-推断图片是否载入完毕

    <!doctype html> <html lang="en"> <head> <meta charset="utf-8&quo ...

  3. 每天一个JavaScript实例-动态省份选择城市

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  4. 每天一个JavaScript实例-递归实现反转数组字符串

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  5. 每天一个JavaScript实例-html5拖拽

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  6. 每天一个JavaScript实例-canvas绘图

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  7. 每天一个JavaScript实例-防止反复表单提交

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  8. 每天一个JavaScript实例-展示设置和获取CSS样式设置

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  9. 每天一个JavaScript实例-apply和call的使用方法

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

随机推荐

  1. 看<Asp.net夜话>随笔(2013-10-13)

    1.Asp.net内置对象 1.1Request对象 封装了客户端请求信息 1.2Response对象 代表了服务器响应对象,可以向客户端返回数据 1.3Server对象 是用于获取服务器的相关信息的 ...

  2. 洛谷 P1727 计算π

    P1727 计算π 题目背景 <爱与愁的故事第二弹·compute>第一章. 题目描述 中秋至,博饼声铿锵不断.爱与愁大神兴致勃勃地到学校博饼,结果抱回家的只有一秀二举.爱与愁大神十分生气 ...

  3. Surging Demo 项目之一

    原文:Surging Demo 项目之一 开发与运行环境 IDE Visual Stadio 2017/Visual Stadio 2019 Visual Stadio Core Docker 和 D ...

  4. Redis学习笔记--Hash（五）

    Redis的数据是通过key-value的方式存储的,对于value的数据类型有字符串.Hash.list.set.sortedSet在redis命令语句中,语句是忽略大小写的,但是key是不可以忽略 ...

  5. 2016最新CocoaPods安装与使用

    前言 是不是已经厌烦了将各种库拖拽到Xcode项目中?那么,CocoaPods的出现就帮你解决了这一问题.CocoaPods是Objective-C项目中最有名的类库管理工具,可以解决库与库之间的依赖 ...

  6. 【Codeforces Round #435 (Div. 2) A】Mahmoud and Ehab and the MEX

    [链接]h在这里写链接 [题意] 在这里写题意 [题解] 让x没有出现,以及0..x-1都出现就可以了. [错的次数] 0 [反思] 在这了写反思 [代码] #include <bits/std ...

  7. 一起学JAVA之《spring boot》03 - 开始spring boot基本配置及项目结构（转）

    <div class="markdown_views"> <h3 id="一导航"><a name="t0"& ...

  8. c#.net公共帮助类

    c#.net公共帮助类 比较全面的c#帮助类 比较全面的c#帮助类,日常工作收集,包括前面几家公司用到的,各式各样的几乎都能找到,所有功能性代码都是独立的类,类与类之间没有联系,可以单独引用至项目,分 ...

  9. 8、hzk16的介绍以及简单的使用方法

    HZK16 字库是符合GB2312标准的16×16点阵字库,HZK16的GB2312-80支持的汉字有6763个,符号682个.其中一级汉字有3755个,按 声序排列,二级汉字有3008个,按偏旁部首 ...

  10. 【例题5-2 UVA - 101】The Blocks Problem

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 用vector模拟就好. resize的时候,只是把多余的清理掉. 原先的不会变的. [错的次数] 在这里输入错的次数 [反思] 在 ...