JS實(shí)現(xiàn)十字坐標(biāo)跟隨鼠標(biāo)效果
更新時(shí)間：2017年12月25日 11:08:57 投稿：laozhang
這篇文章給大家分享一下通過JS實(shí)現(xiàn)十字坐標(biāo)跟隨鼠標(biāo)效果的代碼，有需要的朋友參考學(xué)習(xí)下吧。
本次小編給大家?guī)硪粋€(gè)JS的效果，實(shí)現(xiàn)根據(jù)瀏覽器的窗口大小出現(xiàn)十字坐標(biāo)并跟隨鼠標(biāo)移動(dòng)的效果，還可以計(jì)算出實(shí)時(shí)的坐標(biāo)數(shù)值。
我們先來看一下運(yùn)行后的效果圖：
以下是經(jīng)過小編測(cè)試后的全部代碼：
<!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>鼠標(biāo)跟隨十字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>更多代碼請(qǐng)?jiān)L問：<a href="http://chabaoo.cn/" target="_blank">腳本之家</a></p>
</body>
</html>
大家在測(cè)試的時(shí)候可以根據(jù)需求來調(diào)整JS里的代碼X表示橫坐標(biāo)，Y表示縱坐標(biāo)。
在學(xué)習(xí)的時(shí)候如果還有任何疑問可以在下方的留言區(qū)討論，感謝你對(duì)腳本之家的支持。
相關(guān)文章
js 回車提交一些新手朋友還是比較陌生的，本文介紹兩種實(shí)現(xiàn)方法:jQuery方法、JavaScript方法,感興趣的朋友可以研究下2012-12-12
這篇文章主要介紹了在一般處理程序（ashx）中彈出js提示語的相關(guān)資料,需要的朋友可以參考下2017-08-08
這篇文章主要介紹了js實(shí)現(xiàn)純前端的圖片預(yù)覽的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-04-04
這篇文章主要為大家詳細(xì)介紹了原生js實(shí)現(xiàn)圖片層疊輪播切換效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-02-02
這篇文章主要給大家介紹了關(guān)于微信小程序npm引入vant-weapp的踩坑記錄，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用微信小程序具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08
javascript實(shí)現(xiàn)字符串反轉(zhuǎn)的方法
這篇文章主要介紹了javascript實(shí)現(xiàn)字符串反轉(zhuǎn)的方法,實(shí)例分析了javascript實(shí)現(xiàn)字符串反轉(zhuǎn)的技巧,需要的朋友可以參考下2015-02-02
本文將通過實(shí)例為大家詳細(xì)介紹JavaScript中的數(shù)組的所有方法。文中的示例代碼講解詳細(xì)，對(duì)我們深入了解JavaScript數(shù)組有一定的幫助，需要的可以參考一下2021-12-12
js實(shí)現(xiàn)的類marquee水平循環(huán)滾動(dòng)
marquee （水平）循環(huán)滾動(dòng)的js實(shí)現(xiàn) ,需要的朋友可以參考下。2010-03-03
在本文中，我們將創(chuàng)建自定義函數(shù)，借助不同示例的默認(rèn)字符串方法，在我們想要的任何位置替換或更改字符串中的字符，本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友參考下吧2023-07-07
一個(gè)不錯(cuò)的用JavaScript實(shí)現(xiàn)的UBB編碼函數(shù)
一個(gè)不錯(cuò)的用JavaScript實(shí)現(xiàn)的UBB編碼函數(shù)...2007-03-03