欢迎你的访问
 
返回天空素材库首页 http://www.Skysucai.com  
收藏本站
将本站设为首页
您当前的位置:天空素材首页 -> 让你的网页飞翔着蝴蝶
 
栏 目 导 航
. 常用代码 . 综合特效
. 状态特效 . 游戏特效
. 页面背景 . 页面特效
. 页面导航 . 文本操作
. 文本特效 . 图形特效
. 鼠标特效 . 时间日期
. 密码特效 . 浏览相关
. 警告对话 . 技巧特效
. 计数转换 . 测试搜索
. 代码生成 . 播放音乐
. 按钮特效 . 系统相关
. 链接特效 . 黑客性质
. 相关特效 . 窗口特效
. 广告特效 . 表单表格
. 模拟例子
相 关 文 章
· 状态栏显示链接内容...
· 又一例闪动的标题栏...
· 让标题栏文字动起来...
· 状态栏显示链接内容...
· 在输入框中输入什么...
· 状态栏打字效果特效...
· 闪动的标题栏特效
· 字符来回出现于状态...
· 在标题栏显示时间特...
· 一款状态滚动的文字...
本 类 热 门
· 面积计算器
· 100只鸡
· 不错的助手“默林
· 数制转换 可自定2、8...
· 科学计算器
· 坐标图
· 职位
· 三角函数计算
· 装机计算器
· NUMBER对象的增强函数...
· 阿拉伯数字转换为英文...
· 计算圆周率
更多  
 
 
更多  
最 新 推 荐
· 状态栏时间跳动特效
· 农历挂历特效
· 真正的万年历
· 网页特效 菜单-会动的...
· 网页特效 时间-任意位...
· 个人网页特效-有前后日...
· 时间每过一秒,Radio就...
· 时钟显示在任意指定位...
· 带开关的Form时钟
· 记录几天后的日期
· 显示登陆时间
· 退出时显示访问时间
更多  
     
让你的网页飞翔着蝴蝶
让你的网页飞翔着蝴蝶
作者:佚名  来源:本站整理  名称:让你的网页飞翔着蝴蝶 

减小字体 增大字体

       

[提示:你可先按照下面代码提示修改 上面部分代码,再按运行,此处看到的演示不完全正确]

此特效的详细完整代码如下:

第一步:在<head></head>之间加入以下代码:
<SCRIPT LANGUAGE="JavaScript">
if(!window.JSFX)
    JSFX=new Object();
JSFX.layerNo=0;
JSFX.createElem = function(htmlStr)
{
    var elem = null;

     if(document.layers)
    {
        elem=new Layer(2000);
        elem.document.open();
        elem.document.write(htmlStr);
        elem.document.close();
        elem.innerHTML = htmlStr;
    }
    else
    if(document.all)
    {
        var xName = "xLayer" + JSFX.layerNo++;
        var txt = "<DIV ID='" + xName
            + "' STYLE=\"position:absolute;"
            + "visibility:hidden\">"
            + htmlStr
            + "</DIV>";

            document.body.insertAdjacentHTML("BeforeEnd",txt);

        elem = document.all[xName];
    }
    else
    if (document.getElementById)
    {
        var xName="xLayer" + JSFX.layerNo++;
        var txt = ""
            + "position:absolute;"
            + "visibility:hidden";

        var newRange = document.createRange();

        elem = document.createElement("DIV");
        elem.setAttribute("style",txt);
        elem.setAttribute("id", xName);

        document.body.appendChild(elem);

        newRange.setStartBefore(elem);
        strFrag = newRange.createContextualFragment(htmlStr);   
        elem.appendChild(strFrag);
    }

    return elem;
}
JSFX.Layer = function(newLayer)
{
    if(!newLayer)
        return;

    if(typeof newLayer == "string")
        this.elem = JSFX.createElem(newLayer);
    else
        this.elem=newLayer;

    if(document.layers)
    {
        this.images=this.elem.document.images;
        this.style = this.elem;
     }
    else
    {
        this.images  = document.images;
        this.style   = this.elem.style;
    }
}
var ns4 = (navigator.appName.indexOf("Netscape") != -1 && !document.getElementById);
JSFX.Layer.prototype.moveTo = function(x,y)
{
    this.style.left = x+"px";
    this.style.top = y+"px";
}
if(ns4)
    JSFX.Layer.prototype.moveTo = function(x,y) { this.elem.moveTo(x,y); }
JSFX.Layer.prototype.show        = function()     { this.style.visibility = "visible"; }
JSFX.Layer.prototype.hide        = function()     { this.style.visibility = "hidden"; }
if(ns4)
{
    JSFX.Layer.prototype.show        = function()     { this.style.visibility = "show"; }
    JSFX.Layer.prototype.hide         = function()     { this.style.visibility = "hide"; }
}
if(document.all)
{
    JSFX.Layer.prototype.setOpacity = function(pc)
    {
        if(this.style.filter=="")
            this.style.filter="alpha(opacity=100);";
        this.elem.filters.alpha.opacity=pc;
    }
}
else
    JSFX.Layer.prototype.setOpacity = function(pc) {return 0;}
JSFX.Browser = new Object();

