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 相关文章推荐
js实现简单的星级选择器提交效果适用于评论等
Oct 18 Javascript
用jquery写的菜单从左往右滑动出现
Apr 11 Javascript
node.js Web应用框架Express入门指南
May 28 Javascript
Jquery搜索父元素操作方法
Feb 10 Javascript
jQuery Uploadify 上传插件出现Http Error 302 错误的解决办法
Dec 12 Javascript
正则表达式(语法篇推荐)
Jun 24 Javascript
javascript self对象使用详解
Oct 18 Javascript
JS制作适用于手机和电脑的通知信息效果
Oct 28 Javascript
WebStorm ES6 语法支持设置&amp;babel使用及自动编译(详解)
Sep 08 Javascript
layui原生表单验证的实例
Sep 09 Javascript
JavaScript 判断数据类型的4种方法
Sep 11 Javascript
vue-router定义元信息meta操作
Dec 07 Vue.js
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 增加了对 .ZIP 文件的读取功能
2006/10/09 PHP
php cli 方式 在crotab中运行解决
2010/02/08 PHP
浅析PHP原理之变量(Variables inside PHP)
2013/08/09 PHP
php遍历文件夹所有文件子文件夹函数代码
2013/11/27 PHP
php生成Android客户端扫描可登录的二维码
2016/05/13 PHP
Windows2003下php5.4安装配置教程(Apache2.4)
2016/06/30 PHP
thinkPHP实现的省市区三级联动功能示例
2017/05/05 PHP
Javascript操纵Cookie实现购物车程序
2007/02/15 Javascript
jquery 插件 人性化的消息显示
2008/01/21 Javascript
js中运算符&amp;&amp; 和 || 的使用记录
2014/08/21 Javascript
JavaScript的this关键字的理解
2016/06/18 Javascript
利用bootstrapValidator验证UEditor
2016/09/14 Javascript
javascript实现简易计算器
2017/02/01 Javascript
Angular2使用Angular-CLI快速搭建工程(二)
2017/05/21 Javascript
vue select组件的使用与禁用实现代码
2018/04/10 Javascript
js 将线性数据转为树形的示例代码
2019/05/28 Javascript
element-ui 中使用upload多文件上传只请求一次接口
2019/07/19 Javascript
vue单页应用的内存泄露定位和修复问题小结
2019/08/02 Javascript
vue项目查看vue版本及cli版本的实现方式
2020/10/24 Javascript
python判断图片宽度和高度后删除图片的方法
2015/05/22 Python
在Django框架中运行Python应用全攻略
2015/07/17 Python
Python urls.py的三种配置写法实例详解
2017/04/28 Python
Python2.7编程中SQLite3基本操作方法示例
2017/08/09 Python
python监控键盘输入实例代码
2018/02/09 Python
Python中asyncio模块的深入讲解
2019/06/10 Python
PyTorch加载预训练模型实例(pretrained)
2020/01/17 Python
详细分析Python垃圾回收机制
2020/07/01 Python
MAC平台基于Python Appium环境搭建过程图解
2020/08/13 Python
StubHub德国:购买和出售门票
2017/09/06 全球购物
澳大利亚在线购买儿童玩具:Toy Universe
2017/12/28 全球购物
工商企业管理实习自我鉴定
2013/12/04 职场文书
研究生导师推荐信
2014/09/06 职场文书
2014年节能减排工作总结
2014/12/06 职场文书
2015年南京大屠杀纪念日活动总结
2015/03/24 职场文书
小区环境卫生倡议书
2015/04/29 职场文书
2015年乡镇残联工作总结
2015/05/13 职场文书