<!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. 【前端切图】用css画一个卡通形象-小猪佩奇

    最近在腾讯云技术社区遇到了一位奇才,用css画出了一个社会人小猪佩奇,不得不服.研究了一下他的文章https://segmentfault.com/a/1190000014909658,感觉甚是有趣, ...

  2. (最新)使用爬虫刷CSDN博客访问量——亲测有效

    说明:该篇博客是博主一字一码编写的,实属不易,请尊重原创,谢谢大家! 1.概述 前言:前两天刚写了第一篇博客https://blog.csdn.net/qq_41782425/article/deta ...

  3. js进阶 13-3 jquery动画显示隐藏，滑动，淡入淡出的本质是什么

    js进阶 13-3 jquery动画显示隐藏,滑动,淡入淡出的本质是什么 一.总结 一句话总结:分别改变display,高度,opacity透明度这三种属性. 1.fade系列函数有哪四个? fade ...

  4. 巴什博奕小结 HDU2188 HDU1846 HDU2149

    摘自百度百科: 巴什博奕(Bash Game):只有一堆n个物品,两个人轮流从这堆物品中取物,规定每次至少取一个,最多取m个.最后取光者得胜. 显然,如果n=m+1,那么由于一次最多只能取m个,所以, ...

  5. 用CSS实现阴阳八卦图等图形

    CSS还是比较强大的,可以实现中国古典的"阴阳八卦图"等形状. 正方形 #rectangle { width: 200px; height: 100px; backgrount-c ...

  6. 【z02】选择客栈

    (hotel.cpp/c/pas) [问题描述] 丽江河边有n 家很有特色的客栈,客栈按照其位置顺序从 1 到n 编号.每家客栈都按照 某一种色调进行装饰(总共 k 种,用整数 0 ~ k-1 表示) ...

  7. 使用boost::property_tree生成带attribute的xml

    曾经写过一篇"使用Boost property tree来解析带attribute的xml", 但是还有姐妹篇一直没贴.看看前一篇贴了都快都快3年了,时间过的真快. 这一小篇就算是 ...

  8. Android5.0(Lollipop) BLE蓝牙4.0+浅析demo连接（三）

    作者:Bgwan链接:https://zhuanlan.zhihu.com/p/23363591来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. Android5.0(L ...

  9. js进阶课程 12-9 jquery的事件对象event的方法有哪些？

    js进阶课程 12-9 jquery的事件对象event的方法有哪些? 一.总结 一句话总结:三组六个,阻止默认事件一组,阻止冒泡一组,阻止冒泡和剩余事件一组. 1.事件的默认动作指什么? 比如点a标 ...

  10. imresize() 函数——matlab

    功能:改变图像的大小. 用法:B = imresize(A,m)B = imresize(A,m,method)B = imresize(A,[mrows ncols],method) B = imr ...