javascript实现很浪漫的气泡冒出特效


Posted in Javascript onSeptember 05, 2020

本文实例讲述了javascript实现很浪漫的气泡冒出特效代码,分享给大家供大家参考,具体如下:

运行效果截图如下:

javascript实现很浪漫的气泡冒出特效

具体代码如下:

实现思路:HTML里只需要一个CANVAS元素,Javascript里操作canvas

1、给canvas里绘制背景图片
2、在绘制半径为0-10px的圆形,x坐标屏幕水平随机,y所标竖直大于屏幕高度。

圆形背景色可以是随机,那就是各种色彩了!
    利用计时器控制y--

构建html

<!doctype html>
<html lang="en">
 <head>
 <meta charset="UTF-8">
 <meta name="Generator" content="EditPlus®">
 <meta name="Author" content="">
 <meta name="Keywords" content="">
 <meta name="Description" content="">
 <title>5多个小球往上运动</title>
 <style>
 </style>
 </head>
 <body>
 <div id="d1">
 <canvas id="canvas"></canvas>
 </div>
 </body>
</html>

js代码

<script>
 var canvas=document.getElementById("canvas");
 var context=canvas.getContext("2d");
 canvas.width=window.innerWidth;
 canvas.height=window.innerHeight;
 function Circle(){
 this.x=Math.random()*canvas.width;
 this.y=canvas.height;
 this.r=Math.random()*10;
 //绘制圆形
 this.paint=function(){
  context.beginPath();
  context.arc(this.x,this.y,this.r,0,Math.PI*2);
  context.fillStyle="white";
  context.globalAlpha = 0.5;
  context.fill();
 }
 //控制圆形移动
 this.step=function(){
  this.y--;
 }
 }
 var circles=[];
 function createCircles(){
 var circle=new Circle();//??????
 circles[circles.length]=circle;
 }
 
 function paintCircles(){
 for(var i=0;i<circles.length;i++){
  circles[i].paint();
 }
 }
 function stepCircles(){
 for(var i=0;i<circles.length;i++){
  circles[i].step();
 }
 }
 var myimg=new Image();
 myimg.src="images/demo-1.png";
 var timer="";
 setInterval(function(){
 context.drawImage(myimg,0,0);
 timer++;
 if(timer%20==0){
  createCircles();
 }
 paintCircles();
 stepCircles();
 },10);
</script>

需要在自己的网站中添加浪漫元素,这不失为一种好的方式,希望大家灵活运用javascript实现气泡冒出特效,谢谢大家的阅读。

Javascript 相关文章推荐
Javascript中的delete介绍
Sep 02 Javascript
Flexigrid在IE下不显示数据的处理的解决方法
Oct 24 Javascript
document节点对象的获取方式示例介绍
Dec 24 Javascript
javascript实现验证身份证号的有效性并提示
Apr 30 Javascript
JavaScript数据推送Comet技术详解
Apr 07 Javascript
老生常谈遮罩层 滚动条的问题
Apr 29 Javascript
深入理解JavaScript中的call、apply、bind方法的区别
May 30 Javascript
如何理解Vue的.sync修饰符的使用
Aug 17 Javascript
详解React项目的服务端渲染改造(koa2+webpack3.11)
Mar 19 Javascript
JS实现将二维数组转为json格式字符串操作示例
Jul 12 Javascript
vue.js表单验证插件(vee-validate)的使用教程详解
May 23 Javascript
react 移动端实现列表左滑删除的示例代码
Jul 04 Javascript
jQuery插件jquery-barcode实现条码打印的方法
Nov 25 #Javascript
JavaScript编写简单的计算器
Nov 25 #Javascript
HTML5 Shiv完美解决IE(IE6/IE7/IE8)不兼容HTML5标签的方法
Nov 25 #Javascript
jQuery插件formValidator自定义函数扩展功能实例详解
Nov 25 #Javascript
jQuery实现鼠标双击Table单元格变成文本框及输入内容后更新到数据库的方法
Nov 25 #Javascript
基于jQuery实现响应式圆形图片轮播特效
Nov 25 #Javascript
jquery+css实现动感的图片切换效果
Nov 25 #Javascript
You might like
PHP脚本的10个技巧(8)
2006/10/09 PHP
symfony表单与页面实现技巧
2015/01/26 PHP
WordPress主题中添加文章列表页页码导航的PHP代码实例
2015/12/22 PHP
PHP使用递归算法无限遍历数组示例
2017/01/13 PHP
PHP使用glob方法遍历文件夹下所有文件的实例
2018/10/17 PHP
新手入门常用代码集锦
2007/01/11 Javascript
『jQuery』取指定url格式及分割函数应用
2013/04/22 Javascript
jQuery瀑布流插件Wookmark使用实例
2014/04/02 Javascript
浅谈JavaScript中的string拥有方法的原因
2015/08/28 Javascript
angularjs创建弹出框实现拖动效果
2020/08/25 Javascript
Mac下使用charles遇到的问题以及解决办法
2017/01/10 Javascript
vue-cli初始化项目中使用less的方法
2018/08/09 Javascript
React Hooks 实现和由来以及解决的问题详解
2020/01/17 Javascript
[01:02:06]LGD vs Mineski Supermajor 胜者组 BO3 第二场 6.5
2018/06/06 DOTA
Windows上使用Python增加或删除权限的方法
2018/04/24 Python
python 实现得到当前时间偏移day天后的日期方法
2018/12/31 Python
python将处理好的图像保存到指定目录下的方法
2019/01/10 Python
python3 深浅copy对比详解
2019/08/12 Python
基于selenium及python实现下拉选项定位select
2020/07/22 Python
全球最大的跑步用品商店:Road Runner Sports
2016/09/11 全球购物
澳大利亚牛仔裤商店:Just Jeans
2016/10/13 全球购物
屈臣氏马来西亚官网:Watsons马来西亚
2019/06/15 全球购物
英国现代、当代和设计师家具店:Furntastic
2020/07/18 全球购物
保安拾金不昧表扬信
2014/01/15 职场文书
活动总结怎么写啊
2014/05/07 职场文书
小学亲子活动总结
2014/07/01 职场文书
教师师德师风自我剖析材料
2014/09/29 职场文书
2014年机关工会工作总结
2014/12/19 职场文书
工作年限证明范本
2015/06/15 职场文书
区域销售大会开幕词
2016/03/04 职场文书
如何做好工作总结!
2019/04/10 职场文书
祝福语集锦:给满月宝宝的祝福语
2019/11/20 职场文书
Java 将PPT幻灯片转为HTML文件的实现思路
2021/06/11 Java/Android
四十九个javascript小知识实用技巧
2021/11/20 Javascript
Java虚拟机内存结构及编码实战分享
2022/04/07 Java/Android
Nginx报404错误的详细解决方法
2022/07/23 Servers