<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. 河内塔问题(C++版)

    上次,我们讲了汉诺塔,今天我们来讲一讲和汉诺塔类似的题目<河内塔问题> 题目描述 Description 一位法国数学家曾编写过一个印度的古老传说:在世界中心贝拿勒斯(在印度北部)的圣庙里 ...

  2. 问题 I: 闪闪发光

    [提交] [状态] [命题人:外部导入] 题目描述 一所位于云南昆明的中医药本科院校--云南中医学院. 因为报考某专业的人数骤减,正面临着停招的危机. 其中有九名少女想到一条妙计——成为偶像, 只要她 ...

  3. Maven 安装jar文件到本地repository

    Reference: https://maven.apache.org/general.html#importing-jars mvn install:install-file \ -Dfile=&l ...

  4. Mac下的SSH插件(默认自带)

    Mac下默认自带,直接通过终端输入ssh获取更多的参数帮助.

  5. 在linux上安装 sql server for linux

    在linux上安装 sql server for linux Install SQL Server on Red Hat Enterprise Linux Install SQL Server To ...

  6. value power two

    /** *topPower2 use to set unsigned int to power of two *@param value input value *@return return the ...

  7. 【Guava】PreConditions来校验参数

    前置条件:让方法调用的前置条件判断更简单. 在我们的日常开发中,经常要对入参进行一定的参数校验,比如是否为空,参数的取值范围是否符合要求等等.这种参数校验如果我们单独进行校验的话,代码的重复率比较高, ...

  8. 解决Ubuntu系统的每次开机重启后,resolv.conf清空的问题和DNS域名解析问题(图文详解)

    不多说,直接上干货! 问题情况描述如下: 普及知识:   /etc/resolv.conf ,其实是一个Link .它其实指向的是 /run/resolvconf/resolv.conf.  Ubun ...

  9. 《python灰帽子》学习笔记:调试器设置

    一.构造 C  数据类型 C Type | Python Type | ctypes Type ____________________________________________________ ...

  10. Lucio: We avoided Mourinho after every loss

    Former Inter defender Lucio has revealed how players had to avoid former Nerazzurri coach Mourinho e ...