js图片跟随鼠标移动
<div id="wrapper"><img src="http://images.cnblogs.com/cnblogs_com/rain-null/1038612/o_33.jpg" alt="ss"/>
<img id="hh"src="http://images.cnblogs.com/cnblogs_com/rain-null/1038612/o_33.jpg" alt="ss"/>
</div> <style> div{width:500px;height:400px;margin:0 auto;border:1px solid red;position:relative}
img:nth-child(1){position:absolute;left:0;top:0;}
img:nth-child(2){position:absolute;width:300px;height:200px;display:none;}
</style> <script> document.images[0].onmousemove=function(){ var hh=document.getElementById("hh");
var x=event.offsetX;
var y=event.offsetY; hh.style.display="block";
hh.style.left=x+50+"px";
hh.style.top=50+y+"px";
};
document.images[0].onmouseout=function(){hh.style.display="none";}
</script>
js图片跟随鼠标移动的更多相关文章
- js 图片跟随鼠标移动效果 案例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- JS 图片跟随鼠标移动案例
css代码 img { position: absolute; /* top: 2px; */ width: 50px; height: 50px; } HTML代码 <img src=&quo ...
- jQuery实际案例⑥——图片跟随鼠标、五角星评分案例
一.图片跟随鼠标移动 1.要求:鼠标移动到哪,图片就要跟到哪 2.用到的事件:首先监听鼠标:$(document).mousemove(function(event){ }); //此时可以获取鼠标距 ...
- Ant Design -- 图片可拖拽效果,图片跟随鼠标移动
Ant Design 图片可拖拽效果,图片跟随鼠标移动,需计算鼠标在图片中与图片左上角的X轴的距离和鼠标在图片中与图片左上角的Y轴的距离. constructor(props) { super(pro ...
- JS实现图片跟随鼠标移动
在实现这个特效之前,需要了解JS中一个对象,event(事件对象),对,只需了解这一个对象.它的方法属性我不多说了,想详细了解的童鞋点击这里. 我们用到的只有这个对象的两个属性,clientX与cli ...
- Unity3D GUI中的图片跟随鼠标旋转脚本
var Mid : Texture2D; var mouse : Texture2D; //鼠标图片 var mousePs = Vector2.zero; //鼠标的位置 private var a ...
- jQuery 图片跟着鼠标动
html默认鼠标样式改成图片时格式为 .ani 图片跟随鼠标挪动 html <div id="mouseImg"> <img src="images/问 ...
- JS打造的跟随鼠标移动的酷炫拓扑图案
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 模仿bootstrap做的 js tooltip (添加鼠标跟随功能)
主要思路: 使用jquery hover方法,当进入时显示tooltip,移出时隐藏tooltip当设定为鼠标跟随时,使用mousemove事件显示tooltip根据tooltip显示位置设置,计算t ...
随机推荐
- 多线程atomicInteger
并发编程的3个重要概念 1.原子性: 一个操作或者多个操作,要么全部成功,要么全部失败 1.java中保证了基本数据类型的读取和赋值,保证了原子性,这些操作不可终端 a=10 原子性 b=a 不满足 ...
- Python PIL库学习笔记
1.PIL简介 Python Imaging Library(缩写为PIL)(在新的版本中被称为Pillow)是Python编程语言的开源库,它增加了对打开,操作和保存许多不同图像文件格式的支持.它适 ...
- springcloud(四)-Eureka Server集群
Eureka Server的高可用 这一节我们接着上一节说. 有分布式应用开发经验的朋友应该发现,前文编写的单节点Eureka Server并不适合线上生产环境.Eureka Client会定时连接E ...
- 安装CentOS 7.4时服务器出现No Caching mode page found问题的解决方法
2019-03-27 前提准备条件: 操作系统:centos 7.4:服务器使用U盘安装,U盘使用UltraISO制作启动盘 安装过程出现的问题: [sdb] No Caching mode page ...
- windows电脑配置
1.本地电脑通过修改hosts文件实现域名本地解析 以管理员身份打开记事本 并打开C:\Windows\System32\drivers\etc 路径下的hosts文件 在文件末尾添加如下
- jenkins配置构建执行状态
运行构建 在项目 左侧列表点击 “立即构建” ,在 “Build History” 列表中,会看到执行状态,蓝色圆点表示构建成功,红色圆点表示构建失败 点击 构建失败的任务(红色的小圆点).然后点击“ ...
- Linux 命令 su 和 sudo 比较
su : 可以用来切换到任何用户,但是要求输入目标用户的密码 比如:su - su - root (等价 su -) su - user su root 与 su - root 的区别在于,后者不切换 ...
- JavaScript数据结构-14.集合
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- Java面试题-Java容器
一.Java容器分类 Java容器划分为两个概念Collection.Map Collection: 一个独立元素的序列,这些元素都服从一条或多条规则.List必须按照插入的顺序保存元素,不关心是否重 ...
- ubuntu init启动流程
ubuntu的init方式有两种:一种是System V initialization,一种是Upstart.ubuntu6.10以前的版本是第一种方式,之后的版本是第二种方式. 在旧式的System ...