js之鼠标随动后面跟随事件(类似于长龙跟着跑)
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
<style>
div{width: 10px;height: 20px;background-color: red;position: absolute;} </style>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div> </body> <script type="text/javascript">
function getPos(ev){
var scrollTop=document.documentElement.scrollTop || document.body.scrollTop;
var scrollLeft=document.documentElement.scrollLeft || document.body.scrollLeft;
return {x:ev.clientX+scrollLeft,y:ev.clientY+scrollTop }
} document.onmousemove=function(ev){
var oDiv=document.getElementsByTagName('div');
var oEvent=ev || event;
var pos=getPos(oEvent); for(var i=oDiv.length-1;i>0;i--){
oDiv[i].style.left=oDiv[i-1].offsetLeft+'px';
oDiv[i].style.top=oDiv[i-1].offsetTop+'px';
}
oDiv[0].style.left=pos.x+'px';
oDiv[0].style.top=pos.y+'px';
} </script> </html>
js之鼠标随动后面跟随事件(类似于长龙跟着跑)的更多相关文章
- 用js捕捉鼠标连续点击三次事件怎么实现啊
var count = 0, timer; document.onclick = function(){ if(count < 2){ if(timer){ clearTimeout(timer ...
- JS Event 鼠标拖拽事件
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> ...
- js进阶 12-3 如何实现元素跟随鼠标移动
js进阶 12-3 如何实现元素跟随鼠标移动 一.总结 一句话总结:获取鼠标位置,将鼠标位置设置为元素偏移即可. 1.用什么事件获取鼠标位置? 用mousemove可以获取鼠标移动的时候的位置 $(d ...
- js中鼠标滚轮事件详解
js中鼠标滚轮事件详解 (以下内容部分内容参考了http://adomas.org/javascript-mouse-wheel/ ) 之前js 仿Photoshop鼠标滚轮控制输入框取值中已使用 ...
- 61.H5---利用canvas+原生js进行鼠标跟随绘图
<!doctype html><html lang="en"><head> <meta charset="UTF-8" ...
- js(jquery)鼠标移入移出事件时,出现闪烁、隐藏显示隐藏显示不停切换的情况
<script> $(".guanzhu").hover(function(){ $(".weixinTop").show(); },functio ...
- js中点回车enter触发事件&layui弹窗按enter键不停弹窗问题的解决&js实现鼠标焦点自动落到文本框(layui)
js中回车触发事件 一. document.onkeydown = function (e) { // 回车提交表单 // 兼容FF和IE和Opera var theEvent = window.e ...
- js中鼠标点击、移动和光标移动的事件触发
事件有三要素:事件源.事件数据.事件处理程序 事件冒泡:当元素嵌套的时候,内部元素激发某个事件后,默认情况下外部元素相应的事件也会跟着依次触发 可以加return false;是阻止默认操作 oncl ...
- js设置鼠标悬停改变背景色
看了网上那么多的js鼠标悬停时事件,大多数的,说了那么多话,也没解决什么问题,现在直接贴上代码,以供参考 html: <div id="sign">this is te ...
随机推荐
- java springboot activemq 邮件短信微服务,解决国际化服务的国内外兼容性问题,含各服务商调研情况
java springboot activemq 邮件短信微服务,解决国际化服务的国内外兼容性问题,含各服务商调研情况 邮件短信微服务 spring boot 微服务 接收json格式参数 验证参数合 ...
- ESB(Enterprise Service Bus)企业服务总线介绍
ESB(Enterprise Service Bus)企业服务总线介绍 ESB全称为Enterprise Service Bus,即企业服务总线.它是传统中间件技术与XML.Web服务等技术结合的产物 ...
- web前端利用leaflet生成粒子风场,类似windy
wind.js如下: $(function() { var dixing = L.tileLayer.chinaProvider('Google.Satellite.Map', { maxZoom: ...
- 教你如何修改CentOS系统上的时间
直接看命令:
- ID3和C4.5分类决策树算法 - 数据挖掘算法(7)
(2017-05-18 银河统计) 决策树(Decision Tree)是在已知各种情况发生概率的基础上,通过构成决策树来判断其可行性的决策分析方法,是直观运用概率分析的一种图解法.由于这种决策分支画 ...
- Android屏幕适配全攻略(最权威的官方适配指导)
摘自:http://www.cocoachina.com/android/20151030/13971.html Android屏幕适配出现的原因 在我们学习如何进行屏幕适配之前,我们需要先了解下为什 ...
- Kattis之旅——Prime Path
The ministers of the cabinet were quite upset by the message from the Chief of Security stating that ...
- Prometheus监控学习笔记之360基于Prometheus的在线服务监控实践
0x00 初衷 最近参与的几个项目,无一例外对监控都有极强的要求,需要对项目中各组件进行详细监控,如服务端API的请求次数.响应时间.到达率.接口错误率.分布式存储中的集群IOPS.节点在线情况.偏移 ...
- 探索RequestBody报com.alibaba.fastjson.JSONObject cannot be cast to xxx
今天使用RequestBody接受前端传过来的参数,以前接受字符串数组非常成功,这次把形参改成了List<User>,原本以为顺利接受参数并映射成User的list结构,结果竟然在我取us ...
- Linux 安装本地 yum源
放入Centos6.4的镜像光盘或找到镜像文件 [root]#mount /dev/cdrom /media/cdrom #挂载本地镜像 [root]#rm -rf /etc/yum.repo.d ...