<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script type="text/javascript">
function MMove(){
var x=window.event.clientX;
var y=window.event.clientY;
var img=document.getElementById("img");
//alert(img.width);
// alert(img.style.top+"-"+img.style.left);
img.style.top=y+"px";
img.style.left=x+"px";
}
document.onmousemove=MMove;
</script>
</head>
<body>
<img src="image/pic.JPG" alt="" id="img" style="position:absolute;top:100px;left:100px;" />
</body>
</html>
以下是不正确的写法
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
img{
position:absolute;
top:100px;
left:100px;
}
</style>
<script type="text/javascript">
function MMove(){
var x=window.event.clientX;
var y=window.event.clientY;
var img=document.getElementById("img");
//alert(img.width);
// alert(img.style.top+"-"+img.style.left);
img.style.top=y+"px";
img.style.left=x+"px";
}
document.onmousemove=MMove;
</script>
</head>
<body>
<img src="image/pic.JPG" alt="" id="img" />
</body>
</html>
上面做法通不过，但是修改一下就OK
可以用class样式去定义，然后通过Dom方法获取
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
.img{
position:absolute;
top:100px;
left:100px;
}
</style>
<script type="text/javascript">
function MMove(){
var x=window.event.clientX;
var y=window.event.clientY;
var img=document.getElementsByClassName("img");
img[0].style.top=y+"px";
img[0].style.left=x+"px";//注意这里是img[0]代表是class=‘img’的第一张图片
}
document.onmousemove=MMove;
</script>
</head>
<body>
<img src="image/pic.JPG" alt="" class="img" />
</body>
</html>
分享到：
相关推荐
通过"JS基础知识学习笔记（传智）"这份资料，你可以系统地学习JavaScript的基础知识，并通过实践代码加深理解。随着对JavaScript掌握的深入，你将能够创建交互式的网页应用，为你的web前端开发之路打下坚实基础。
### 传智博客C语言学习笔记知识点概览 #### 数组的基本使用与概念 - **定义数组**: 在C语言中，数组是一种基本的数据结构，它允许程序员存储一系列相同类型的元素。例如，在`main0()`函数中，声明了一个整型数组`...
### 传智播客JPA学习笔记知识点梳理 #### 一、JPA概述与核心价值 - **定义**: JPA (Java Persistence API) 是由 Sun 官方提出的一种 Java 持久化标准，旨在为 Java 开发者提供一套统一的对象-关系映射 (ORM) 工具，...
传智博客的JAVA基础笔记个人总结是一份全面的学习资源，旨在帮助初学者或有一定基础的开发者巩固和提升Java编程技能。这份笔记是基于传智播客的课程内容，结合了牛牧老师和水镜老师的讲解精华，提供了27天的学习计划...
"传智播客JS笔记"提供了一套全面且易于理解的学习资源，特别适合初学者掌握JavaScript的基础和核心概念。以下是对笔记中可能包含的重要知识点的详细解释： 1. **变量与数据类型**：JavaScript 支持动态数据类型，这...
描述中提到的“杨中科.Net培训实况教学视频学习笔记”是指由讲师杨中科主讲的一系列.Net框架的培训课程。.Net是微软公司开发的一个全面的开发平台，用于构建各种类型的应用程序，包括Web、移动、桌面和云应用。...
3. **参数设置**：使用`PreparedStatement`设置SQL语句中的参数时，如果SQL中的条件经常变化，则可能导致代码的重复修改，降低了系统的可维护性。 ```java preparedStatement.setString(1, "王五"); ``` 4. **...
这份“传智的javaweb学习笔记”是针对这一领域的全面学习资料，主要包含了以下几个重要知识点： 1. **Servlet基础**：Servlet是JavaWeb的核心，用于处理HTTP请求。学习笔记可能详细解释了Servlet生命周期、如何创建...
【传智博客大数据三阶段笔记】是一份详细记录了大数据技术学习进程的资源集合，主要集中在第三阶段——实时处理。这份笔记涵盖了大数据领域的核心概念、工具和技术，旨在帮助读者深入理解并掌握大数据实时处理的各个...
"传智博客-学习iOS前言 PPT" 提供了一个全面的指南，帮助初学者构建扎实的基础。这份资料旨在讲解学习iOS开发之前需要掌握的基本概念和技术，从而为后续深入的学习铺平道路。 首先，iOS开发的核心语言是Swift，它是...
【传智博客 Android 学习项目】是一个专为Android开发者设计的学习资源集合，旨在帮助初学者和有经验的开发者深入理解和掌握Android应用开发的核心技术。这个项目可能包含了多个子项目、源代码示例、教程文档以及...
传智博客Spring框架2016版笔记资料 传智博客Spring框架2016版笔记资料 传智博客Spring框架2016版笔记资料 传智博客Spring框架2016版笔记资料 传智博客Spring框架2016版笔记资料
详细的描述了java的基本知识，配合看java视频更好了。 笔记中有集合，泛型，线程，的详细案例，还有java.net的资料
### 传智播客javascript韩顺平笔记解析 #### JavaScript基本概念 JavaScript是一种广泛应用于Web开发领域的脚本语言。作为一种脚本语言，JavaScript的特点在于它并非像Java等编译型语言那样需要预先编译成机器可...
这篇学习笔记系列结合了Java的基础知识和进阶概念，旨在帮助学习者系统地理解和掌握Java编程。 1. **Java基础** - **变量与数据类型**：Java中的基本数据类型包括整型（byte, short, int, long）、浮点型（float, ...
根据提供的信息来看，这份文档似乎是一份个人的学习笔记，主要关注的是与传智播客相关的IT技术内容。传智播客是一家知名的IT培训机构，提供多种IT领域的培训课程和技术资料，帮助学员掌握最新的技术和开发方法。下面...
【传智播客C++课程笔记】是一份来自国内知名计算机软件培训机构——传智播客的C++教学资源。这份笔记全面涵盖了C++语言的核心概念和技术，旨在帮助学习者深入理解并掌握C++编程，从而在实际开发中游刃有余。 C++是...
**Java Persistence API (JPA)** 是Java平台上的...以上就是JPA学习笔记中的关键知识点，涵盖了JPA的基本概念、环境配置、对象关系映射、查询语言、事务管理、关联关系等多个方面，对于理解和应用JPA有重要的指导作用。