<!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. python3 turtle 画国际象棋棋盘

    python3 turtle 画国际象棋棋盘 #!/usr/bin/env python # -*- coding:utf-8 -*- # Author:Hiuhung Wan import turt ...

  2. Css fixed和absolute定位差别

    fixed:固定定位 absolute:绝对定位 差别非常easy: 1.没有滚动栏的情况下没有差异 2.在有滚动栏的情况下.fixed定位不会随滚动栏移动而移动.而absolute则会随滚动栏移动 ...

  3. UVA 11280 - Flying to Fredericton SPFA变形

    http://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&page=show_problem&c ...

  4. MyEclipse中 使用svn更新jar包 出现 svn cleanup failed–previous operation has not finished; run cleanup if it was interrupted 导致整个svn异常处理

    svn cleanup failed–previous operation has not finished; run cleanup if it was interrupted 2014-07-02 ...

  5. [Nuxt] Add CSS Libraries to Nuxt

    You can easily add CSS libraries to Nuxt using yarn or npm to install them, then simply adding them ...

  6. php BC高准确度函数库

    <? php *************************************************************************************** *p ...

  7. Spring中@Async用法详解及简单实例

    Spring中@Async用法 引言: 在Java应用中,绝大多数情况下都是通过同步的方式来实现交互处理的:但是在处理与第三方系统交互的时候,容易造成响应迟缓的情况,之前大部分都是使用多线程来完成此类 ...

  8. ZOJ 3168 Sort ZOJ7 水

    再水一发,舍友肿么还在睡T T. ---------------------------------舍友还在睡觉的分割线--------------------------------- http:/ ...

  9. 【topcoder SRM 702 DIV 2 250】TestTaking

    Problem Statement Recently, Alice had to take a test. The test consisted of a sequence of true/false ...

  10. php实现 删除字符串中出现次数最少的字符

    php实现  删除字符串中出现次数最少的字符 一.总结 一句话总结:数组排序是改变数组的,而其它函数一般不改变原数据,比如str_replace(); 1.单案例测试通过而多案例测试不通过怎么办? 检 ...