<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图片跟随鼠标移动的更多相关文章

  1. js 图片跟随鼠标移动效果 案例

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. JS 图片跟随鼠标移动案例

    css代码 img { position: absolute; /* top: 2px; */ width: 50px; height: 50px; } HTML代码 <img src=&quo ...

  3. jQuery实际案例⑥——图片跟随鼠标、五角星评分案例

    一.图片跟随鼠标移动 1.要求:鼠标移动到哪,图片就要跟到哪 2.用到的事件:首先监听鼠标:$(document).mousemove(function(event){ }); //此时可以获取鼠标距 ...

  4. Ant Design -- 图片可拖拽效果,图片跟随鼠标移动

    Ant Design 图片可拖拽效果,图片跟随鼠标移动,需计算鼠标在图片中与图片左上角的X轴的距离和鼠标在图片中与图片左上角的Y轴的距离. constructor(props) { super(pro ...

  5. JS实现图片跟随鼠标移动

    在实现这个特效之前,需要了解JS中一个对象,event(事件对象),对,只需了解这一个对象.它的方法属性我不多说了,想详细了解的童鞋点击这里. 我们用到的只有这个对象的两个属性,clientX与cli ...

  6. Unity3D GUI中的图片跟随鼠标旋转脚本

    var Mid : Texture2D; var mouse : Texture2D; //鼠标图片 var mousePs = Vector2.zero; //鼠标的位置 private var a ...

  7. jQuery 图片跟着鼠标动

    html默认鼠标样式改成图片时格式为 .ani 图片跟随鼠标挪动 html <div id="mouseImg"> <img src="images/问 ...

  8. JS打造的跟随鼠标移动的酷炫拓扑图案

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. 模仿bootstrap做的 js tooltip (添加鼠标跟随功能)

    主要思路: 使用jquery hover方法,当进入时显示tooltip,移出时隐藏tooltip当设定为鼠标跟随时,使用mousemove事件显示tooltip根据tooltip显示位置设置,计算t ...

随机推荐

  1. JMeter 源码二次开发函数示例

    JMeter 源码二次开发函数示例 一.JMeter 5.0 版本 实际测试中,依靠jmeter自带的函数已经无法满足我们需求,这个时候就需要二次开发.本次导入的是jmeter 5.0的源码进行实际的 ...

  2. nginx负载均衡之入门配置

    先来简单了解一下什么是负载均衡,单从字面上的意思来理解就可以解释N台服务器平均分担负载,不会因为某台服务器负载高宕机而某台服务器闲置的情况.那么负载均衡的前提就是要有多台服务器才能实现,也就是两台以上 ...

  3. 第一站:CLion安装教程与环境配置

    原文来自:http://www.sunmey.cn/thread-129-1-1.html 本人:找了很久才找到的CLion安装教程与环境配置,这里分享给大家~ 这里要说明的一点是CLion是要钱的, ...

  4. jpetStore 学习总结(2)

    在写jpetstore时,最难理解的应该是数据库还有每个表之间的关系了,我在这里对数据库简单的介绍. 以下是数据库的所有表:    account表是个人信息表,里面包括用户的名字,邮箱,地址,哪个城 ...

  5. 关于window.onload和body onload冲突的解决办法

    在学习用js在 页面中动态显示当前时间 和依次读取公告栏信息的 实验中 发现在将两个页面整合时 window.onload=function (){}和 <body onload="d ...

  6. docker仓库harbor镜像列表获取命令

    2019-03-14 搭建好docker仓库harbor之后,在服务器上获取harbor的所有镜像列表命令 curl -u "harbor账号:密码" -X GET -H &quo ...

  7. Linux系统编程:进程控制

    一.进程相关操作与编程对应函数 1.进程创建:两种方式来实现. ①fork:创建一个子进程,父子进程共享一份代码程序,但是各有一份独立的数据,为了效率和保持数据的独立采用写时复制技术(COW).运行无 ...

  8. vertical-aligin

    垂直对齐元素只应用于行内元素(图像.文本)和表单元素 垂直对齐文本会影响行高 默认值为baseline

  9. web端网页适配移动端注意事项,以及遇到的问题

    1.一定要加上 <!-- name=“viewport” 指视口 width=device-width 宽度等于视口宽 initial-scale=1.0 像素比例 maximum-scale= ...

  10. python笔记04-----字典、元组、集合操作

    1.字典 是一种key-value的数据类型,使用就像字典 无序的因为无下标 创建一个字典: info = {     'stu1':'qq',     'stu2':'ww',     'stu3' ...