注册 | 登陆

您的位置：阿里西西 > 网页特效 > 页面特效 > 详细内容

动态变形的公告窗口『COOL』

稿源：互联网 2022-08-08 14:26:53 点击： 232 撤稿纠错

动态变形的公告窗口，可自定义内容。

以下讨论的是和特效相关的动态变形的公告窗口『COOL』教程文章，内容是本站精心挑选整理的教程，希望对广大的网友给到帮助,下面是详细内容：

脚本代码(For Alixixi.com)如下:

有什么问题请到<a href='/bbs/index.asp?boardid=2'>论坛</a>中发表<br>



<SCRIPT>

function morph(e,wait,steps,style,done){
        if(e.morphing){
                return;
        }
        e.morphing = true;
        e.step = 0;
        e.done = steps;
        e.wait = wait;
        e.morphDone = done;
        var attribs = _eat_attrib(style);
        if(attribs["top"] != null){
                e.deltaTop = Math.round(Number((attribs["top"] - e.style.posTop) / steps));
                e.finalTop = attribs["top"];
        }else{
                e.deltaTop = null;
                e.finalTop = e.style.posTop;
        }
        if(attribs["left"] != null){
                e.deltaLeft = Math.round(Number((attribs["left"] - e.style.posLeft) / steps));
                e.finalLeft = attribs["left"];
        }else{
                e.deltaLeft = null;
                e.finalLeft = e.style.posLeft;
        }
        if(attribs["height"] != null){
                e.deltaHeight = Math.round(Number((attribs["height"] - e.style.posHeight) / steps));
                e.finalHeight = attribs["height"];
        }else{
                e.deltaHeight = null;
                e.finalHeight = e.style.posHeight;
        }
        if(attribs["width"] != null){
                e.deltaWidth = Math.round(Number((attribs["width"] - e.style.posWidth) / steps));
                e.finalWidth = attribs["width"];
        }else{
                e.deltaWidth = null;
                e.finalWidth = e.style.posWidth;
        }
        e.colors = new Array();
        for(attrib in attribs){
                if(attrib == "background"){
                                e.colors[e.colors.length] = new Array();
                                e.colors[e.colors.length - 1].name = attrib;
                                e.colors[e.colors.length - 1].safename = attrib;
                }
                if(attrib == "color"){
                                e.colors[e.colors.length] = new Array();
                                e.colors[e.colors.length - 1].name = attrib;
                                e.colors[e.colors.length - 1].safename = attrib;
                }
                if(attrib == "border-color"){
                                e.colors[e.colors.length] = new Array();
                                e.colors[e.colors.length - 1].name = attrib;
                                e.colors[e.colors.length - 1].safename = "borderColor";
                }
        }
        for(var i=0;i<e.colors.length;i++){
                var rgb = _eat_rgb(attribs[e.colors[i].name]);
                var prergb = _eat_rgb(e.style[e.colors[i].safename]);
                e.colors[i].delta = _eat_rgb(attribs[e.colors[i].name]);
                e.colors[i].finish = _eat_rgb(attribs[e.colors[i].name]);
                e.colors[i].delta["red"] = Math.round(Number((rgb["red"] - prergb["red"]) / steps));
                e.colors[i].delta["green"] = Math.round(Number((rgb["green"] - prergb["green"]) / steps));
                e.colors[i].delta["blue"] = Math.round(Number((rgb["blue"] - prergb["blue"]) / steps));
        }
        setTimeout("_morphing(document.all." + e.id + ")", wait);
}
function _morphing(e){
        e.step++;
        if(e.deltaTop!=null){
                e.style.posTop += e.deltaTop;
        }
        if(e.deltaLeft!=null){
                e.style.posLeft += e.deltaLeft;
        }
        if(e.deltaHeight!=null){
                e.style.posHeight += e.deltaHeight;
        }
        if(e.deltaWidth!=null){
                e.style.posWidth += e.deltaWidth;
        }
        for(var i=0;i<e.colors.length;i++){
                var rgb = _eat_rgb(e.style[e.colors[i].safename]);
                e.style[e.colors[i].safename]         = "rgb("
                                                + (e.colors[i].delta["red"] + rgb["red"])
                                                + ","
                                                + (e.colors[i].delta["green"] + rgb["green"])
                                                + ","
                                                + (e.colors[i].delta["blue"] + rgb["blue"])
                                                + ")";
        }
        if(e.step == e.done){
                if(e.deltaTop != null)
                        e.style.posTop = e.finalTop;
                if(e.deltaLeft != null)
                        e.style.posLeft = e.finalLeft;
                if(e.deltaWidth != null)
                        e.style.posWidth = e.finalWidth;
                if(e.deltaHeight != null)
                        e.style.posHeight = e.finalHeight;
                for(var i=0;i<e.colors.length;i++){
                        e.style[e.colors[i].safename]         = "rgb("
                                                        + (e.colors[i].finish["red"] + rgb["red"])
                                                        + ","
                                                        + (e.colors[i].finish["green"] + rgb["green"])
                                                        + ","
                                                        + (e.colors[i].finish["blue"] + rgb["blue"])
                                                        + ")";
                }
                e.morphing = false;
                eval(e.morphDone);
        }else{
                setTimeout("_morphing(document.all." + e.id + ")", e.wait);
        }
        return;
}
function _eat_attrib(str){
        var chunks = new Array();
        var all = new Array();

chunks=str.split(";");

for(var i=0;i<chunks.length;i++){
                var tmpA = new Array();
                tmpA=chunks[i].split(":");
                all[tmpA[0]]=tmpA[1];
        }
        return all;
}
function _eat_rgb(str){
        var all = new Array();

var a = str.indexOf("(");
        var b = str.indexOf(")");

str = str.substring(a + 1, b);

var tmpA = str.split(",");

all["red"]=Number(tmpA[0]);
        all["green"]=Number(tmpA[1]);
        all["blue"]=Number(tmpA[2]);

return all;
}
</SCRIPT><SPAN ID="test" STYLE="border:solid;border-width:5;border-color:rgb(0,0,0);color:rgb(255,255,255);position:absolute;top:0;left:0;width:400;height:400;overflow:hidden;background:rgb(0,0,255);">想学网页制作技术,请到阿里西西WEB开发来!
</SPAN>
<SCRIPT>
function rander(){
        var top = Math.round(Math.random() * 400);
        var left = Math.round(Math.random() * 600);
        var width = Math.round(Math.random() * 200);
        var height = Math.round(Math.random() * 200);
        var r = Math.round(Math.random() * 255);
        var g = Math.round(Math.random() * 255);
        var b = Math.round(Math.random() * 255);
        var background = "rgb(" + r + "," + g + "," + b + ")";
        var r = Math.round(Math.random() * 255);
        var g = Math.round(Math.random() * 255);
        var b = Math.round(Math.random() * 255);
        var borderColor = "rgb(" + r + "," + g + "," + b + ")";
        var r = Math.round(Math.random() * 255);
        var g = Math.round(Math.random() * 255);
        var b = Math.round(Math.random() * 255);
        var color = "rgb(" + r + "," + g + "," + b + ")";
        morph(document.all.test,30,20,"top:" + top + ";left:" + left + ";width:" + width + ";height:" + height + ";background:" + background + ";border-color:" + borderColor + ";color:" + color + ";","rander();");
}
rander();
</SCRIPT>

<a href="http://www.alixixi.com/Dev/HTML/jsrun/">欢迎访问阿里西西网页特效集</a>

关于动态变形的公告窗口『COOL』的内容写到这里就结束啦，您可以收藏本页网址https://js.alixixi.com/a/2008071496234.shtml方便下次再访问哦。

·上一篇： 漂亮的窗口特效
·下一篇： 渐显动态公告窗口

相关阅读

文章分类LIST >>返回首页

排行总榜

避免你的邮箱地址被自动收集的代码
有趣的按钮
控制用按钮打开新窗口的属性
单击按钮或图片打开IE首页
点击按钮打印该页
仿软件浮动按钮
在规定时间内方有效的按钮
一个按钮完成对文本框内容的复制
按钮选中文本框内所有内容
Windows式样的按钮

最新游戏

最新新闻