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 相关文章推荐
删除重复数据的算法
Nov 23 Javascript
JavaScript中令你抓狂的魔术变量
Nov 30 Javascript
js获取TreeView控件选中节点的Text和Value值的方法
Nov 24 Javascript
JS动态改变表格边框宽度的方法
Mar 31 Javascript
jQuery 3 中的新增功能汇总介绍
Jun 12 Javascript
angular.js之路由的选择方法
Sep 24 Javascript
BootStrap与Select2使用小结
Feb 17 Javascript
JS实现向iframe中表单传值的方法
Mar 24 Javascript
vue地区选择组件教程详解
May 04 Javascript
JS实现数组删除指定元素功能示例
Jun 05 Javascript
javascript sort()对数组中的元素进行排序详解
Oct 13 Javascript
js单线程的本质 Event Loop解析
Oct 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面向对象全攻略 (六)__set() __get() __isset() __unset()的用法
2009/09/30 PHP
smarty模板数学运算示例
2016/12/11 PHP
php+mysql+jquery实现简易的检索自动补全提示功能
2017/04/15 PHP
thinkphp5.1 框架导入/导出excel文件操作示例
2020/05/25 PHP
JavaScript的eval JSON object问题
2009/11/15 Javascript
Dom在ajax技术中的作用说明
2010/10/25 Javascript
jquery ready函数、css函数及text()使用示例
2013/09/27 Javascript
JavaScript动态操作表格实例(添加,删除行,列及单元格)
2013/11/25 Javascript
js实现prototype扩展的方法(字符串,日期,数组扩展)
2016/01/14 Javascript
bootstrap3 兼容IE8浏览器!
2016/05/02 Javascript
jQuery点击输入框显示验证码图片
2016/05/19 Javascript
老生常谈Javascript中的原型和this指针
2016/10/09 Javascript
js浏览器滚动条卷去的高度scrolltop(实例讲解)
2017/07/07 Javascript
Vue 2.0学习笔记之Vue中的computed属性
2017/10/16 Javascript
深入浅析Vue.js中 computed和methods不同机制
2018/03/22 Javascript
Vue微信项目按需授权登录策略实践思路详解
2018/05/07 Javascript
layui表格 列自动适应大小失效的解决方法
2019/09/06 Javascript
关于AngularJS中几种Providers的区别总结
2020/05/17 Javascript
python实现的一个p2p文件传输实例
2014/06/04 Python
使用Python获取Linux系统的各种信息
2014/07/10 Python
Django内容增加富文本功能的实例
2017/10/17 Python
Jupyter notebook远程访问服务器的方法
2018/05/24 Python
selenium+python实现自动化登录的方法
2018/09/04 Python
Pandas 按索引合并数据集的方法
2018/11/15 Python
python实现定时发送邮件
2020/12/23 Python
HTML5中的新元素介绍
2008/10/17 HTML / CSS
Sunglasses Shop德国站:欧洲排名第一的太阳镜网站
2017/08/01 全球购物
Luxplus丹麦:香水和个人护理折扣
2018/04/23 全球购物
shell程序中如何注释
2012/01/28 面试题
网上开商店的创业计划书
2014/01/19 职场文书
秋季运动会广播稿大全
2014/02/17 职场文书
学校就业推荐信范文
2014/05/19 职场文书
大学生实习证明范本
2014/09/19 职场文书
2015年全民创业工作总结
2015/07/23 职场文书
详解Python小数据池和代码块缓存机制
2021/04/07 Python
RPM包方式安装Oracle21c的方法详解
2021/08/23 Oracle