JS实现十字坐标跟随鼠标效果


Posted in Javascript onDecember 25, 2017

本次小编给大家带来一个JS的效果,实现根据浏览器的窗口大小出现十字坐标并跟随鼠标移动的效果,还可以计算出实时的坐标数值。

我们先来看一下运行后的效果图:

JS实现十字坐标跟随鼠标效果

以下是经过小编测试后的全部代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>鼠标跟随十字JS特效代码</title>
</head>
<body style="margin: 0;">
 <div id="html"></div>
 <script type="text/javascript">
 //
 var ox = document.createElement('div');
 var oy = document.createElement('div');
 ox.style.width = '100%';
 ox.style.height = '1px';
 ox.style.backgroundColor = '#ddd';
 ox.style.position = 'fixed';
 ox.style.left = 0;
 document.body.appendChild(ox);
 oy.style.height = '100%';
 oy.style.width = '1px';
 oy.style.backgroundColor = '#ddd';
 oy.style.position = 'fixed';
 oy.style.top = 0;
 document.body.appendChild(oy);
 document.onmousemove = function(e){
 var e = e || event;
 var x = e.pageX;
 var y = e.pageY;
 ox.style.top = y + 'px';
 oy.style.left = x + 'px';
 document.getElementById('html'). innerHTML = 'x : ' + x + '<br/>y : ' + y;
 };
 </script>
<p>更多代码请访问:<a href="https://3water.com/" target="_blank">三水点靠木</a></p>
</body>
</html>

大家在测试的时候可以根据需求来调整JS里的代码X表示横坐标,Y表示纵坐标。

在学习的时候如果还有任何疑问可以在下方的留言区讨论,感谢你对三水点靠木的支持。

Javascript 相关文章推荐
屏蔽F1~F12的快捷键的js函数
May 06 Javascript
Jquery实现带动画效果的经典二级导航菜单
Mar 22 Javascript
JS分页效果示例
Oct 11 Javascript
jQuery使用hide方法隐藏元素自身用法实例
Mar 30 Javascript
JavaScript每天必学之事件
Sep 18 Javascript
JS实现根据用户输入分钟进行倒计时功能
Nov 14 Javascript
基于百度地图api清除指定覆盖物(Overlay)的方法
Jan 26 Javascript
VUE 使用中踩过的坑
Feb 08 Javascript
JS实现的3des+base64加密解密算法完整示例
May 18 Javascript
微信小程序实现人脸识别
May 25 Javascript
vue swipe自定义组件实现轮播效果
Jul 03 Javascript
解决layui-open关闭自身窗口的问题
Sep 10 Javascript
jQuery EasyUI window窗口使用实例代码
Dec 25 #jQuery
JS中使用textPath实现线条上的文字
Dec 25 #Javascript
Angular4.0中引入laydate.js日期插件的方法教程
Dec 25 #Javascript
JS实现标签滚动切换效果
Dec 25 #Javascript
JS实现图片居中悬浮效果
Dec 25 #Javascript
JS+CSS实现滚动数字时钟效果
Dec 25 #Javascript
Vue.js通用应用框架-Nuxt.js的上手教程
Dec 25 #Javascript
You might like
php堆排序(heapsort)练习
2013/11/13 PHP
php开发中的页面跳转方法总结
2015/04/26 PHP
PHP文件管理之实现网盘及压缩包的功能操作
2017/09/20 PHP
PHP实现简易计算器功能
2020/08/28 PHP
表单项的name命名为submit、reset引起的问题
2007/12/22 Javascript
JQuery自适应IFrame高度(支持嵌套 兼容IE,ff,safafi,chrome)
2011/03/28 Javascript
js控制表单操作的常用代码小结
2013/08/15 Javascript
js获取当前月的第一天和最后一天的小例子
2013/11/18 Javascript
jquery使用append(content)方法注意事项分享
2014/01/06 Javascript
借助javascript代码判断网页是静态还是伪静态
2014/05/05 Javascript
Node.js实现在目录中查找某个字符串及所在文件
2014/09/03 Javascript
一款基jquery超炫的动画导航菜单可响应单击事件
2014/11/02 Javascript
JavaScript中消除闭包的一般方法介绍
2015/03/16 Javascript
JQuery遍历元素的后代和同胞实现方法
2016/09/18 Javascript
解决vue点击控制单个样式的问题
2018/09/05 Javascript
微信JS-SDK updateAppMessageShareData安卓不能自定义分享详解
2019/03/29 Javascript
ECharts地图绘制和钻取简易接口详解
2019/07/12 Javascript
Vue-drag-resize 拖拽缩放插件的使用(简单示例)
2019/12/04 Javascript
微信小程序 this.triggerEvent()的具体使用
2019/12/10 Javascript
JS实现网页端猜数字小游戏
2020/03/06 Javascript
[49:41]NB vs NAVI Supermajor小组赛A组 BO3 第一场 6.2
2018/06/03 DOTA
跟老齐学Python之画圈还不简单吗?
2014/09/20 Python
Python import用法以及与from...import的区别
2015/05/28 Python
在Python的Django框架中加载模版的方法
2015/07/16 Python
在MAC上搭建python数据分析开发环境
2016/01/26 Python
import的本质解析
2017/10/30 Python
css3 transform导致子元素固定定位变成绝对定位的方法
2020/03/06 HTML / CSS
英国在线房屋中介网站:Yopa
2018/01/09 全球购物
C++:局部变量能否和全局变量重名
2014/03/03 面试题
市场营销专业个人自荐信格式
2013/09/21 职场文书
网络工程专业毕业生推荐信
2013/10/28 职场文书
单位领导证婚词
2014/01/14 职场文书
初三学生评语大全
2014/04/24 职场文书
税务干部群众路线教育实践活动对照检查材料
2014/09/20 职场文书
小学五年级班主任工作经验交流材料
2015/11/02 职场文书
浅谈Python中的正则表达式
2021/06/28 Python