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 ...
随机推荐
- Hadoop YARN 调度器(scheduler) —— 资源调度策略
本文通过MetaWeblog自动发布,原文及更新链接:https://extendswind.top/posts/technical/hadoop_yarn_resource_scheduler 搜了 ...
- 【00NOIP提高组】单词接龙
#include<bits/stdc++.h> using namespace std; ; int n,length; int vis[N]; string str[N]; inline ...
- python smbus IOError: [Errno 2] No such file or directory
1.打开配置文件 sudo nano /boot/config.txt 打开以下选项 "dtparam=i2c_arm=on" ctrl + o 保存 ctrl + x 退出 2. ...
- Java核心复习—— 原子性、有序性与Happens-Before
一. 产生并发Bug的源头 可见性 缓存导致的可见性问题 原子性 线程切换带来的原子性问题 有序性 编译优化带来的有序性问题 上面讲到了 volatile 与可见性,本章再主要讲下原子性.有序性与Ha ...
- synchronized是什么,用法及原理
文章转Hollis博客 大家可以关注下,很多技术类型的文章 在再有人问你Java内存模型是什么,就把这篇文章发给他.中我们曾经介绍过,Java语言为了解决并发编程中存在的原子性.可见性和有序性问题,提 ...
- AWS 配置IPv6
- Vue学习手记01-安装和项目创建
1.安装Vue 注:node版本必须大于等于8.9 vue-cli3.x:npm install -g @vue/cli vue-cli2.x:npm install -g @vue/cli-i ...
- linux listen()
listen(等待连接) 相关函数 socket,bind,accept,connect表头文件 #include<sys/socket.h>定义函数 int listen(int s,i ...
- MySQL数据库可以用任意ip连接访问的方法
> use mysql; > update user set host='%' where host='localhost'; > flush privileges;
- 亚马逊AWS服务器CentOS/Linux系统Shell安装Nginx及配置自启动
领了一个亚马逊的1年免费服务器,今天尝试安装 Nginx 服务器,使用原生的 Shell 方法. 为了方便以后查看,就把过程记录一下. 注意:亚马逊(AWS)服务器默认只能用 user-ec2 账户进 ...