javascript实现的白板效果(可以直接在网页上写字)

 更新时间:2010年07月20日 01:11:45   作者:  
javascript动画系列之网页白板 javascript实现的白板(兼容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需再刷新一下页面才能执行]

出处:http://www.cnblogs.com/airy

相关文章

  • 果断收藏9个Javascript代码高亮脚本

    果断收藏9个Javascript代码高亮脚本

    这篇文章主要为大家分享了9个实用的Javascript代码高亮脚本,相信一定对大家的学习有所帮助,感兴趣的小伙伴们可以参考一下
    2016-01-01
  • 简单实现js上传文件功能

    简单实现js上传文件功能

    这篇文章主要教大家如何简单实现js上传文件功能,代码简单,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-08-08
  • JavaScript正则获取地址栏中参数的方法

    JavaScript正则获取地址栏中参数的方法

    这篇文章主要介绍了JavaScript正则获取地址栏中参数的方法,涉及javascript基于正则的字符串截取操作相关实现技巧,需要的朋友可以参考下
    2017-03-03
  • 11种JavaScript前端数据去重方式总结

    11种JavaScript前端数据去重方式总结

    这篇文章主要为大家总结了JavaScript去重的11种方式,各有优缺点,文中的示例代码讲解详细,具有一定的学习价值,需要的可以根据需求合理使用
    2023-06-06
  • javascript实现计时器的简单方法

    javascript实现计时器的简单方法

    这篇文章主要为大家详细介绍了javascript实现计时器的简单方法,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-02-02
  • 微信小程序个人中心的列表控件实现代码

    微信小程序个人中心的列表控件实现代码

    这篇文章主要介绍了微信小程序个人中心的列表控件实现代码,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-04-04
  • Web跨浏览器进程通信(Web跨域)

    Web跨浏览器进程通信(Web跨域)

    Web跨域已是老生常谈的话题,这次来尝试下跨域浏览器进程之间的通信 —— 这在过去基本依靠网络中转实现
    2013-04-04
  • JavaScript数据结构与算法之栈详解

    JavaScript数据结构与算法之栈详解

    这篇文章主要介绍了JavaScript数据结构与算法之栈详解,本文讲解了对栈的操作、对栈的实现实例等内容,需要的朋友可以参考下
    2015-03-03
  • js判断在哪个浏览器打开项目的方法

    js判断在哪个浏览器打开项目的方法

    这篇文章主要介绍了js判断在哪个浏览器打开项目的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-01-01
  • js实现网页版贪吃蛇游戏

    js实现网页版贪吃蛇游戏

    这篇文章主要为大家详细介绍了js实现网页版贪吃蛇游戏,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-02-02

最新评论