JavaScript实现在网页上点击鼠标生成气泡特效

最新推荐文章于 2024-09-10 14:54:25 发布

清，纯一色

最新推荐文章于 2024-09-10 14:54:25 发布

阅读量808

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/youtianxia/p/3994262.html

本文详细介绍了使用JavaScript实现网页点击鼠标生成气泡特效的方法，包括使用DOM操作、随机颜色生成和定时更新位置等技巧，提供了一个交互性的网页元素展示实例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<HTML>
<HEAD>
<title>JavaScript实现在网页上点击鼠标生成气泡特效_石家庄色彩顾问</title>
</HEAD>
<BODY bgColor=#000000 scroll=no onload=zyva()>
<div id=aqua style="position:absolute;left=0;top=0;"></div>
<IMG id=B src="http://www.webdm.cn/images/20110611/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>
<br />

</BODY>
</HTML>