js模拟画笔效果

模拟画笔效果

var ballW = 10,ballH = 10;
document.onmousemove = function(evt){
var evt=evt?evt:window.event;
var posX=evt.clientX;
var posY=evt.clientY;
var newDiv=document.createElement("div");
document.body.appendChild(newDiv);
newDiv.style.width=ballW+"px";
newDiv.style.height=ballH+"px";
newDiv.style.backgroundColor="red";
newDiv.style.position="absolute";
newDiv.style.left=posX-(ballW/2)+"px";
newDiv.style.top=posY-(ballH/2)+"px";

}

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

(0)

相关推荐

  • js模拟画笔效果

    模拟画笔效果 var ballW = 10,ballH = 10; document.onmousemove = function(evt){ var evt=evt?evt:window.event; var posX=evt.clientX; var posY=evt.clientY; var newDiv=document.createElement("div"); document.body.appendChild(newDiv); newDiv.style.width=bal

  • JavaScript Drum Kit 指南(纯 JS 模拟敲鼓效果)

    核心代码: <script> function removeTransition(event) { if (event.propertyName !== 'transform') return; // 过滤其中一种事件 event.target.classList.remove('playing'); // 移除高亮的样式 } function playSound(event) { const audio = document.querySelector(`audio[data-key=&qu

  • JS模拟抽奖序效果实现代码

    JS模拟抽奖效果 .a1{ position:relative; font-family:Verdana; font-size:20px; color:#888888; } function lotto(){ if (!document.all&&!document.layers) return for (j=1; j  "+Nos+""); document.layers.layer1.document.close(); } T=setTimeout('lo

  • JS实现基于Sketch.js模拟成群游动的蝌蚪运动动画效果【附demo源码下载】

    本文实例讲述了JS实现基于Sketch.js模拟成群游动的蝌蚪运动动画效果.分享给大家供大家参考,具体如下: 基于Sketch.js,实现了物体触碰检测(蝌蚪会遇到障碍物以及聪明的躲避鼠标的点击),随机运动,聚集算法等. 已经具备了游戏的基本要素,扩展一下可以变成一个不错的 HTML5 游戏. 演示效果如下: 完整代码如下: <!DOCTYPE html> <html class=" -webkit- js flexbox canvas canvastext webgl no-

  • JS模拟键盘打字效果的方法

    本文实例讲述了JS模拟键盘打字效果的方法.分享给大家供大家参考.具体如下: 这里使用JS模拟实现软键盘及打字效果,点击软键盘年的字母键,文本框中即可显示文字,像是键盘打字的效果,美工不太好,没怎么美化,CSS高手可美化一下按钮,看上去还挺不错吧,我觉得. 先来看看运行效果图: 具体代码如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb23

  • JS模拟Dialog弹出浮动框效果代码

    本文实例讲述了JS模拟Dialog弹出浮动框效果代码.分享给大家供大家参考.具体如下: 这里演示JS模拟Dialog弹出浮动框,蓝色经典风格,可以创建一个新层,可设置弹出层的标题和内容,用它可实现一个登录框,或用在后台管理中. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-mn-dialog-float-dlg-style-demo/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML

  • JS模拟的腾讯微博app撕纸效果的实例代码

    腾讯微博app撕纸效果 body{margin:0;padding:0;font-size:14px;line-height:22px;} .content,content_mack{width:300px;height:400px;overflow:hidden;font-size:12px;line-height:20px;background:#f2eee3;cursor:pointer;} .content_mack{position:absolute;top:0px;left:0;}

  • JS模拟bootstrap下拉菜单效果实例

    本文实例讲述了JS模拟bootstrap下拉菜单效果.分享给大家供大家参考,具体如下: 模拟bootstrap下拉菜单 在工作中要切一个效果:点击导航栏,则出现下列菜单,但是当点击其他地方的时候,就隐藏子菜单,效果有点类似于bootstrap 的"下拉菜单" 由于bootstrap的子菜单的样式与设计不同,因此需要自己写一个类似的效果 当点击某个控件的时候,则显示出下拉菜单,但是,当点击空白的地方的时候怎么让其自动隐藏呢? 起初的想法,给body绑定一个onclick事件,当点击空白的

  • JS模拟酷狗音乐播放器收缩折叠关闭效果代码

    本文实例讲述了JS模拟酷狗音乐播放器收缩折叠关闭效果代码.分享给大家供大家参考,具体如下: 这是一款模拟酷狗音乐播放器的关闭特效,采用JavaScript实现,关闭的时候播放界面缩成一条线,然后消失,就像有些电视机突然停电的效果,很有意思的网页动画特效. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-kugou-music-player-style-demo/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3

  • JS模拟实现Select效果代码

    本文实例讲述了JS模拟实现Select效果代码.分享给大家供大家参考.具体如下: 这里模拟实现一个Select效果,其实这不是模拟,是自制Select,在JavaScript的配合下,运用CSS的UL/LI形成一个可下拉的列表,类似于下拉Select的效果,你可任意修改他们的颜色和内容之类的,用起来更方便了. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-mn-select-style-demo-codes/ 具体代码如下: <!DOCT

随机推荐