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中的对象和数组的应用技巧
Jan 07 Javascript
JQuery一种取同级值的方式(比如你在GridView中)
Mar 15 Javascript
TypeScript具有的几个不同特质
Apr 07 Javascript
jQuery中trigger()与bind()用法分析
Dec 18 Javascript
JS实时弹出新消息提示框并有提示音响起的实现代码
Apr 20 Javascript
js实现对table的增加行和删除行的操作方法
Oct 13 Javascript
微信小程序loading组件显示载入动画用法示例【附源码下载】
Dec 09 Javascript
在vue项目创建的后初始化首次使用stylus安装方法分享
Jan 25 Javascript
js中el表达式的使用和非空判断方法
Mar 28 Javascript
JavaScript实现的鼠标跟随特效示例【2则实例】
Dec 22 Javascript
JavaScript中将值转换为字符串的五种方法总结
Jun 06 Javascript
JavaScript中MutationObServer监听DOM元素详情
Nov 27 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中SQL注入攻击与XSS攻击
2012/06/10 PHP
关于ob_get_contents(),ob_end_clean(),ob_start(),的具体用法详解
2013/06/24 PHP
php+ajax实时刷新简单实例
2015/02/25 PHP
php验证码的制作思路和实现方法
2015/11/12 PHP
JavaScript 参考教程
2006/12/29 Javascript
Iframe自适应高度绝对好使的代码 兼容IE,遨游,火狐
2011/01/27 Javascript
JavaScript NaN和Infinity特殊值 [译]
2012/09/20 Javascript
MyEclipse取消验证Js的两种方法
2013/11/14 Javascript
JavaScript初学者建议:不要去管浏览器兼容
2014/02/04 Javascript
jquery插件lazyload.js延迟加载图片的使用方法
2014/02/19 Javascript
jquery单行文字向上滚动效果示例
2014/03/06 Javascript
js控制网页前进和后退的方法
2015/06/08 Javascript
浅谈Web页面向后台提交数据的方式和选择
2016/09/23 Javascript
通过原生JS实现为元素添加事件的方法
2016/11/23 Javascript
EasyUI的DataGrid绑定Json数据源的示例代码
2017/12/16 Javascript
Vue中img的src是动态渲染时不显示的解决
2019/11/14 Javascript
vue iview实现动态新增和删除
2020/06/17 Javascript
JavaScript 常见的继承方式汇总
2020/09/17 Javascript
小程序角标的添加及绑定购物车数量进行实时更新的实现代码
2020/12/07 Javascript
使用jquery实现轮播图效果
2021/01/02 jQuery
PyQt5每天必学之组合框
2018/04/20 Python
新手如何发布Python项目开源包过程详解
2019/07/11 Python
python数据化运营的重要意义
2019/11/25 Python
pycharm 中mark directory as exclude的用法详解
2020/02/14 Python
Django数据库操作之save与update的使用
2020/04/01 Python
python 贪心算法的实现
2020/09/18 Python
大专生的学习自我评价
2013/12/04 职场文书
公安交警个人对照检查材料思想汇报
2014/10/01 职场文书
2014年初中班主任工作总结
2014/11/08 职场文书
先进工作者事迹材料
2014/12/23 职场文书
劳动仲裁代理词范文
2015/05/25 职场文书
2015国庆节宣传语
2015/07/14 职场文书
辅导员学期工作总结
2015/08/14 职场文书
党风廉洁教育心得体会
2016/01/20 职场文书
5种方法告诉你如何使JavaScript 代码库更干净
2021/09/15 Javascript
java实现面板之间切换功能
2022/06/10 Java/Android