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的函数重名看其初始化方式
Mar 08 Javascript
JQuery textlimit 显示用户输入的字符数 限制用户输入的字符数
May 14 Javascript
JavaScript使用ActiveXObject访问Access和SQL Server数据库
Apr 02 Javascript
Javascript中typeof 用法小结
May 12 Javascript
jquery实现移动端点击图片查看大图特效
Sep 11 Javascript
jQuery validate插件实现ajax验证重复的2种方法
Jan 22 Javascript
对比分析Django的Q查询及AngularJS的Datatables分页插件
Feb 07 Javascript
AngularJS入门教程一:路由用法初探
May 27 Javascript
了解VUE的render函数的使用
Jun 08 Javascript
AngularJS双向数据绑定原理之$watch、$apply和$digest的应用
Jan 30 Javascript
vue多次循环操作示例
Feb 08 Javascript
javascript数组的定义及操作实例
Nov 10 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 str_pad 函数使用详解
2009/01/13 PHP
PHP 之Section与Cookie使用总结
2012/09/14 PHP
解决php使用异步调用获取数据时出现(错误c00ce56e导致此项操作无法完成)
2013/07/03 PHP
谈谈PHP连接Access数据库的注意事项
2016/08/12 PHP
js的event详解。
2006/09/06 Javascript
javascript:void(0)的真正含义实例分析
2008/08/20 Javascript
js跨域和ajax 跨域问题的实现思路
2009/09/05 Javascript
js,jQuery 排序的实现代码,网页标签排序的实现,标签排序
2011/04/27 Javascript
关于JAVASCRIPT urldecode URL解码的问题
2012/01/08 Javascript
asm.js使用示例代码
2013/11/28 Javascript
javascript中数组的concat()方法使用介绍
2013/12/18 Javascript
JS+DIV+CSS排版布局实现美观的选项卡效果
2015/10/10 Javascript
在IE8上JS实现combobox支持拼音检索功能
2016/05/23 Javascript
利用Chrome DevTools直接调试Node.js和JavaScript的方法详解(并行)
2017/02/16 Javascript
angularjs 获取默认选中的单选按钮的value方法
2018/02/28 Javascript
JS阻止事件冒泡的方法详解
2019/08/26 Javascript
通过GASP让vue实现动态效果实例代码详解
2019/11/24 Javascript
JavaScript中的惰性载入函数及优势
2020/02/18 Javascript
Vue中点击active并第一个默认选中功能的实现
2020/02/24 Javascript
jquery实现直播视频弹幕效果
2020/02/25 jQuery
JavaScript ECMA-262-3 深入解析(一):执行上下文实例分析
2020/04/25 Javascript
vue实现信息管理系统
2020/05/30 Javascript
vue element el-transfer增加拖拽功能
2021/01/15 Vue.js
python 字典操作提取key,value的方法
2019/06/26 Python
pip已经安装好第三方库但pycharm中import时还是标红的解决方案
2020/10/09 Python
俄罗斯香水和化妆品购物网站:Л’Этуаль
2018/05/10 全球购物
锐步英国官网:Reebok英国
2019/11/29 全球购物
StubHub中国:购买和出售全球活动门票
2020/01/01 全球购物
英国银首饰公司:e&e Jewellery
2021/02/11 全球购物
武汉世纪畅想数字传播有限公司 .NET笔试题
2015/06/13 面试题
软件工程师面试题
2012/06/25 面试题
竞选演讲稿范文
2013/12/28 职场文书
生日宴会策划方案
2014/06/03 职场文书
运动会稿件100字
2014/09/24 职场文书
五年级作文之劳动作文
2019/11/12 职场文书
OpenCV实现普通阈值
2021/11/17 Java/Android