jQuery实现跟随鼠标运动图层效果的方法


Posted in Javascript onFebruary 02, 2015

本文实例讲述了jQuery实现跟随鼠标运动图层效果的方法。分享给大家供大家参考。具体分析如下:

一、基本目标

写一个跟随鼠标运动的图层,

图层中显示当前鼠标的位置,

如下图所示:

jQuery实现跟随鼠标运动图层效果的方法

此图层之所以使用jQuery,而不是因为javascript,是因为jQuery的代码其便于兼容当前的所有主流的浏览器,至少IE8是没有任何问题的,不用像javascript大段大段的代码都用到兼容性上面了。

二、制作过程

本次实验的核心是jquery里面的mousemove事件,

鼠标移动则触发。

代码如下:

<!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=utf-8" />  

<title>mouse</title>  

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

</head>  

  

<body>  

<!--允许此图层不按任何方式对齐,可以任何游离-->  

<div id="mousePosition" style="position:absolute;"></div>  

<script>  

/*一对e.pageX与e.pageY则可以取到鼠标当前的坐标,注意则最初的函数声明里面使用e形式参数*/  

$(document).mousemove(function (e) {  

    var x;  

    var y;  

    var xy="<br>x坐标:"+e.pageX+",y坐标:"+e.pageY;  

    x=e.pageX;  

    y=e.pageY;  

    document .getElementById("mousePosition").style.left = x + "px";  

    document .getElementById("mousePosition").style.top = y + "px";  

    $("#mousePosition").html(xy);  

})  

  

</script>  

</body>  

</html>

希望本文所述对大家的jQuery程序设计有所帮助。

Javascript 相关文章推荐
js+css实现导航效果实例
Feb 10 Javascript
jQuery检测鼠标左键和右键点击的方法
Mar 17 Javascript
jQuery实现宽屏图片轮播实例教程
Nov 24 Javascript
基于javascript实现图片切换效果
Apr 17 Javascript
js实现表单提交后不重新刷新当前页面
Nov 30 Javascript
JavaScript callback回调函数用法实例分析
May 08 Javascript
JS实现调用本地摄像头功能示例
May 18 Javascript
vue脚手架搭建项目的兼容性配置详解
Jul 17 Javascript
apicloud拉起小程序并传递参数的方法示例
Nov 21 Javascript
JS基于对象的链表实现与使用方法示例
Jan 31 Javascript
详谈vue中router-link和传统a链接的区别
Jul 22 Javascript
vue 组件之间事件触发($emit)与event Bus($on)的用法说明
Jul 28 Javascript
JavaScript针对网页节点的增删改查用法实例
Feb 02 #Javascript
jQuery通过控制节点实现仅在前台通过get方法完成参数传递
Feb 02 #Javascript
jQuery循环动画与获取组件尺寸的方法
Feb 02 #Javascript
基于jQuery实现最基本的淡入淡出效果实例
Feb 02 #Javascript
JavaScript对数字的判断与处理实例分析
Feb 02 #Javascript
JavaScript组件焦点与页内锚点间传值的方法
Feb 02 #Javascript
JavaScript分秒倒计时器实现方法
Feb 02 #Javascript
You might like
PHP生成静态页面详解
2006/11/19 PHP
一个简单的PHP投票程序源码
2007/03/11 PHP
黑夜路人出的几道php笔试题
2009/08/04 PHP
php获取url字符串截取路径的文件名和扩展名的函数
2010/01/22 PHP
浅析php数据类型转换
2014/01/09 PHP
Mac版PhpStorm之XAMPP整合apache服务器配置的图文教程详解
2016/10/13 PHP
CakePHP框架Model关联对象用法分析
2017/08/04 PHP
关于JavaScript中var声明变量作用域的推断
2010/12/16 Javascript
javascript中负数算术右移、逻辑右移的奥秘探索
2013/10/17 Javascript
jQuery中index()方法用法实例
2014/12/27 Javascript
使用MUI框架模拟手机端的下拉刷新和上拉加载功能
2017/09/04 Javascript
AngularJS使用ng-repeat遍历二维数组元素的方法详解
2017/11/11 Javascript
仿淘宝JSsearch搜索下拉深度用法
2018/01/15 Javascript
Vue 使用计时器实现跑马灯效果的实例代码
2019/07/11 Javascript
详解element-ui中表单验证的三种方式
2019/09/18 Javascript
[03:54]Ehome出征西雅图 回顾2016国际邀请赛晋级之路
2016/08/02 DOTA
Python中endswith()函数的基本使用
2015/04/07 Python
彻底搞懂Python字符编码
2018/01/23 Python
老生常谈python中的重载
2018/11/11 Python
详解django中url路由配置及渲染方式
2019/02/25 Python
Windows系统Python直接调用C++ DLL的方法
2019/08/01 Python
django基于restframework的CBV封装详解
2019/08/08 Python
Python散点图与折线图绘制过程解析
2019/11/30 Python
用python爬取历史天气数据的方法示例
2019/12/30 Python
如何用python批量调整视频声音
2020/12/22 Python
HTML5实现经典坦克大战坦克乱走还能发出一个子弹
2013/09/02 HTML / CSS
浅析HTML5中header标签的用法
2016/06/24 HTML / CSS
HTML文本属性&amp;颜色控制属性的实现
2019/12/17 HTML / CSS
DAWGS鞋官方网站:鞋,凉鞋,靴子
2016/10/04 全球购物
万户网络JAVA程序员岗位招聘笔试试卷
2013/01/08 面试题
高中毕业生个人自我鉴定
2013/11/24 职场文书
群众路线党课主持词
2014/04/01 职场文书
安全生产大检查方案
2014/05/07 职场文书
求职信的正确写法
2014/07/10 职场文书
Python手拉手教你爬取贝壳房源数据的实战教程
2021/05/21 Python
idea 在springboot中使用lombok插件的方法
2021/08/02 Java/Android