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

相关文章

  • JS获取对象属性API汇总枚举symbol

    JS获取对象属性API汇总枚举symbol

    这篇文章主要为大家介绍了JS获取对象属性API汇总可枚举性不可枚举性及symbol介绍,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-10-10
  • 详解JavaScript如何创建一个非自动播放的GIF网络组件

    详解JavaScript如何创建一个非自动播放的GIF网络组件

    这篇文章主要为大家介绍了如何利用JavaScript创建一个允许您的用户决定是否要播放gif的Web组件,文中的实现步骤讲解详细,需要的可以参考一下
    2022-02-02
  • js冒泡、捕获事件及阻止冒泡方法详细总结

    js冒泡、捕获事件及阻止冒泡方法详细总结

    javascript, jquery的事件中都存在事件冒泡和事件捕获的问题,针对这两个问题,本文给出详细的解决方法,需要的朋友不要错过
    2014-05-05
  • 微信小程序之 catalog 切换实现解析

    微信小程序之 catalog 切换实现解析

    这篇文章主要介绍了微信小程序之 catalog 切换实现解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-09-09
  • 浅析$.getJSON异步请求和同步请求

    浅析$.getJSON异步请求和同步请求

    下面小编就为大家带来一篇浅析$.getJSON异步请求和同步请求。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-06-06
  • 触屏中的JavaScript事件分析

    触屏中的JavaScript事件分析

    这篇文章主要介绍了触屏中的JavaScript事件,实例分析了触屏事件的种类、原理与相关使用技巧,需要的朋友可以参考下
    2015-02-02
  • Express与NodeJs创建服务器的两种方法

    Express与NodeJs创建服务器的两种方法

    本文主要介绍了NodeJs创建Web服务器;Express创建Web服务器的两种方法,具有一定的参考价值,下面跟着小编一起来看下吧
    2017-02-02
  • javascript的防抖节流函数解析

    javascript的防抖节流函数解析

    这篇文章主要为大家介绍了javascript防抖节流函数,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助
    2022-01-01
  • javascript 程序库的比较(一)之DOM功能

    javascript 程序库的比较(一)之DOM功能

    javascript 程序库的比较(一)之DOM功能
    2010-04-04
  • 深入理解jQuery()方法的构建原理

    深入理解jQuery()方法的构建原理

    对于JQuery,想必大家都很熟悉。目前,很多web项目,在实施的过程中,考虑到各浏览器原生JS API的兼容性,大都会选用JQuery或类似于JQuery这样的框架来进行网页效果开发。这篇文章将给大家深入介绍jQuery()方法的构建原理,有需要的朋友们可以参考借鉴。
    2016-12-12

最新评论