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 相关文章推荐
javascript window.opener的用法分析
Apr 07 Javascript
jQuery阻止冒泡和HTML默认操作
Nov 17 Javascript
js使用函数绑定技术改变事件处理程序的作用域
Dec 26 Javascript
javascript 中that的含义示例介绍
May 14 Javascript
BootStrap iCheck插件全选与获取value值的解决方法
Aug 24 Javascript
微信js-sdk地理位置接口用法示例
Oct 12 Javascript
jQuery控制控件文本的长度的操作方法
Dec 05 Javascript
Angular下H5上传图片的方法(可多张上传)
Jan 09 Javascript
详解升级react-router 4 踩坑指南
Aug 14 Javascript
微信小程序封装自定义弹窗的实现代码
May 08 Javascript
Vue实现渲染数据后控制滚动条位置(推荐)
Dec 09 Javascript
一篇文章弄清楚Ajax请求的五个步骤
Mar 17 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中养成7个面向对象的好习惯
2010/01/28 PHP
PHP导航下拉菜单的实现如此简单
2013/09/22 PHP
php将url地址转化为完整的a标签链接代码(php为url地址添加a标签)
2014/01/17 PHP
php把session写入数据库示例
2014/02/26 PHP
WordPress网站性能优化指南
2015/11/18 PHP
php gd等比例缩放压缩图片函数
2016/06/12 PHP
PHP实现一个限制实例化次数的类示例
2019/09/16 PHP
laravel 解决多库下的DB::transaction()事务失效问题
2019/10/21 PHP
ThinkPHP5分页paginate代码实例解析
2020/11/10 PHP
数组方法解决JS字符串连接性能问题有争议
2011/01/12 Javascript
jQuery .tmpl() 用法示例介绍
2014/08/21 Javascript
js上传图片及预览功能实例分析
2015/04/24 Javascript
浅析js的模块化编写 require.js
2016/12/07 Javascript
在vue项目创建的后初始化首次使用stylus安装方法分享
2018/01/25 Javascript
vue中的数据绑定原理的实现
2018/07/02 Javascript
JS+HTML实现的圆形可点击区域示例【3种方法】
2018/08/01 Javascript
Vuex的API文档说明详解
2020/02/05 Javascript
Node.js 在本地生成日志文件的方法
2020/02/07 Javascript
vue webpack build资源相对路径的问题及解决方法
2020/06/04 Javascript
解决vue init webpack 下载依赖卡住不动的问题
2020/11/09 Javascript
nestjs中异常过滤器Exceptionfilter的具体使用
2021/02/07 Javascript
Python+微信接口实现运维报警
2016/08/27 Python
python的Tqdm模块的使用
2018/01/10 Python
Python3调用百度AI识别图片中的文字功能示例【测试可用】
2019/03/13 Python
python英语单词测试小程序代码实例
2019/09/09 Python
Python 依赖库太多了该如何管理
2019/11/08 Python
用opencv给图片换背景色的示例代码
2020/07/08 Python
python中通过pip安装库文件时出现“EnvironmentError: [WinError 5] 拒绝访问”的问题及解决方案
2020/08/11 Python
英国领先的运动营养品牌:Protein Dynamix
2018/01/02 全球购物
荷兰最大的鞋子、服装和运动折扣店:Bristol
2021/01/07 全球购物
干部现实表现材料
2014/02/13 职场文书
食品业务员岗位职责
2014/03/18 职场文书
销售主管竞聘书
2014/03/31 职场文书
倡议书的写法
2014/08/30 职场文书
廉洁自律承诺书2015
2015/01/22 职场文书
放假通知格式
2015/04/14 职场文书