<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. 架构师养成记--26.vi/vim相关操作

    vi/vim命令模式插入模式 aio编辑模式 : aio就是vi/vim的插入模式命令    作用a         在光标后附加文本A         在本行末附加文本i         在光标钱插 ...

  2. 洛谷 P2014 选课(树形背包)

    洛谷 P2014 选课(树形背包) 思路 题面:洛谷 P2014 如题这种有依赖性的任务可以用一棵树表示,因为一个儿子要访问到就必须先访问到父亲.然后,本来本题所有树是森林(没有共同祖先),但是题中的 ...

  3. 关于开发环境无法运行applet

    测试一下IE java vm 如果没有正确显示出来,说明java vm插件没有装好: 我用Uninstalle 来清理注册表:重装jdk 1.6_45

  4. dede两个后台共用一个数据库会出现的问题

    共用数据库内容页图片问题 在include/extend.func.php里面加上 function replaceurl($newurl) { $newurl=str_replace('src=&q ...

  5. 【chrome】设置chrome允许WebGL从本地载入资源

    找到chrome安装路径,然后创建一个快捷方式,右击该快捷方式,在 目标 输入框中加上-allow-file-access-from-files(前面加个空格),通过该快捷方式打开chrome就可以通 ...

  6. html转图片,java库cssbox

    引入依赖包 <dependency> <groupId>net.sf.cssbox</groupId> <artifactId>cssbox</a ...

  7. WebDriver+TestNG的一个典型例子

    想让测试更加灵活,1. 可以配置使用任意支持的浏览器进行测试:2. 配置所有Google的URL:3. 配置搜索的关键字.修改后的代码: public class GoogleTest { WebDr ...

  8. First Android application

    In eclipse ADT : 1.创建一个新工程 File -> New -> Android Application Project 2.三个主要的文件 /src/MainActiv ...

  9. jsf和facelets的生命周期

    一.JSF生命周期 JSF是基于事件驱动.JSF生命周期分为两个主要阶段:执行阶段和渲染阶段. 1.执行阶段 分为六个阶段: 恢复视图阶段 当客户端请求一个JavaServer Faces页面时,Ja ...

  10. [C语言]日期间天数差值的计算

    刷一些算法题时总能遇到计算日期间天数的问题,每每遇到这种情况,不是打开excel就是用系统自带的计算器.私以为这种问题及其简单以至于不需要自己动脑子,只要会调用工具就好.直到近些天在写一个日历程序的时 ...