<!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. 各大免费邮箱邮件群发账户SMTP服务器配置及SMTP发送量限制情况

    网络产品推广和新闻消息推送时,经常用到的工具就是用客户邮箱发送邮件了,如果是要发送的邮件量非常大的话,一般的建议是搭建自己的邮局服务器,或者是花钱购买专业的邮件群发服务,免费邮箱的SMTP适合少量的邮 ...

  2. HDU 2577 How to Type (线性dp)

    How to Type Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Tota ...

  3. vue项目在其他电脑运行报错

    解决方法1.先删除node_modules文件夹2.$ cnpm cache clean 命令清除掉cache缓存3.cnpm install4.npm run dev

  4. VS无法访问IIS元数据库 您没有足够的特权访问计算机上的IIS网站

    进入windows\regedit.exe下的HKEY_CRRENT_USER\Software\Microsoft\Windows\CurrentVersion\Exploer\User Shell ...

  5. 26、驱动调试之根据oops信息和堆栈确定出错的代码

    a.驱动作为模块:1. 根据pc值确定该指令属于内核还是外加的模块pc=0xbf000018 它属于什么的地址?是内核还是通过insmod加载的驱动程序?先判断是否属于内核的地址: 看System.m ...

  6. S​D​I​与​A​S​I 接口具体解释介绍

    分量编码 在对彩色电视信号进行数字化处理和传输是.一种经常使用的方式是分别对其3个分量(Y,R-Y.B-Y)进行数字化编码.这就是分量分量编码.另外还有全信号编码,全信号编码是对彩色全电视信号直接进行 ...

  7. php 文件夹是否存在,不存在就创建

    $lujing = "./nihao/wohao"; if(!is_dir($liujing)){ mkdir(iconv("UTF-8", "GBK ...

  8. 9个完整android开源app项目

    一.photoup 介绍: photoup 是一款开源的相册类app,主要功能是将本地图片提交到facebook上去,虽然他的功能和facebook的远程服务相关,但是本身是可以被当作一款 相册应用的 ...

  9. sigmoid function vs softmax function

    DIFFERENCE BETWEEN SOFTMAX FUNCTION AND SIGMOID FUNCTION 二者主要的区别见于, softmax 用于多分类,sigmoid 则主要用于二分类: ...

  10. deep learning实践经验总结

    近期拿caffe来做图片分类.遇到不少问题,同一时候也吸取不少教训和获得不少经验. 先看样例再总结经验. 这是一个2类分类器.分的是条纹衣服和纯色衣服. 先看几张图片. 条纹衣服:   纯色衣服: w ...