JavaScript实现鼠标滑过处生成气泡的方法


Posted in Javascript onMay 16, 2015

本文实例讲述了JavaScript实现鼠标滑过处生成气泡的方法。分享给大家供大家参考。具体实现方法如下:

<HTML>
<HEAD>
<title>鼠标周围在网页上生成气泡</title>
</HEAD>
<BODY bgColor=#000000 scroll=no onload=zyva()>
<div id=aqua style="position:absolute;left=0;top=0;"></div>
<IMG id=B src="b1.gif" style="display:none">
<SCRIPT>
object = new Array()
var xm,ym
function CObj(N,obj){
aqua.insertAdjacentHTML("AfterBegin","<img style='position:absolute;left:-1000;' src='"+obj.src+"'>")
this.img = aqua.firstChild.style
mr = Math.random()
this.v = 6*mr+4
this.s = .5*mr
this.p = .1+mr
this.w = 0
this.k = 0
this.x = xm
this.y = N
this.ChteuMeulEu = function ChteuMeulEu(){
with(this){
with(img){
left = (x+=0.5*v*Math.sin(k+=s))-w*0.5
top = y-=v
width = Math.min(w+=p,100)
}
if(y<-w){
w = 8
y = ym
x = xm
}
}
}
}
function gradient(R,G,B,m){
for(i=0;i<25;i++){
c = 255 - 10 * i
C = "\"RGB("+Math.round(c*R/255)+","+Math.round(c*G/255)+","+Math.round(c*B/255)+")\""
code = "<span style='position:absolute;font-size:1pt;left=0;width=120%;height="+(m)+".2%;top="+(i*m)
+"%;background="+C+";z-Index:-1000'></span>"
document.body.insertAdjacentHTML("beforeEnd",code)
}
}
function zyva(){
xm = document.body.offsetWidth * 0.5
ym = document.body.offsetHeight
document.onmousemove = function (){
xm = window.event.clientX
ym = window.event.clientY
}
for(i=0;i<60;i++)object[i] = new CObj(i,B)
setInterval("for(i in object)object[i].ChteuMeulEu()",16)
gradient(41,93,214,2)
}
</SCRIPT>
</BODY>
</HTML>

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
解放web程序员的输入验证
Oct 06 Javascript
JScript的条件编译
May 29 Javascript
javascript小组件 原生table排序表格脚本(兼容ie firefox opera chrome)
Jul 25 Javascript
jquery $.each() 使用小探
Aug 23 Javascript
Angular.js之作用域scope'@','=','&amp;'实例详解
Feb 28 Javascript
angularJS之$http:与服务器交互示例
Mar 17 Javascript
javascript 中事件冒泡和事件捕获机制的详解
Sep 01 Javascript
详解Angular5/Angular6项目如何添加热更新(HMR)功能
Oct 10 Javascript
用vuex写了一个购物车H5页面的示例代码
Dec 04 Javascript
使用Vue开发自己的Chrome扩展程序过程详解
Jun 21 Javascript
微信小程序 腾讯地图SDK 获取当前地址实现解析
Aug 12 Javascript
微信小程序实现可拖动悬浮图标(包括按钮角标的实现)
Dec 29 Javascript
JavaScript中继承用法实例分析
May 16 #Javascript
jQuery实现不断闪烁文字的方法
May 15 #Javascript
javascript实现可拖动变色并关闭层窗口实例
May 15 #Javascript
JavaScript实现简单的数字倒计时
May 15 #Javascript
JavaScript生成福利彩票双色球号码
May 15 #Javascript
JavaScript实现列表分页功能特效
May 15 #Javascript
基于jQuery插件实现环形图标菜单旋转切换特效
May 15 #Javascript
You might like
php magic_quotes_gpc的一点认识与分析
2008/08/18 PHP
PHP动态生成javascript文件的2个例子
2014/04/11 PHP
php实现redis数据库指定库号迁移的方法
2015/01/14 PHP
thinkPHP实现签到功能的方法
2017/03/15 PHP
JavaScript触发器详解
2007/03/10 Javascript
面向对象Javascript核心支持代码分享
2012/05/23 Javascript
JavaScript prototype 使用介绍
2013/08/29 Javascript
深入理解JavaScript系列(18):面向对象编程之ECMAScript实现
2015/03/05 Javascript
JavaScript基础篇(3)之Object、Function等引用类型
2015/11/30 Javascript
jQGrid Table操作列中点击【操作】按钮弹出按钮层的实现代码
2016/12/05 Javascript
字太多用...代替的方法(两种)
2017/03/15 Javascript
微信小程序chooseImage的用法(从本地相册选择图片或使用相机拍照)
2018/08/22 Javascript
在layui下对元素进行事件绑定的实例
2019/09/06 Javascript
使用js实现一个简单的滚动条过程解析
2019/09/10 Javascript
Python操作mongodb的9个步骤
2018/06/04 Python
python 用opencv调用训练好的模型进行识别的方法
2018/12/07 Python
mac系统下Redis安装和使用步骤详解
2019/07/09 Python
Python操作多维数组输出和矩阵运算示例
2019/11/28 Python
Python函数的返回值、匿名函数lambda、filter函数、map函数、reduce函数用法实例分析
2019/12/26 Python
Django 用户登陆访问限制实例 @login_required
2020/05/13 Python
Anaconda的安装与虚拟环境建立
2020/11/18 Python
HTML5中微数据概述及在搜索引擎中的使用举例
2013/02/07 HTML / CSS
华三通信H3C面试题
2015/05/15 面试题
理货员的岗位职责
2013/11/23 职场文书
点菜员岗位职责范本
2014/02/14 职场文书
党的群众路线剖析材料
2014/10/09 职场文书
2014年远程教育工作总结
2014/12/09 职场文书
2014年基建工作总结
2014/12/12 职场文书
有关骆驼祥子的读书笔记
2015/06/26 职场文书
闭幕词的写作格式与范文!
2019/06/24 职场文书
标准版个人借条怎么写?以及什么是借条?
2019/08/28 职场文书
Go使用协程交替打印字符
2021/04/29 Golang
Python Parser的用法
2021/05/12 Python
python b站视频下载的五种版本
2021/05/27 Python
用python批量解压带密码的压缩包
2021/05/31 Python
Anaconda安装pytorch和paddle的方法步骤
2022/04/03 Python