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 相关文章推荐
jqPlot Option配置对象详解
Jul 25 Javascript
使用Microsoft Ajax Minifier减小JavaScript文件大小的方法
Apr 01 Javascript
jquery photoFrame 图片边框美化显示插件
Jun 28 Javascript
javascript实现切换td中的值
Dec 05 Javascript
javascript实现类似超链接的效果
Dec 26 Javascript
JS实现转动随机数抽奖特效代码
Apr 16 Javascript
jQuery 特性操作详解及实例代码
Sep 29 Javascript
Vue.js使用$.ajax和vue-resource实现OAuth的注册、登录、注销和API调用
May 10 Javascript
微信小程序使用image组件显示图片的方法【附源码下载】
Dec 08 Javascript
vue.js实现的经典计算器/科学计算器功能示例
Jul 11 Javascript
了解JavaScript中的选择器
May 24 Javascript
JS + HTML 罗盘式时钟的实现
May 21 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学习 字符串课件
2008/06/15 PHP
我的php学习笔记(毕业设计)
2012/02/21 PHP
Zend Framework教程之Zend_Registry对象用法分析
2016/03/22 PHP
php实现背景图上添加圆形logo图标的方法
2016/11/17 PHP
自制基于jQuery的智能提示插件一枚
2011/02/18 Javascript
js有关元素内容操作小结
2011/12/20 Javascript
jquery数据验证插件(自制,简单,练手)实例代码
2013/10/24 Javascript
JavaScript获取按钮所在form表单id的方法
2015/04/02 Javascript
JS组件Bootstrap实现弹出框效果代码
2016/04/26 Javascript
jquery实现ajax加载超时提示的方法
2016/07/23 Javascript
AngularJs bootstrap搭载前台框架——js控制部分
2016/09/01 Javascript
AngularJs篇:使用AngularJs打造一个简易权限系统的实现代码
2016/12/26 Javascript
微信小程序组件 contact-button(客服会话按钮)详解及实例代码
2017/01/10 Javascript
jQuery实现验证码功能
2017/03/17 Javascript
深入理解JavaScript 参数按值传递
2017/05/24 Javascript
gulp解决跨域的配置文件问题
2017/06/08 Javascript
详解windows下vue-cli及webpack 构建网站(三)使用组件
2017/06/17 Javascript
不得不知的ES6小技巧
2018/07/28 Javascript
vue通过接口直接下载java生成好的Excel表格案例
2020/10/26 Javascript
[46:28]EG vs Liquid 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.23
2019/09/05 DOTA
Python简单实现子网掩码转换的方法
2016/04/13 Python
Python生成8位随机字符串的方法分析
2017/12/05 Python
python实现汽车管理系统
2018/11/30 Python
Python re 模块findall() 函数返回值展现方式解析
2019/08/09 Python
Python中的 sort 和 sorted的用法与区别
2019/08/10 Python
pycharm新建Vue项目的方法步骤(图文)
2020/03/04 Python
详解Python openpyxl库的基本应用
2021/02/26 Python
美国嘻哈文化生活方式品牌:GLD
2018/04/15 全球购物
任课老师推荐信范文
2013/11/24 职场文书
偷看我的初中毕业鉴定
2014/01/29 职场文书
中学生操行评语大全
2014/04/24 职场文书
中学教师师德承诺书
2014/05/23 职场文书
信息管理专业自荐书
2014/06/05 职场文书
法院干警四风问题自我剖析材料
2014/09/29 职场文书
二年级语文上册复习计划
2015/01/19 职场文书
javascript遍历对象的五种方式实例代码
2021/10/24 Javascript