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 相关文章推荐
Prototype1.6 JS 官方下载地址
Nov 30 Javascript
JSON 客户端和服务器端的格式转换
Aug 27 Javascript
Google排名中的10个最著名的 JavaScript库
Apr 27 Javascript
利用JS实现浏览器的title闪烁
Jul 08 Javascript
深入理解setTimeout函数和setInterval函数
May 20 Javascript
原生JS实现首页进度加载动画
Sep 14 Javascript
JavaScript学习笔记--常用的互动方法
Dec 07 Javascript
vue 自定义全局方法,在组件里面的使用介绍
Feb 28 Javascript
vue使用技巧及vue项目中遇到的问题
Jun 04 Javascript
在 Vue 中使用 JSX 及使用它的原因浅析
Feb 10 Javascript
vue和小程序项目中使用iconfont的方法
May 19 Javascript
JavaScript实现复选框全选和取消全选
Nov 20 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
discuz authcode 经典php加密解密函数解析
2020/07/12 PHP
用PHP实现Ftp用户的在线管理
2012/02/16 PHP
PHP合并静态文件详解
2014/11/14 PHP
十幅图告诉你什么是PHP引用
2015/02/22 PHP
PHP+Jquery与ajax相结合实现下拉淡出瀑布流效果【无需插件】
2016/05/06 PHP
THINKPHP5分页数据对象处理过程解析
2020/10/28 PHP
转自Jquery官方 jQuery1.1.3发布,速度提升800%,体积保持20K
2007/08/19 Javascript
很棒的学习jQuery的12个网站推荐
2011/04/28 Javascript
javascript 禁用IE工具栏,导航栏等等实现代码
2013/04/01 Javascript
Javascript 鼠标移动上去 滑块跟随效果代码分享
2013/11/23 Javascript
扩展JS Date对象时间格式化功能的小例子
2013/12/02 Javascript
js实现完全自定义可带多级目录的网页鼠标右键菜单方法
2015/02/28 Javascript
jquery控制页面部分刷新的方法
2015/06/24 Javascript
Java Mybatis框架入门基础教程
2015/09/21 Javascript
JS实现点击事件统计的简单实例
2016/07/10 Javascript
JS简单实现仿百度控制台输出信息效果
2016/09/04 Javascript
从0开始学Vue
2016/10/27 Javascript
完美实现js拖拽效果 return false用法详解
2017/07/28 Javascript
vuejs点击class变化的实例
2018/09/05 Javascript
Bootstrap-table自定义可编辑每页显示记录数
2018/09/07 Javascript
JQuery省市联动效果实现过程详解
2020/05/08 jQuery
element-ui点击查看大图的方法示例
2020/12/14 Javascript
简单谈谈Python中的元祖(Tuple)和字典(Dict)
2017/04/21 Python
Python 输出详细的异常信息(traceback)方式
2020/04/08 Python
python3.6.5基于kerberos认证的hive和hdfs连接调用方式
2020/06/06 Python
Python+Selenium随机生成手机验证码并检查页面上是否弹出重复手机号码提示框
2020/09/21 Python
pycharm 使用tab跳出正在编辑的括号(){}{}等问题
2021/02/26 Python
css3实现多个元素依次显示效果
2017/12/12 HTML / CSS
千禧酒店及度假村官方网站:Millennium Hotels and Resorts
2019/05/10 全球购物
Java基础类库面试题
2013/09/04 面试题
建筑人员岗位职责
2013/12/25 职场文书
高中同学会活动方案
2014/08/14 职场文书
辞职信模板(中英文版)
2015/02/27 职场文书
出国留学自荐信模板
2015/03/06 职场文书
使用pytorch实现线性回归
2021/04/11 Python
python中%格式表达式实例用法
2021/06/18 Python