javascript實現(xiàn)的白板效果(可以直接在網(wǎng)頁上寫字)
更新時間：2010年07月20日 01:11:45 作者：
javascript動畫系列之網(wǎng)頁白板 javascript實現(xiàn)的白板(兼容ff,ie,chrome,……)
復制代碼 代碼如下:
<script type="text/javascript">
var ball;
var mouseX = 100;
var mouseY = 100;
var angle = 0;
var radius = 0;
function draw(){
ball = document.createElement("span");
ball.style.position = "absolute";
ball.style.color = "#FF0000";
ball.style.zIndex = 999999999;
ball.innerHTML = "●";
document.body.appendChild(ball);
ball.style["left"] = mouseX+ "px";
ball.style["top"] = mouseY+ "px";
}
function MousePos(e)
{
e = e || window.event;
var x,y;
if(!document.all){
x = e.pageX;
y = e.pageY;
}
else{
x = event.clientX + document.documentElement.scrollLeft;
y = event.clientY + document.documentElement.scrollTop;
}
return {x:x,y:y};
}
function setXY(e)
{
e = e || window.event;
var pos = MousePos(e);
mouseX = pos.x;
mouseY = pos.y;
draw();
}
window.onload = function(){
document.documentElement.onmousemove = function(e){
e = e || window.event;
setXY(e);
};
}
</script>
效果演示代碼:
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
出處：http://www.cnblogs.com/airy
相關文章
這篇文章主要為大家分享了9個實用的Javascript代碼高亮腳本，相信一定對大家的學習有所幫助，感興趣的小伙伴們可以參考一下2016-01-01
這篇文章主要教大家如何簡單實現(xiàn)js上傳文件功能，代碼簡單，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-08-08
這篇文章主要介紹了JavaScript正則獲取地址欄中參數(shù)的方法,涉及javascript基于正則的字符串截取操作相關實現(xiàn)技巧,需要的朋友可以參考下2017-03-03
11種JavaScript前端數(shù)據(jù)去重方式總結
這篇文章主要為大家總結了JavaScript去重的11種方式，各有優(yōu)缺點，文中的示例代碼講解詳細，具有一定的學習價值，需要的可以根據(jù)需求合理使用2023-06-06
這篇文章主要為大家詳細介紹了javascript實現(xiàn)計時器的簡單方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-02-02
這篇文章主要介紹了微信小程序個人中心的列表控件實現(xiàn)代碼，本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-04-04
Web跨域已是老生常談的話題，這次來嘗試下跨域瀏覽器進程之間的通信 —— 這在過去基本依靠網(wǎng)絡中轉實現(xiàn)2013-04-04
JavaScript數(shù)據(jù)結構與算法之棧詳解
這篇文章主要介紹了JavaScript數(shù)據(jù)結構與算法之棧詳解,本文講解了對棧的操作、對棧的實現(xiàn)實例等內容,需要的朋友可以參考下2015-03-03
這篇文章主要介紹了js判斷在哪個瀏覽器打開項目的方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-01-01
這篇文章主要為大家詳細介紹了js實現(xiàn)網(wǎng)頁版貪吃蛇游戲，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-02-02