图片跟随鼠标移动（精简版跨浏览器实现）

网上看到许多让图片跟随鼠标移动，感觉代码很复杂，还不兼容，其实可以很简单的实现：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>图片跟随鼠标</title>
</head>
<body>
<script type="text/javascript">
    function doMouseMove(e) {
        var evt = e||window.event;
        var x = evt.clentX || evt.x;
        var y = evt.clentY || evt.y;
        layerName = ‘iit‘;
        var curElement=document.getElementById("myImg");
        curElement.style.left=x+"px";
        curElement.style.top=y+"px";
    }
    document.onmousemove = doMouseMove;
</script>
        <div ID="myDiv">
        <img id="myImg" src="img/a2.jpg" STYLE="position:absolute;TOP:0pt;LEFT:0pt;width=103;height=28;Z-INDEX:2;">
        </div>
</body>
</html>

目前document.layers已经作古，期盼document.all早日上西天！！

时间： 2024-08-29 14:15:44

图片跟随鼠标移动（精简版跨浏览器实现）的相关文章

jQuery实际案例⑥——图片跟随鼠标、五角星评分案例

一.图片跟随鼠标移动 1.要求:鼠标移动到哪,图片就要跟到哪 2.用到的事件:首先监听鼠标:$(document).mousemove(function(event){ }); //此时可以获取鼠标距离页面左侧.顶部的距离通过event.pageX.event.pageY,然后通过修改图片的left.top值即可. 二.五角星评分案例 1.如图:业务逻辑:①鼠标移入某颗星时,这颗及之前的都变实心:②未点击,移开评分区,所有星变空心:③点击,移开评分区,点击过的星及之前的变实心 2.用到的方法:e

图片跟随鼠标移动

关键点: 1.图片采用绝对定位 2.事件:mousemove 3.偏移距离 offset(), .offset().left | .offset().top $("#mem-box-mouse").css({ "left": pointX - $memBox.offset().left - 50,//图片跟随鼠标移动,判断图片在背景区域内的位置鼠标位置-背景框相对于页面的距离:mouseX - offset().left, "top":

Ant Design -- 图片可拖拽效果，图片跟随鼠标移动

Ant Design 图片可拖拽效果,图片跟随鼠标移动,需计算鼠标在图片中与图片左上角的X轴的距离和鼠标在图片中与图片左上角的Y轴的距离. constructor(props) { super(props); this.dragDrop = false; // 图片是否被拖动中 this.apartX = 0; // 鼠标在图片中与图片左上角的X轴的距离 this.apartY = 0; //鼠标在图片中与图片左上角的Y轴的距离 this.state = { value: 1, previewV

JavaScript图片跟着鼠标动最终版

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>title</title> <style> * { margin: 0; padding: 0; } body { height: 2000px; } img { position: absolute; } </style> <

精简版web浏览器

import javax.swing.JFrame; import javax.swing.JEditorPane; import javax.swing.event.HyperlinkListener; import java.beans.PropertyChangeListener; import javax.swing.event.HyperlinkEvent; import java.beans.PropertyChangeEvent; import javax.swing.JEdito

禁止使用鼠标左右键（跨浏览器实现）

1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=gb2312"&g

js图片跟随鼠标移动

<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" al

图片跟随鼠标

1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="utf-8"> 5 <style> 6 7 img{ 8 position: absolute; 9 } 10 </style> 11 </head> 12 <body> 13 <img src="img/ts.gif"

JS 图片跟随鼠标移动案例

css代码 1 img { 2 position: absolute; 3 /* top: 2px; */ 4 width: 50px; 5 height: 50px; 6 } HTML代码 <img src="../imges/u=3568135932,2181685849&fm=26&gp=0.jpg" alt=""> js代码 1 <script> 2 var pic = document.querySelector('