<!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. 【例题 7-5 UVA - 129】Krypton Factor

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 每次枚举增加一个字符; 然后看看新生成的字符的后缀里面有没有出现连续子串就好,前面已经确认过的没必要重复确认 (枚举长度为偶数的一个 ...

  2. leetCode 103.Binary Tree Zigzag Level Order Traversal （二叉树Z字形水平序） 解题思路和方法

    Given a binary tree, return the zigzag level order traversal of its nodes' values. (ie, from left to ...

  3. Could not find action or result: There is no Action mapped for namespace [/] and action name [GetG

    Could not find action or result: /car/GetGpsDataAction  There is no Action mapped for namespace [/] ...

  4. 通过Rman catalog 创建及管理Oracle数据库备份

    基本环境信息target DB (需备份数据库) 192.168.199.67 ORACLE_SID=zgw HOSTNAME=Oracle11 catlog DB (备份管理数据库) 192.168 ...

  5. （转）Oracle RAC日常管理命令

    转自:http://www.xuebuyuan.com/1206937.html 一.查看RAC环境 RAC架构,2节点信息 节点1 SQL> show parameter instance N ...

  6. 8、for 、emumrate、range、if

    1.for循环用户按照顺序循环可迭代对象中的内容,PS:break.continueli = [11,22,33,44]for item in li: print item 2.enumrate 为可 ...

  7. python3 打印九九乘法表

    打印九九乘法表 # !/usr/bin/env python # -*- coding:utf-8 -*- # Author:Hiuhung Wan for i in range(1, 10): fo ...

  8. Gamma correction 伽马校准及 matlab 实现

    matlab 内置实现:imadjust Gamma Correction gamma correction formula : .^(gamma) or .^(1/gamma)? 用以调整图像光照强 ...

  9. IOS开发常用的开源组件

    .AFNetworking是一个开源的网络库 .EGORefreshTableHeaderView是一个实现向下拉刷新列表的组件 .MBProgressHUD是一个进度显示的组件 .EGOImageL ...

  10. 看朋友日志发现的一个ios下block相关的内存管理问题，非常奇怪，请大家帮忙一起来回答！

    http://blog.csdn.net/fengsh998/article/details/38090205 这篇文章以下是我的回复.相同的代码仅仅是把变量的定义从局部变量改为类的成员变量就发现了非 ...