废话不多说,直接上代码,有注释:

 <head>

     <title></title>

     <style type="text/css">

         span

         {

             position: absolute;/*给span才去绝对定位*/

         }

     </style>

     <script src="js/jquery-1.9.0.js" type="text/javascript"></script>

     <script type="text/javascript">

         $(function () {

             //为什么给document加鼠标移动事件而不是body呢,因为body相当于一div,是块级元素,他的大小根据内容的多少而定

             $(document).mousemove(function (e) {//给鼠标添加移动事件

                 //e.pageX 和 e.pageY就是获取鼠标的坐标,分别设置给span的left和top

                 $("#span1").css({ left: e.pageX, top: e.pageY });

             });

         });

     </script>

 </head>

 <body>

     <span id="span1">鼠标在这呢~~~</span>

 </body>

没什么特效,仅仅是跟着移动而已

js跟着鼠标移动的文字的更多相关文章

  1. js获取鼠标选中的文字

    1.获取选中的文字: document.selection.createRange().text; IE9以下使用 window.getSelection().toString(); 其他浏览器使用 ...

  2. js：鼠标移动到文字显示div，移出文字div显示，鼠标能移进div

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

  3. j-query应用---鼠标悬停不同文字显示不同背景图片banner动画

    源代码部分:注意事项:样式表的引用的路径要一致. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ...

  4. JS随鼠标坐标移动，显示浮动层内容

    在表单等项目中往往会遇到类似于“备注”.“说明”等100个字内的内容需要显示. 这些内容如果全部呈现开,会影响布局和美观,确又没有必要设计一个层或是一个页面. 那么,我们可以把这些内容放到浮动层中,鼠 ...

  5. JS Event 鼠标拖拽事件

    <!DOCTYPE html><html> <head>        <meta charset="UTF-8">         ...

  6. JS---案例：图标跟着鼠标飞(有bug)

    案例:图标跟着鼠标飞(有bug) <!DOCTYPE html> <html lang="en"> <head> <meta charse ...

  7. JS---案例：图片跟着鼠标飞的最终版本

    案例:图片跟着鼠标飞的最终版本 换了个好看的糖果照片,想给博客首页加上,但是加上后,应该是overwrite原来的html,所以光有鼠标跟着飞的效果,原来的功能都不能用了 放入common.js &l ...

  8. 修改js confirm alert 提示框文字的简单实例

    修改js confirm alert 提示框文字的简单实例: <!DOCTYPE html> <html> <head lang="en"> & ...

  9. 原生js获取鼠标坐标方法全面讲解-zmq

    原生js获取鼠标坐标方法全面讲解:clientX/Y,pageX/Y,offsetX/Y,layerX/Y,screenX/Y 一.关于js鼠标事件综合各大浏览器能获取到坐标的属性总共以下五种:eve ...

随机推荐

  1. Contest2037 - CSU Monthly 2013 Oct (problem B ：Scoop water)

    http://acm.csu.edu.cn/OnlineJudge/problem.php?cid=2037&pid=1 [题解]:卡特兰数取模 h(n) = h(n-1)*(4*n-2)/( ...

  2. maven 编译部署src/main/java下的资源文件

    maven 编译部署src/main/java下的资源文件 maven默认会把src/main/resources下的所有配置文件以及src/main/java下的所有java文件打包或发布到targ ...

  3. window live writer的曲折安装过程

           之前一直使用windows live writer2012写日志,由于之前重装了系统,所以需要重新安装writer,本以为是一个很简单的过程,你就是安装个软件吗.... 然而事实是... ...

  4. MVC4多语言IHttpModule实现

    最近项目需要多语言环境了. 由于项目页面较多,逐个Action去读取资源文件不大现实.就想到了使用 IHttpModule配合MVC的路由规则来实现. 首先创建以个mvc4的应用程序,添加资源文件夹( ...

  5. console中应用MFC类的方法

    1.添加#include <afx.h>或者<afxwin.h> 这时会报错1>c:\program files\microsoft visual studio 8\vc ...

  6. POJ3282+模拟

    模拟题 /* 模拟 注意:相同一边的车有先后顺序! */ #include<stdio.h> #include<string.h> #include<stdlib.h&g ...

  7. jmeter 测试java协议经验总结

    对java协议的良好支持,是jmeter比loadrunner优秀的地方,但是坑也不少,本文将相关点都整理下来备忘 一. 依赖的jar包 使用IDE开发jemter java协议脚本时,需要导入以下几 ...

  8. 【流媒體】live555—VS2008 下live555编译、使用及测试

    [流媒體]live555—VS22008 下live555编译.使用及测试 Ⅰ live555简介 Live555 是一个为流媒体提供解决方案的跨平台的C++开源项目,它实现了对标准流媒体传输协议如R ...

  9. Altium Designer13 如何导出Gerber文件

    参考<http://blog.sina.com.cn/s/blog_9b9a51990100zyyv.html> 版本:AD13.3.4 目的:Gerber文件导出备忘 目录: Step1 ...

  10. C#获取cpu序列号 硬盘ID 网卡硬地址以及操作注册表 .

    转:http://blog.csdn.net/smartsmile2012/article/details/8682295 #region 获取cpu序列号 硬盘ID 网卡硬地址 /**/ /// & ...