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

 <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. swift基础--变量

    (1)变量与常量 (2)基本类型 (3)强制转换 (4)Bool类型 (5)元组 (6)可选值 //变量和常量 var str = "Hello, playground" let  ...

  2. 使用Docker解决同一服务器运行不同版本PHP方案。

    前言: 最近公司有两个站点,分别是两种系统进行二次开发,基于LNMP架构的网站.一般想PHP这种非编译型语言想要对外出售源码都会进行加密,加密方法有很多种,大部分都是使用Zend Guard来进行加密 ...

  3. button以回车方式提交

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. Educational Codeforces Round 5 B

    Problem B:http://codeforces.com/contest/616/problem/B B. Dinner with Emma 题意:一对夫妻要去餐厅吃晚饭,Emma 想去最豪华( ...

  5. js检测浏览器版本代码，兼容ie11

    原文:http://blog.csdn.net/tenkin/article/details/11640165 <script type="text/javascript"& ...

  6. 10 things you should know about NoSQL databases

    For a quarter of a century, the relational database (RDBMS) has been the dominant model for database ...

  7. [Gauss]HDOJ3364 Lanterns

    题意:有n个灯笼,m个开关 每个开关可以控制k个灯笼, 然后分别列出控制的灯笼的编号(灯笼编号为1到n) 下面有Q个询问,每个询问会有一个最终状态(n个灯笼为一个状态)0代表关 1代表开 问到达这种状 ...

  8. PHP开发工具介绍之zendStudio

    1．PHP开发工具介绍之zendStudio 下载:进入官网:http://www.zend.com/en/products/studio 选择下载安装 注意这里的工作空间要和你Apache的工作目录 ...

  9. 218. The Skyline Problem

    题目: A city's skyline is the outer contour of the silhouette formed by all the buildings in that city ...

  10. matlab 怎么保存plot的图 到指定文件夹

    %%使用print函数,第一个参数一定是figure的句柄,第二个参数设置格式,第三个参数是指定文件夹 %代码如下 h=figure; plot(1:10); print(h,'-djpeg','F: ...