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 ...
随机推荐
- 在被open(url)打开的子页面往父页面传值时候这样
function fnqd(zj,rwmc){ window.parent.opener.document.getElementById("jcrwModel_sjrwzj").v ...
- 已安装gcc编译器,但./configure还是提示找不到编译器(分析)
1.编译nginx前, ./configure检查提示找不到C编译器 [root@test nginx-]# ./configure checking for OS + Linux -.el7.x86 ...
- 导入项目后,http://schemas.android.com/apk/res/android报错
1.复制出现红色字体的路径 2.File - Settings - Language & Frameworks - schemas and DtDs - 粘贴显红路径
- SpringBoot缓存技术
一.SpringBoot整合Ehhcache 添加maven依赖 <dependency> <groupId>org.springframework.boot</grou ...
- html,body设置{height:100%}[转]
一般情况下,我们css控制的最高节点就是body,例如设置: body{background:#069;} 则浏览器界面就是完全的#068的背景色.这里看上去是<body>标签下的背景色起 ...
- decimal赋值
decimal dRebate1 = new decimal(1);decimal dRebate2 = Convert.ToDecimal(1);decimal dRebate3 = 1M; htt ...
- mac kafka 环境搭建 以及PHP的kafka扩展
1.kafka安装 brew install kafka 安装会依赖zookeeper. 注意:安装目录:/usr/local/Cellar/kafka/0.10.2.0 2.安装的配置文件位置 /u ...
- Docs-.NET-C#-指南-语言参考-预处理器指令:#if 预处理指令
ylbtech-Docs-.NET-C#-指南-语言参考-预处理器指令:#if 预处理指令 1.返回顶部 1. #if(C# 参考) 2018/06/30 如果 C# 编译器遇到 #if 指令,最终是 ...
- C#-片段:外侧代码
ylbtech-C#-片段:外侧代码 1.返回顶部 ·#if #if true #endif ·#region #region MyRegion #endregion ·namespace names ...
- php实现手机定位功能的实例
最近在做通过定位手机用户,进行消息推送,经过分析最终做法如下 mobile.php文件 当用户当手机访问该页面时,通过实现页面表单隐藏封装自动提交获取手机浏览器经纬度并post给服务器 1 2 3 4 ...