知识点:
- CSS
position:absolute绝对定位,图片脱离文档流,可以自由设置 top、left。 mousemove鼠标移动事件,事件对象e的pageX、pageY获取鼠标在页面坐标。.css()方法动态修改元素样式。
原理:页面鼠标移动时,实时读取鼠标坐标,赋值给图片的left、top,图片跟随鼠标移动;减10px是为了让图片中心对齐鼠标光标。
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm32.aspx.cs" Inherits="WebApplication1.WebForm32" %>
<html xmlns="[http://www.w3.org/1999/xhtml](http://www.w3.org/1999/xhtml)">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script src="[http://libs.baidu.com/jquery/1.8.3/jquery.min.js](http://libs.baidu.com/jquery/1.8.3/jquery.min.js)"></script>
<style>
#icon {
position:absolute;
}
</style>
<script type="text/javascript">
$(function () {
$(document).mousemove(function (e) {
document.title = e.pageX + "," + e.pageY;
$("#icon").css("top", e.pageY - 10 + "px").css("left", e.pageX - 10 + "px");
});
});
</script>
</head>
<body>
<img src="[http://www.bamn.cn/favicon.ico](http://www.bamn.cn/favicon.ico)" id="icon" />
</body>
</html>
Code language: HTML, XML (xml)
说明:
- 鼠标在页面移动,标题实时显示鼠标坐标
- 图片实时更新位置,跟随光标移动
Previous: Jquery对事件的操作
Next: 练习-Tooltips效果