<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. ADC新库

    1.单次采集模式 1.在STM32CUBMX中设置为单次采集模式 2.在C文件中用HAL_ADC_START()函数启动ADC 3.用HAL_ADC_PollForConversion()延时等待采集 ...

  2. hiho#1445 重复旋律5 求子串数量 后缀自动机

    题目传送门 题意:给出一个字符串,求子串的个数. 思路:后缀自动机的题真是每做一题就更理解一些. SAM中的每一状态$p$都代表了一种子串,而p包含的字符串的个数是$len[p]-len[fa[p]] ...

  3. ajax防止表单自动提交

    重写表单的checkForm方法,并用if和else解决异步判断的问题. function checkForm(){ 1 var flag = false; $.ajaxSetup({async : ...

  4. 没事用html5 canvas画一个仪表盘自用,自适应的哦

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

  5. (Android 即时通讯) [悬赏],无论是谁发现一个漏洞奖励人民币1000元!

    悬赏,无论是谁发现一个漏洞奖励人民币1000元!   3Q Android 手机版即时通讯系统正式推出,可与电脑版 地灵(http://im.yunxunmi.com) 即时通讯系统互通!  适用于: ...

  6. Ubuntu 16.04 RTL8111/8168/8411 PCI Express Gigabit Ethernet Controller” 不能上网

    来源:http://forum.ubuntu.org.cn/viewtopic.php?f=116&t=463646 1.执行如下命令 uname -a sudo lspci -knn sud ...

  7. 关于delete和对象复制

    本码农的惯例,开篇废话几句... 前天小生又被虐了... 没办法,作为一个资深code user,我用代码的能力,解决问题的能力自问是不弱的... 但是自身的前端基础说实话还是不过硬,最明显的表现就是 ...

  8. WPF获取程序版本号(Version)的方法

    1.第一种:通过System来获取 public static Version GetEdition() { return System.Reflection.Assembly.GetExecutin ...

  9. 我爱Markdown (3)

    继续Markdown的常见语法, 本文将介绍: 07 - Links 链接 08 - Images 图片 09 - Blockquotes 块引用 10 - Backslash Escapes 显示保 ...

  10. mysql中sql中的注释

    学习mysql好久了,oracle也是,但是经常使用oracle,有一天突然想,oracle的sql语法中有注释,那么mysql中是不是也有注释,于是从网上搜了一下,原来mysql中的注释还真不少,下 ...