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 ...
随机推荐
- Shiro + Redis集成思路
首先,确保Spring配置完毕了. 集成Shiro 1.在pom.xml中追加依赖 <dependency> <groupId>org.apache.shiro</gro ...
- spark错误记录总结
1.执行spark-submit时出错 执行任务如下: # ./spark-submit --class org.apache.spark.examples.SparkPi /hadoop/spark ...
- linux的free命令详解-内存是拿来用的不是拿来看的
$ free -m total used free shared buffers cached Mem: -/+ buffers/cache: Swap: 第一部分Mem行:total 内存总数: 1 ...
- Vue学习手记03-路由跳转与路由嵌套
1.路由跳转 添加一个LearnVue.vue文件, 在router->index.js中 引入import Learn from '@/components/LearnVue' 在touter ...
- php发现一个神奇的函数
echo strtr('aaddffvvbbcc','avc','242'); //22ddff44bb22 echo '<br>'; echo str_replace('ad',22,' ...
- 服务挂后Dump日志
JAVA_HOME=/usr/java OUTPUT_HOME=~/output DEPLOY_HOME=`dirname $0` HOST_NAME=`hostname` DUMP_PIDS=`ps ...
- Flutter移动电商实战 --（49）详细页_Stack制作底部工具栏
一直悬浮在最下面的 Stack层叠组件.里面用Row 可以横向布局 开始 stack如果想定位就要用position去定位. 修改return返回值的这个地方 大R刷新查看效果,可以看到固定的在左下角 ...
- vue 引入公共css文件
1.在入口js文件main.js中引入,一些公共的样式文件,可以在这里引入. import Vue from 'vue'import App from './App' // 引入App这个组件impo ...
- $createElement实现自定义弹窗
<el-button type="text" @click="open4">点击打开 Message Box</el-button> m ...
- new Handler()和new Handler(Looper.getMainLooper())的区别是什么？
new Handler()和new Handler(Looper.getMainLooper())的区别是什么? 一.Handler的一些知识,new Handler()和new Handle ...