<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. Flowportal-BPM——环境配置

    环境配置: 一.控制面板→程序和功能→打开或不关闭Window功能→选择选项 二.控制面板→管理工具→Internet信息服务(IIS)管理器→左侧第一个→ISAPI和CGI限制→全部选为[允许] 三 ...

  2. SQL Server——存储过程(Stored Procedure)、事物、触发器

    存储过程(proc 或 procedure) 存储过程(Stored Procedure),计算机用语,是一组为了完成特定功能的SQL语句集,是利用SQL Server所提供的Transact-SQL ...

  3. 网络基础 02_TCP/IP模型

    1 TCP/IP参考模型概述   2 应用层 3 传输层 3.1 传输控制协议(TCP) 面向连接 可靠传输 流控及窗口机制 使用TCP的应用: Web浏览器:电子邮件: 文件传输程序 3.2 用户数 ...

  4. PHPStudy环境下搭建composer

    第一种方法(亲测有效) 1. 找到composer的安装目录:D:\phpstudy\PHPTutorial\tools\composer 2.把目录下的 composer.bat 和 compose ...

  5. laravel 表单接收

    POST方式接收 视图层 <form action="/submit" method="post"> {{csrf_field()}}    //必 ...

  6. shiro学习笔记_0400_自定义realm实现身份认证

     自定义Realm实现身份认证 先来看下Realm的类继承关系: Realm接口有三个方法,最重要的是第三个方法: a) String getName():返回此realm的名字 b) boolean ...

  7. 几种流行的开源WebService框架Axis1,Axis2,Xfire,CXF,JWS比较

    几种流行的开源WebService框架Axis1,Axis2,Xfire,CXF,JWS比较 来源   XFire VS Axis XFire是与Axis2 并列的新一代WebService平台.之所 ...

  8. ES6-Async & 异步

    依赖文件地址 :https://github.com/chanceLe/ES6-Basic-Syntax/tree/master/js <!DOCTYPE html> <html&g ...

  9. 解决图片浮动调节不了的问题(使用vertical-align属性)

    vertical-align: middle; vertical-align 属性设置元素的垂直对齐方式. baseline  默认.元素放置在父元素的基线上.sub 垂直对齐文本的下标.super ...

  10. Java PrepareStatement

    1.PreparedStatement是预编译的,对于批量处理可以大大提高效率. 也叫JDBC存储过程2.使用 Statement 对象.在对数据库只执行一次性存取的时侯,用 Statement 对象 ...