JS實現(xiàn)十字坐標跟隨鼠標效果-創(chuàng)新互聯(lián)

本次小編給大家?guī)硪粋€JS的效果，實現(xiàn)根據(jù)瀏覽器的窗口大小出現(xiàn)十字坐標并跟隨鼠標移動的效果，還可以計算出實時的坐標數(shù)值。

創(chuàng)新互聯(lián)于2013年成立，是專業(yè)互聯(lián)網(wǎng)技術服務公司，擁有項目成都網(wǎng)站制作、成都做網(wǎng)站網(wǎng)站策劃，項目實施與項目整合能力。我們以讓每一個夢想脫穎而出為使命，1280元南山做網(wǎng)站,已為上家服務,為南山各地企業(yè)和個人服務,聯(lián)系電話:13518219792

我們先來看一下運行后的效果圖：

JS實現(xiàn)十字坐標跟隨鼠標效果

以下是經(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 >
 <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  target="_blank">創(chuàng)新互聯(lián)成都網(wǎng)站設計公司</a></p>
</body>
</html>

另外有需要云服務器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務器、裸金屬服務器、高防服務器、香港服務器、美國服務器、虛擬主機、免備案服務器”等云主機租用服務以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應用場景需求。

標題名稱：JS實現(xiàn)十字坐標跟隨鼠標效果-創(chuàng)新互聯(lián)
標題網(wǎng)址：http://muchs.cn/article32/hcgpc.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供移動網(wǎng)站建設、自適應網(wǎng)站、定制網(wǎng)站、云服務器、響應式網(wǎng)站、標簽優(yōu)化

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)

商城網(wǎng)站建設