JS實現(xiàn)十字坐標跟隨鼠標效果
更新時間：2017年12月25日 11:08:57 投稿：laozhang
這篇文章給大家分享一下通過JS實現(xiàn)十字坐標跟隨鼠標效果的代碼，有需要的朋友參考學習下吧。
本次小編給大家?guī)硪粋€JS的效果，實現(xiàn)根據(jù)瀏覽器的窗口大小出現(xiàn)十字坐標并跟隨鼠標移動的效果，還可以計算出實時的坐標數(shù)值。
我們先來看一下運行后的效果圖：
以下是經(jīng)過小編測試后的全部代碼：
<!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="http://www.dhdzp.com/" target="_blank">腳本之家</a></p>
</body>
</html>
大家在測試的時候可以根據(jù)需求來調(diào)整JS里的代碼X表示橫坐標，Y表示縱坐標。
在學習的時候如果還有任何疑問可以在下方的留言區(qū)討論，感謝你對腳本之家的支持。
相關文章
JS操作Cookie，包含了寫入和讀取及讀取value的值，適合新手朋友，感興趣的朋友可以參考下2013-10-10
js open() 與showModalDialog()方法使用介紹
項目開發(fā)中經(jīng)常要用到js open() 與showModalDialog()方法，下面有個不錯的示例，喜歡的朋友可以研究下2013-09-09
js獲取指定日期前后的日期，在實際應用中還是比較實用的，下面為大家簡單介紹下具體的實現(xiàn)過程，有需要的朋友可以參考下2013-08-08
這是一個非常有趣的題目。我們先從Object.prototype.toString入手，看能否解決它。2010-02-02
下面小編就為大家?guī)硪黄约悍庋b的一個簡單的倒計時功能實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-11-11
這篇文章主要介紹了js如何找出兩個數(shù)組中不同的元素，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-12-12
這篇文章主要介紹了js判斷設備是否為PC并調(diào)整圖片大小,需要的朋友可以參考下2014-02-02
js 去掉空格實例 Trim() LTrim() RTrim()
js 去掉空格實例Trim(),LTrim(),RTrim() 需要的朋友可以過來參考下，希望對大家有所幫助2014-01-01
下面小編就為大家?guī)硪黄僯s的右下角彈窗實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-03-03
下面小編就為大家?guī)硪黄猨s刪除局部變量的實現(xiàn)方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-06-06