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 相关文章推荐
在视频前插入广告
Nov 20 Javascript
在图片上显示左右箭头类似翻页的代码
Mar 04 Javascript
使用js+jquery实现无限极联动
May 23 Javascript
JQuery对表格进行操作的常用技巧总结
Apr 23 Javascript
JS中正则表达式要注意lastIndex属性
Aug 08 Javascript
vue+vue-validator 表单验证功能的实现代码
Nov 13 Javascript
Javascript实现运算符重载详解
Apr 07 Javascript
微信小程序 textarea 层级过高问题简单解决方案
Oct 14 Javascript
js实现鼠标点击页面弹出自定义文字效果
Dec 24 Javascript
Vue基于iview实现登录密码的显示与隐藏功能
Mar 06 Javascript
解决vue-router 切换tab标签关闭时缓存问题
Jul 22 Javascript
浅谈鸿蒙 JavaScript GUI 技术栈
Sep 17 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开发中csrf攻击的简单演示和防范
2017/05/07 PHP
javascript smipleChart 简单图标类
2011/01/12 Javascript
jquery导航制件jquery鼠标经过变色效果示例
2013/12/05 Javascript
window.setInterval()方法的定义和用法及offsetLeft与style.left的区别
2015/11/11 Javascript
Jquery Mobile 自定义按钮图标
2015/11/18 Javascript
JS图片定时翻滚效果实现方法
2016/06/21 Javascript
15位和18位身份证JS校验的简单实例
2016/07/18 Javascript
AngularJs  Understanding Angular Templates
2016/09/02 Javascript
详解百度百科目录导航树小插件
2017/01/08 Javascript
Vue2.0 实现移动端图片上传功能
2018/05/30 Javascript
Vue实现底部侧边工具栏的实例代码
2018/09/03 Javascript
layui layer select 选择被遮挡的解决方法
2019/09/21 Javascript
vue设置动态请求地址的例子
2019/11/01 Javascript
解决vue scoped html样式无效的问题
2020/10/24 Javascript
Python3使用requests登录人人影视网站的方法
2016/05/11 Python
用Python删除本地目录下某一时间点之前创建的所有文件的实例
2017/12/14 Python
python实现闹钟定时播放音乐功能
2018/01/25 Python
python3+PyQt5重新实现自定义数据拖放处理
2018/04/19 Python
pandas 实现字典转换成DataFrame的方法
2018/07/04 Python
基于PyQT实现区分左键双击和单击
2020/05/19 Python
Python venv虚拟环境配置过程解析
2020/07/08 Python
plt.figure()参数使用详解及运行演示
2021/01/08 Python
微信html5页面调用第三方位置导航的示例
2018/03/14 HTML / CSS
纽约州一群才华横溢的金匠制作而成:Hearth Jewelry
2019/03/22 全球购物
Kathmandu新西兰官网:新西兰户外运动品牌
2019/07/27 全球购物
Lookfantastic阿联酋官网:英国知名美妆护肤购物网站
2020/05/26 全球购物
计算机专业个人求职自荐信
2013/09/21 职场文书
保洁主管岗位职责
2013/11/20 职场文书
国贸类专业毕业生的求职信分享
2013/12/08 职场文书
结婚典礼证婚词
2014/01/08 职场文书
电脑售后服务承诺书
2014/03/27 职场文书
商务专员岗位职责范本
2014/06/29 职场文书
煤矿安全协议书
2014/08/20 职场文书
繁星春水读书笔记
2015/06/30 职场文书
mongodb清除连接和日志的正确方法分享
2021/09/15 MongoDB
MySQL如何修改字段类型和字段长度
2022/06/10 MySQL