<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. 【算法笔记】B1052 卖个萌

    题目链接:https://pintia.cn/problem-sets/994805260223102976/problems/994805273883951104 #include <math ...

  2. Android事件分发和消费机制(转载)

    原文链接:http://www.cnblogs.com/sunzn/archive/2013/05/10/3064129.html Android 中与 Touch 事件相关的方法包括:dispatc ...

  3. Mac 10.12安装XMind

    下载: (链接: https://pan.baidu.com/s/1i4FmspJ 密码: ydc2)

  4. 【转】Python格式化字符串str.format()

    原文地址:http://blog.xiayf.cn/2013/01/26/python-string-format/ 每次使用Python的格式字符串(string formatter),2.7及以上 ...

  5. 【MPI】执行mpiexec出错

    运行mpiexec提示mpiexec_mic: cannot connect to local mpd (/tmp/mpd2.console_jzhang); possible causes: 1. ...

  6. android 签名验证防止重打包

    网上资料很多,这里只做一个笔记反编译 dex 修改重新打包签名后 apk 的签名信息肯定会改变,所以可以在代码中判断签名信息是否被改变过,如果签名不一致就退出程序,以防止 apk 被重新打包. 1 j ...

  7. OpenJDK编译运行

    获取OpenJDK源码有两种方式,其中一种是通过Mercurial代码版本管理工具从Repository中直接取得源码(Repository地址:http://hg.openjdk.java.net/ ...

  8. R语言矩阵matrix函数

    矩阵是元素布置成二维矩形布局的R对象. 它们包含相同原子类型的元素.尽管我们可以创建只包含字符或只逻辑值的矩阵,但是它们没有多大用处.我们使用的是在数学计算中含有数字元素矩阵. 使用 matrix() ...

  9. 498_Diagonal-Traverse

    目录 498_Diagonal-Traverse Description Solution Java solution Python solution 1 Python solution 2 Pyth ...

  10. AngularJs ng-repeat重复项异常解决方案

    ng-repeat="v in arr track by $index" <!DOCTYPE html> <html lang="en"> ...