鼠标事件的小案例

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
img{
position:absolute;
height: 50px;
width: 50px;;
}
</style>
</head>
<body style="background: cyan;">
<img src="img/star.png"/>
<img src="img/star.png"/>
<img src="img/star.png"/>
<img src="img/star.png"/>
<img src="img/star.png"/>
<img src="img/star.png"/>
<img src="img/star.png"/>
<img src="img/star.png"/>
<img src="img/star.png"/>
<img src="img/star.png"/>
<img src="img/star.png"/>
<img src="img/star.png"/>
<img src="img/star.png"/>
<img src="img/star.png"/>
<img src="img/star.png"/>
<img src="img/star.png"/>
<img src="img/star.png"/>
<img src="img/star.png"/>
<img src="img/star.png"/>
<img src="img/star.png"/>
<img src="img/star.png"/>
<img src="img/star.png"/>
<img src="img/star.png"/>
<img src="img/star.png"/>
<img src="img/star.png"/>
<img src="img/star.png"/>
<img src="img/star.png"/>
<img src="img/star.png"/>
<img src="img/star.png"/>
<img src="img/star.png"/>
<img src="img/star.png"/>
<img src="img/star.png"/>
<script>
//获得所有img对象数组
var imgs=document.getElementsByTagName("img");
//鼠标事件
document.onmousemove=function(event){
//实现兼容
var e=event||window.event
//获取鼠标距浏览器的位置
var cx=e.clientX;
var cy=e.clientY;
//把鼠标距浏览器的位置设置给第一张图片，以实现图片跟着鼠标的效果
imgs[0].style.top=cy+"px";
imgs[0].style.left=cx+"px";
//后面的图片基于第一张图片进行移动
for(i=imgs.length-1;i>0;i--){
imgs[i].style.top=imgs[i-1].style.top;
imgs[i].style.left=imgs[i-1].style.left;
}
}
</script>
</body>
</html>

时间： 2024-08-07 08:39:54

鼠标事件的小案例的相关文章

关于js中的事件委托小案例

需求:页面上有一个按钮,和一个空的ul,要求点击按钮,会给ul中动态添加li元素,然后,点击动态添加的元素,在控制台上输出,这是第几个元素 <ul> </ul> <button>点击增加</button> var ul = document.querySelector('ul'); var btn = document.querySelector('button'); //动态添加元素 btn.addEventListener('click',functio

react框架实现点击事件计数小案例

代码块: import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; // import App from './App'; import {BrowserRouter as Router,Route,Link} from 'react-router-dom' import { createStore } from 'redux' // import store from './store.

小案例带你揭秘JS事件

小案例带你揭秘JS事件 ### 什么是事件? 在js中一个事件的组成由那些呢? 谁触发事件:事件源 触发什么事件: 事件的类型 触发事件干什么事:事件处理函数 事件传播的过程 捕获阶段 就是从window事件处理函数开始,依次向内,只要事件目标的事件处理函数都会执行 执行顺序是从上到下的函数执行顺序 目标阶段 你触发在哪个元素上那么这个事件的目标源就是谁 冒泡阶段 从事件目标的时间处理函数开始,依次向外,知道window的事件处理函数触发 执行顺序是从内到外的 事件委托 就是我们把要做的事情委托

小程序 鼠标事件

微信小程序鼠标事件 事件分类 事件分为冒泡事件和非冒泡事件: 1. 冒泡事件(bind):当一个组件上的事件被触发后,该事件会向父节点传递. 2. 非冒泡事件(catch):当一个组件上的事件被触发后,该事件不会向父节点传递. bind事件绑定不会阻止冒泡事件向上冒泡,catch事件绑定可以阻止冒泡事件向上冒泡. WXML的冒泡事件列表 类型 触发条件 touchstart 手指触摸动作开始 touchmove 手指触摸后移动 touchcancel 手指触摸动作被打断,如来电提醒,弹窗 tou

javascript常用小案例

常用javascript小案例 样式调节 //注: 这个可以控制td中的字段成行显示 #modelInfos td,th { white-space: nowrap; } //文本输入框随着内容尺寸往下变大,在input框中加入这两个属性,然后就可以控制文本输入框的大小尺寸随着内容而变 onpropertychange="this.style.height=this.scrollHeight + 'px'" oninput="this.style.height=this.sc

Opencv下图像对鼠标事件的响应

直接上代码: //////////////////////////////////////////////////////////////////////// // // 该程序从文件中读入一幅图像,响应在图片上的左键右键消息 // 并显示点击图像的坐标,然后显示出来. // //////////////////////////////////////////////////////////////////////// #include <stdlib.h> #include <stdi

几个数据库的小案例（一）：将文本文件中的信息导入数据库的表中

从文本文件添加到数据库用户表的记录(有两个文件:frmMain.cs  SqlHelper.cs  ) //FrmMain.cs//作者:Meusing System; using System.Collections.Generic; using System.ComponentModel; using System.Data; using System.Drawing; using System.Linq; using System.Text; using System.Windows.Fo

几个数据库的小案例（二）：极其简单的省市联动

总用有两个文件(frmMain.cs SqlHelper.cs) //frmMain.cs//作者:Meusing System; using System.Collections.Generic; using System.ComponentModel; using System.Data; using System.Drawing; using System.Linq; using System.Text; using System.Windows.Forms; namespace 省市联动

JS小案例分析

a.微博输入删除小案例 <!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> * { margin: 0; padding: 0; } ul { list-style: none; } .box { width: 600px; margin: 100px auto; b