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 相关文章推荐
jquery模拟LCD 时钟的html文件源代码
Jun 16 Javascript
Vuejs第一篇之入门教程详解(单向绑定、双向绑定、列表渲染、响应函数)
Sep 09 Javascript
微信小程序 label 组件详解及简单实例
Jan 10 Javascript
浅谈JS验证表单文本域输入空格的问题
Feb 14 Javascript
原生js更改css样式的两种方式
Mar 15 Javascript
Angularjs的键盘事件的绑定
Jul 27 Javascript
AngularJS 中ui-view传参的实例详解
Aug 25 Javascript
微信小程序template模板实例详解
Oct 27 Javascript
vue拖拽组件使用方法详解
Dec 01 Javascript
微信小程序实现两个页面传值的方法分析
Dec 11 Javascript
微信小程序实现提交input信息到后台的方法示例
Jan 19 Javascript
JS中的一些常用的函数式编程术语
Jun 15 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入门学习知识点二 PHP简单的分页过程与原理
2011/07/14 PHP
Yii入门教程之目录结构、入口文件及路由设置
2014/11/25 PHP
PHP二维数组实现去除重复项的方法【保留各个键值】
2017/12/21 PHP
workerman结合laravel开发在线聊天应用的示例代码
2018/10/30 PHP
jquery遍历input取得input的name
2009/04/27 Javascript
js取值中form.all和不加all的区别介绍
2014/01/20 Javascript
动态添加删除表格行的js实现代码
2014/02/28 Javascript
在JS方法中返回多个值的方法汇总
2015/05/20 Javascript
全面解析Bootstrap布局组件应用
2016/02/22 Javascript
JS模态窗口返回值兼容问题的完美解决方法
2016/05/28 Javascript
javascript input输入框模糊提示功能的实现
2017/09/25 Javascript
浅析Vue自定义组件的v-model
2017/11/26 Javascript
网页爬虫之cookie自动获取及过期自动更新的实现方法
2018/03/06 Javascript
JS简单实现动态添加HTML标记的方法示例
2018/04/08 Javascript
详解vuex持久化插件解决浏览器刷新数据消失问题
2019/04/15 Javascript
vue实现鼠标移过出现下拉二级菜单功能
2019/12/12 Javascript
浅谈js中的attributes和Attribute的用法与区别
2020/07/16 Javascript
Vue props中Object和Array设置默认值操作
2020/07/30 Javascript
Vue v-for中的 input 或 select的值发生改变时触发事件操作
2020/08/31 Javascript
Python Web框架Pylons中使用MongoDB的例子
2013/12/03 Python
实例讲解Python中global语句下全局变量的值的修改
2016/06/16 Python
Python中扩展包的安装方法详解
2017/06/14 Python
Python正则表达式匹配和提取IP地址
2019/06/06 Python
Python3爬虫带上cookie的实例代码
2020/07/28 Python
Python字典取键、值对的方法步骤
2020/09/30 Python
利用Python实现字幕挂载(把字幕文件与视频合并)思路详解
2020/10/21 Python
C++和python实现阿姆斯特朗数字查找实例代码
2020/12/07 Python
Rhone官方网站:男士运动服装、健身服装和高级运动服
2019/05/01 全球购物
周仰杰(JIMMY CHOO)法国官方网站:闻名世界的鞋子品牌
2019/09/27 全球购物
农药学硕士毕业生自荐信
2013/09/25 职场文书
怎样写好自我鉴定
2013/12/04 职场文书
竞聘书模板
2014/03/31 职场文书
八项规定整改方案
2014/10/01 职场文书
学生穿着不得体检讨书
2014/10/12 职场文书
资料员岗位职责范本
2015/04/13 职场文书
超详细Python解释器新手安装教程
2021/05/10 Python