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  THIS详解 面向对象
Mar 25 Javascript
JS格式化数字金额用逗号隔开保留两位小数
Oct 18 Javascript
JQuery与Ajax调用新浪API获取短网址的代码
Feb 07 Javascript
jquery表单对象属性过滤选择器实例分析
May 18 Javascript
jQuery针对input的class属性写了多个值情况下的选择方法
Jun 03 Javascript
详解angularjs获取元素以及angular.element()用法
Jul 25 Javascript
vue2.x+webpack快速搭建前端项目框架详解
Nov 30 Javascript
详解auto-vue-file:一个自动创建vue组件的包
Apr 26 Javascript
vue element自定义表单验证请求后端接口验证
Dec 11 Javascript
js实现轮播图特效
May 28 Javascript
JavaScript 生成唯一ID的几种方式
Feb 19 Javascript
JavaScript parseInt0.0000005打印5原理解析
Jul 23 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解压tar.gz格式文件的方法
2016/02/14 PHP
php封装的page分页类完整实例
2016/10/18 PHP
laravel通用化的CURD的实现
2019/12/13 PHP
jquery $.fn $.fx是什么意思有什么用
2013/11/04 Javascript
JavaScript中的prototype.bind()方法介绍
2014/04/04 Javascript
2则自己编写的jQuery特效分享
2015/02/26 Javascript
基于js实现微信发送好友如何分享到朋友圈、微博
2015/11/30 Javascript
基于jquery编写的放大镜插件
2016/03/23 Javascript
jQuery中的Deferred和promise 的区别
2016/04/03 Javascript
详解JavaScript对象类型
2016/06/16 Javascript
轻松掌握JavaScript策略模式
2016/08/25 Javascript
完美实现js选项卡切换效果(一)
2017/03/08 Javascript
浅谈Angular4中常用管道
2017/09/27 Javascript
vue-cli的eslint相关用法
2017/09/29 Javascript
原生js调用json方法总结
2018/02/22 Javascript
在angularJs中进行数据遍历的2种方法
2018/10/08 Javascript
vue中使用codemirror的实例详解
2018/11/01 Javascript
基于vue-draggable 实现三级拖动排序效果
2020/01/10 Javascript
前端如何实现动画过渡效果
2021/02/05 Javascript
python处理文本文件实现生成指定格式文件的方法
2014/07/31 Python
Python中下划线的使用方法
2015/03/27 Python
python登录并爬取淘宝信息代码示例
2017/12/09 Python
python实现对指定输入的字符串逆序输出的6种方法
2018/04/26 Python
使用python生成杨辉三角形的示例代码
2018/08/29 Python
python Tkinter的图片刷新实例
2019/06/14 Python
Django通过json格式收集主机信息
2020/05/29 Python
OpenCV 之按位运算举例解析
2020/06/19 Python
Python中return函数返回值实例用法
2020/11/19 Python
周仰杰(JIMMY CHOO)英国官方网站:闻名世界的鞋子品牌
2018/10/28 全球购物
搞笑创意广告语
2014/03/17 职场文书
安全生产目标责任书
2014/04/14 职场文书
倡议书范文
2014/04/16 职场文书
机关干部作风建设剖析材料
2014/10/23 职场文书
升职自荐信范文
2015/03/27 职场文书
一年之计:2019年下半年的计划
2019/05/07 职场文书
JavaScript展开运算符和剩余运算符的区别详解
2022/02/18 Javascript