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 相关文章推荐
让js弹出窗口居前显示的实现方法
Jul 10 Javascript
javascript制作的简单注册模块表单验证
Apr 13 Javascript
JavaScript判断手机号运营商是移动、联通、电信还是其他(代码简单)
Sep 25 Javascript
基于jquery实现的仿优酷图片轮播特效代码
Jan 13 Javascript
Bootstrap3制作搜索框样式的方法
Jul 11 Javascript
JavaScript数组去重由慢到快由繁到简(优化篇)
Aug 26 Javascript
详解Vue2.0之去掉组件click事件的native修饰
Apr 20 Javascript
angular2路由切换改变页面title的示例代码
Aug 23 Javascript
基于Bootstrap实现城市三级联动
Nov 23 Javascript
使用vue如何构建一个自动建站项目
Feb 05 Javascript
小程序富文本提取图片可放大缩小
May 26 Javascript
如何在JavaScript中正确处理变量
Dec 25 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
用cookies来跟踪识别用户
2006/10/09 PHP
PHP autoload与spl_autoload自动加载机制的深入理解
2013/06/05 PHP
PHP生成短网址的3种方法代码实例
2014/07/08 PHP
PHP在线书签系统分享
2016/01/04 PHP
ThinkPHP实现图片上传操作的方法详解
2017/05/08 PHP
PHP数据分析引擎计算余弦相似度算法示例
2017/08/08 PHP
php7 图形用户界面GUI 开发示例
2020/02/22 PHP
js 分栏效果实现代码
2009/08/29 Javascript
javascript 获取所有id中包含某关键字的控件的实现代码
2010/11/25 Javascript
兼容IE和Firefox的javascript获取iframe文档内容的函数
2011/08/15 Javascript
jQuery循环滚动展示代码 可应用到文字和图片上
2012/05/11 Javascript
JS中 用户登录系统的解决办法
2013/04/15 Javascript
JS+CSS设置img在DIV中只显示Img垂直居中的部分
2013/10/24 Javascript
nodejs npm install全局安装和本地安装的区别
2014/06/05 NodeJs
Node.js开发之访问Redis数据库教程
2015/01/14 Javascript
jQuery()方法的第二个参数详解
2015/04/29 Javascript
浅谈javascript中return语句
2015/07/15 Javascript
HTML页面定时跳转方法解析(2种任选)
2016/12/22 Javascript
jquery 一键复制到剪切板的实例
2017/09/20 jQuery
js利用iframe实现选项卡效果
2020/08/09 Javascript
python批量同步web服务器代码核心程序
2014/09/01 Python
python中将函数赋值给变量时需要注意的一些问题
2017/08/18 Python
pandas对指定列进行填充的方法
2018/04/11 Python
Python中list循环遍历删除数据的正确方法
2019/09/02 Python
香港礼品网站:GiftU eshop
2017/09/01 全球购物
意大利文具和办公产品在线商店:Y-Office
2020/02/27 全球购物
班组安全员工作职责
2014/02/01 职场文书
元旦活动感言
2014/03/08 职场文书
行政办公室岗位职责
2014/03/18 职场文书
承诺书的格式范文
2014/03/28 职场文书
新闻人物通讯稿
2014/10/09 职场文书
长城英文导游词
2015/01/30 职场文书
党员年终个人总结
2015/02/14 职场文书
校园广播稿范文
2015/08/19 职场文书
你为什么是穷人?可能是这5个缺点造成
2019/07/11 职场文书
PHP面试题 wakeup魔法 Ezpop pop序列化与反序列化
2022/04/11 PHP