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需刷新才能执行]
相关推荐
-
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
随机推荐
- 利用CSS,链接下划线也玩自定义
- 详解AngularJs与SpringMVC简单结合使用
- easyui关于validatebox实现多重规则验证的方法(必看)
- .NET MVC中ViewData,ViewBag和TempData的区别浅析
- Struts2修改上传文件大小限制方法解析
- mysql 5.1版本修改密码及远程登录mysql数据库的方法
- Linux中使用mysqladmin extended-status配合Linux命令查看MySQL运行状态
- JS奇技之利用scroll来监听resize详解
- Yii PHP Framework实用入门教程(详细介绍)
- Javascript 区别浏览器 代码
- 提供个可以显示农历的VBS代码
- Python使用Scrapy爬取妹子图
- SQl Function 创建函数实例介绍
- 一个漂亮的下拉列表,去掉了灰色倒三角按钮
- 巧妙从进程中判断出病毒和木马的方法
- 正确认识宽带路由器的主要参数
- 如何实现网络分段
- vue中element组件样式修改无效的解决方法
- IntelliJ IDEA报错Error:java: Compilation failed: internal java compiler error的解决办法
- 微信小程序实现拖拽功能