js实现——鼠标移动时跟随着一连的小图片
首先放置一连的image
<body>
<div><img src="yezi.png" alt="tu"></div>
<div><img src="yezi.png" alt="tu"></div>
<div><img src="yezi.png" alt="tu"></div>
<div><img src="yezi.png" alt="tu"></div>
<div><img src="yezi.png" alt="tu"></div>
<div><img src="yezi.png" alt="tu"></div>
</body>
然后设置样式，主要是图片的大小
<style>
div {
position: absolute;
height: 20px;
width: 20px;
} img {
height: %;
width: %
}
</style>
最后就是实现行为
<script>
document.onmousemove = function (eve) {
var e = eve || window.event;
var adiv = document.getElementsByTagName("div");
//先把第一个div的位置拿到
adiv[0].style.top = e.clientY + "px";
adiv[0].style.left = e.clientX + "px";
//遍历剩下的div，让每个div的位置等于前一个div的位置，即可实现跟随行为
for (var i = adiv.length - 1; i > 0; i--) {
adiv[i].style.top = adiv[i - 1].style.top
adiv[i].style.left = adiv[i - 1].style.left
}
}
</script>
一个简单的小案例便完成了。效果图如下：
ps:div可以多给点，以防看不出效果
js实现——鼠标移动时跟随着一连的小图片的更多相关文章
- jquery.datetimepicker.js 当鼠标离开时，不选中当前时间，以达到清空的目的
validateOnBlur:true 当鼠标离开时,不选中当前时间,以达到清空的目的 使用方法: // 时间设置 $('#BankProduct_sale_begin'). ...
- 当鼠标聚焦时输入框变色（focus事件实例）
当鼠标聚焦时输入框变色css相关,鼠标点击<input>输入域后出现有颜色的边框原理:css伪类之input输入框鼠标点击边框变色效果伪类元素的使用::focus 一:当输入框获得焦点时, ...
- js(jquery)鼠标移入移出事件时，出现闪烁、隐藏显示隐藏显示不停切换的情况
<script> $(".guanzhu").hover(function(){ $(".weixinTop").show(); },functio ...
- jQuery的鼠标悬停时放大图片的效果
这是一个基于jQuery的效果,当鼠标在小图片上悬停时,会弹出一个大图,该大图会跟随鼠标的移动而移动.这个效果最初源于小敏同志的一个想法,刚开始做的时候只能实现弹出的图片是固定的,不能随鼠标移动,最后 ...
- JS监测鼠标指针位置
需求1:鼠标移入正方形的时候,蓝色小圆点跟随鼠标滚动(不许蓝色小圆点超出正方形区域),正方形里实时显示当前鼠标相对于body的坐标. <!DOCTYPE html> <html la ...
- 基于jQuery的鼠标悬停时放大图片的效果制作
这是一个基于jQuery的效果,当鼠标在小图片上悬停时,会弹出一个大图,该大图会跟随鼠标的移动而移动.这个效果最初源于小敏同志的一个想法,刚开始做的时候只能实现弹出的图片是固定的,不能随鼠标移动,最后 ...
- js设置鼠标悬停改变背景色
看了网上那么多的js鼠标悬停时事件,大多数的,说了那么多话,也没解决什么问题,现在直接贴上代码,以供参考 html: <div id="sign">this is te ...
- .net dataGridView当鼠标经过时当前行背景色变色；然后【给GridView增加单击行事件，并获取单击行的数据填充到页面中的控件中】
1.首先在前台dataGridview属性中增加onRowDataBound属性事件 2.然后在后台Observing_RowDataBound事件中增加代码 protected void Obser ...
- 024. asp.net中第一次使用GridView (设置鼠标经过时更换背景色)
1. 前端HTML代码 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Inde ...
随机推荐
- spring boot 集成RabbitMQ的异常
com.rabbitmq.client.ShutdownSignalException: channel error; protocol method: #method<channel.clos ...
- Mysql -- The used SELECT statements have a different number of columns
这是因为使用union的两个SQL语句产生的记录的表结构不一致. 必须是结构完全一致的记录集合才可以使用UNION. 以上就是两个表的字段不一样,导致,所以大家可以检查下. 可以 将 select * ...
- lintcode刷题笔记（一）
最近开始刷lintcode,记录下自己的答案,数字即为lintcode题目号,语言为python3,坚持日拱一卒吧... (一). 回文字符窜问题(Palindrome problem) 627. L ...
- madam、Linux LVM的使用
.RaidRAID(独立冗余磁盘阵列)概念:RAID技术通过把多个硬盘设备组合成一个容量更大.安全性更好的磁盘阵列,并把数据切割成多个区段后分别存放在各个不同的物理硬盘设备上,然后利用分散读写技术来提 ...
- Mybatis 中的转义字符（转帖）
下文来自:https://www.cnblogs.com/dato/p/7028723.html 在此感谢作者的辛勤付出. 记录以下mybatis中的转义字符,方便以后自己看一下 Mybatis转义 ...
- 使用Flask构建机器学习模型API
1. Python环境设置和Flask基础 使用"Anaconda"创建一个虚拟环境.如果你需要在Python中创建你的工作流程,并将依赖项分离出来,或者共享环境设置," ...
- [转][C#]Oracle 连接错误的解决
错误1: .NET连接oracle,提示错误OCIEnvCreate 失败,返回代码为 -1,但错误消息文本不可用 两个原因: 1. 权限,把 Oracle 所在目录权限设置成 authenticat ...
- vue 实现返回上一页不请求数据keep-alive
常规操作: 我们通常会将通过接口请求数据的方法放在==created== 或者 ==mounted==这两个生命周期中的一个里面调用. 但是我们知道,不管是我们刚进入这个页面还是从其他页面返回这个页面 ...
- VS2015编译gdal库
gdal下载地址:http://trac.osgeo.org/gdal/wiki/DownloadSource 修改nmake.opt中的一些配置.1. GDAL_HOME = “C:\warmerd ...
- 17flutter中的路由/命名路由/命名路由传值/无状态组件传值/有状态组件传值。
main.dart import 'package:flutter/material.dart'; import 'package:flutter_demo/pages/Search.dart'; i ...