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
随机推荐
- 基于Node.js实现nodemailer邮件发送
- django项目运行因中文而乱码报错的几种情况解决
- 基于Vue实现tab栏切换内容不断实时刷新数据功能
- socks5代理的使用以及ftp多线程下载的简易方法
- 超精准的iOS计步器实现代码
- JavaScript控制网页平滑滚动到指定元素位置的方法
- ASP.NET拒绝访问临时目录的解决方法
- PHP用身份证号获取星座和生肖的方法
- 正则表达式口诀 正则表达式学习工具
- Android Moveview滑屏移动视图类完整实例
- Shell下实现免密码快速登陆MySQL数据库的方法
- node.js中的fs.write方法使用说明
- php实现自动获取生成文章主题关键词功能的深入分析
- 各种语言、服务器301跳转代码全集
- JavaScript登录验证基础教程
- winsockfix网络协议修复工具
- PHP互换两个变量值的方法(不用第三变量)
- JavaScript语言核心数据类型和变量使用介绍
- vue构建单页面应用实战
- 微信小程序 石头剪刀布实例代码