if(navigator.appName.indexOf("Netscape") != -1)
{
    JSFX.Browser.getCanvasWidth    = function() {return innerWidth;}
    JSFX.Browser.getCanvasHeight    = function() {return innerHeight;}
    JSFX.Browser.getMinX        = function() {return(pageXOffset);}
    JSFX.Browser.getMinY        = function() {return(pageYOffset);}
    JSFX.Browser.getMaxX        = function() {return(pageXOffset+innerWidth);}
    JSFX.Browser.getMaxY        = function() {return(pageYOffset+innerHeight);}
}
else     if(document.all)
{
    JSFX.Browser.getCanvasWidth    = function() {return document.body.clientWidth;}
    JSFX.Browser.getCanvasHeight    = function() {return document.body.clientHeight;}
    JSFX.Browser.getMinX        = function() {return(document.body.scrollLeft);}
    JSFX.Browser.getMinY        = function() {return(document.body.scrollTop);}
    JSFX.Browser.getMaxX        = function() {
        return(document.body.scrollLeft
            +document.body.clientWidth);
    }
    JSFX.Browser.getMaxY        = function() {
            return(document.body.scrollTop
                +document.body.clientHeight);
    }
}
JSFX.Halloween = new Object();
JSFX.Halloween.Ghosts = new Array();
JSFX.Halloween.start = function()
{
    if(JSFX.Halloween.theTimer == null)
    {
        JSFX.Halloween.theTimer = setTimeout("JSFX.Halloween.animateAll()", 40);
    }
}
JSFX.Halloween.animateAll = function()
{
    JSFX.Halloween.theTimer = setTimeout("JSFX.Halloween.animateAll()", 40);
    var sp = JSFX.Halloween.Ghosts;
    var i;
    for(i=0 ; i<sp.length ; i++)
    {
        sp[i].animate();
    }

}
JSFX.AddGhost = function(img)
{
    var myGhost = null;
    var htmlStr = "<IMG SRC='"+img+"'>";

    myGhost = new JSFX.Layer(htmlStr);
    myGhost.op = 0;
    myGhost.x = Math.random()*JSFX.Browser.getMaxX();
    myGhost.y = Math.random()*JSFX.Browser.getMaxY();
    myGhost.dx = 0;
    myGhost.dy = 0;
    myGhost.w = 30;
    myGhost.h = 30;
    myGhost.targetX = Math.random()*JSFX.Browser.getMaxX();
    myGhost.targetY = Math.random()*JSFX.Browser.getMaxY();
    myGhost.state = "off"
    myGhost.animate = JSFX.animateGhosts;
    myGhost.hide();
    myGhost.setOpacity(this.op);
    myGhost.moveTo(myGhost.x,myGhost.y);
    JSFX.Halloween.Ghosts[JSFX.Halloween.Ghosts.length] = myGhost;
    JSFX.Halloween.start();
}
JSFX.animateGhosts = function()
{
    if(this.state == "off")
    {
        if(Math.random() > .99)
        {
            this.state="up";
            this.show();
        }
    }
    else if(this.state == "on")
    {
        if(Math.random() > .98)
            this.state="down";
    }
    else if(this.state == "up")
    {
        this.op += 2;
        this.setOpacity(this.op);
        if(this.op==100)
            this.state = "on";
    }
    else if(this.state == "down")
    {
        this.op -= 2;
        if(this.op==0)
        {
            this.hide();
            this.state = "off";
        }
        else
            this.setOpacity(this.op);
    }

    m = this;
    var X = (this.targetX - m.x);
    var Y = (this.targetY - m.y);
    var len = Math.sqrt(X*X+Y*Y);
    if(len < 1) len = 1;
    var dx = 20 * (X/len);
    var dy = 20 * (Y/len);
    var ddx = (dx - this.dx)/10;
    var ddy = (dy - this.dy)/10;
    this.dx += ddx;
    this.dy += ddy;
    m.x += this.dx;
    m.y += this.dy;
    m.moveTo(m.x, m.y);
    if(Math.random() >.95 )
    {
        this.targetX = Math.random()*(JSFX.Browser.getCanvasWidth()-150);
        this.targetY = Math.random()*(JSFX.Browser.getCanvasHeight()+JSFX.Browser.getMinY()-150);
    }
}

</SCRIPT>
<SCRIPT LANGUAGE="JavaScript">
function JSFX_StartEffects()
{
if (!document.all&&!document.layers)
return
JSFX.AddGhost("img/giu.gif");
JSFX.AddGhost("img/giu4.gif");
JSFX.AddGhost("img/giu2.gif");

JSFX.AddGhost("img/giu1.gif");
JSFX.AddGhost("img/giu5.gif");
}
</SCRIPT>

第二步:在<body>中加入以下代码:
onLoad="JSFX_StartEffects()"
即:<body onLoad="JSFX_StartEffects()">

 

[返回上一页] [打印让你的网页飞翔着蝴蝶]
上一篇特效:一个恶作剧的例子
下一篇特效:默林魔法老人代码
     
| 关于本站 | 服务条款 | 友情连接 | 网站地图 | 联系方式 | 广告联系 |