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 错误处理的几种方法
Jun 13 Javascript
cument.execCommand()用法深入理解
Dec 04 Javascript
jQuery中empty()方法用法实例
Jan 16 Javascript
js表单元素checked、radio被选中的几种方法(详解)
Aug 22 Javascript
手机图片预览插件photoswipe.js使用总结
Aug 25 Javascript
javascript 判断页面访问方式电脑或者移动端
Sep 19 Javascript
详解Js模板引擎(TrimPath)
Nov 22 Javascript
详解AngularJS 路由 resolve用法
Apr 24 Javascript
详解在vue-cli项目中使用mockjs(请求数据删除数据)
Oct 23 Javascript
JavaScript引用类型RegExp基本用法详解
Aug 09 Javascript
为什么要使用Vuex的介绍
Jan 19 Javascript
JS如何操作DOM基于表格动态展示数据
Oct 15 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
人族 TERRAN 概述
2020/03/14 星际争霸
锁定年轻人的双倍活力 星巴克推出星倍醇即饮浓咖啡
2021/03/03 咖啡文化
用PHP实现的生成静态HTML速度快类库
2007/03/31 PHP
HTML中不支持静态Expando的元素的问题
2007/03/08 Javascript
详解JS 比较两个Json对象的值是否相等的实例
2013/11/20 Javascript
js实现通用的微信分享组件示例
2014/03/10 Javascript
表单提交前触发函数返回true表单才会提交
2014/03/11 Javascript
js事件绑定快捷键以ctrl+k为例
2014/09/30 Javascript
jQuery中fadeOut()方法用法实例
2014/12/24 Javascript
jQuery知识点整理
2015/01/30 Javascript
在JavaScript中使用对数Math.log()方法的教程
2015/06/15 Javascript
JS简单实现城市二级联动选择插件的方法
2015/08/19 Javascript
javascript html5 canvas实现可拖动省份的中国地图
2016/03/11 Javascript
AJAX实现瀑布流触发分页与分页触发瀑布流的方法
2016/05/23 Javascript
详解Angularjs在控制器(controller.js)中使用过滤器($filter)格式化日期/时间实例
2017/02/17 Javascript
详解angular2封装material2对话框组件
2017/03/03 Javascript
兼容浏览器的js事件绑定函数(详解)
2017/05/09 Javascript
vue proxyTable 接口跨域请求调试的示例
2017/09/12 Javascript
layui 上传图片 返回图片地址的方法
2019/09/26 Javascript
google广告之另类js调用实现代码
2020/08/22 Javascript
vue监听浏览器原生返回按钮,进行路由转跳操作
2020/09/09 Javascript
Python使用MD5加密字符串示例
2014/08/22 Python
利用python批量给云主机配置安全组的方法教程
2017/06/21 Python
python 读取DICOM头文件的实例
2018/05/07 Python
Python3.5内置模块之time与datetime模块用法实例分析
2019/04/27 Python
python rsa实现数据加密和解密、签名加密和验签功能
2019/09/18 Python
Python要求O(n)复杂度求无序列表中第K的大元素实例
2020/04/02 Python
css3图片边框border-image的用法
2017/06/30 HTML / CSS
HTML5仿手机微信聊天界面
2016/03/18 HTML / CSS
管理专员自荐信
2014/01/26 职场文书
音乐器材管理制度
2014/01/31 职场文书
公务员平时考核实施方案
2014/03/11 职场文书
志愿者活动总结范文
2014/04/26 职场文书
党风廉正建设责任书
2015/01/29 职场文书
心灵捕手观后感
2015/06/02 职场文书
2015秋季田径运动会广播稿
2015/08/19 职场文书