续:一个WEB前端网站首页信息排行的特效

大概的效果请先看看图啦:


不过因为时间及其它关系该效果还没有测试,还不知道在IE7以外的游览器是否OK,有兴趣的朋友,可以帮忙看看呵!~
闲话就不多了呵,先上一段其实我每次都会有选择性用到的代码:

var $D = new Function('str','return document.getElementById(str);');
var $event = new Function('e','return (!e)?window.event:e;'); //这句算是我写的比较得意的一句话了
var getNodes = new Function('stri','return (navigator.appName.indexOf("Explorer")<0)?stri*2-1:stri-1;');
var getNodenum = new Function('stri','return (navigator.appName.indexOf("Explorer")<0)?((stri-1)/2):stri;');
var AutotabNum = new Function('iNum,ilength,stype','return (stype=="left")?((iNum==1)?ilength:iNum-1):((iNum==ilength)?1:iNum+1);'); //这三句是关于不同游览器对节点的判断兼容
var isautoplay,splay,slasttime = gettimes(),snowtime,ismove = false;
function gettimes(){var now = new Date();return now.getTime();}
function bind(o,ev,fn){if (document.all)o.attachEvent('on'+ev,fn);else o.addEventListener(ev,fn,false);}


主要的代码大家来看看,整个思路就是文章列表的切换,类似TAB一样,只是内容的出现与消失有过滤状态,而标题也有滑动效果。
function nAutoplay(objid){
    if (isautoplay){
        splay =  setInterval(function(){
            if (isautoplay){
                snowtime = gettimes();
                var iDays=parseInt(Math.abs(slasttime-snowtime)); //相差的毫秒
                if (iDays>6000)nAutoTabs(objid,'right');
            }
        },1500);
    }
        $D(objid).childNodes[getNodes(2)].onmouseover=function(){
            if (isautoplay){
                ismove = true;
                isautoplay = false;
                this.onmouseout = function(){
                    if (ismove) isautoplay = true;
                    ismove = false;
                }
            }
        }
}

function setnAutoplay(objid,stype,stype1){
    if (stype==1){
        isautoplay = true;
        nAutoplay('rigtab02')
        $D(objid+"_check1").style.display = "block";
        $D(objid+"_check2").style.display = "none";
    }else if (stype==0) {
        isautoplay = false;
        $D(objid+"_check1").style.display = "none";
        $D(objid+"_check2").style.display = "block";
    }
}
function nAutoTabs(thisObj,stype){
    slasttime = gettimes();
    var tabtit = $D(thisObj).childNodes[getNodes(1)];
    var tablist = $D(thisObj).childNodes[getNodes(2)];
    var teblength = getNodenum(tabtit.childNodes.length);
    for(var i=1; i <= teblength; i++){
        if (tabtit.childNodes[getNodes(i)].className == "active" )nowi = i;
    }
    var nowii = AutotabNum(nowi,teblength,stype);
    fade(thisObj,'1','0',nowi,nowii,stype);
}


// 淡入淡出函数
function fade(id,c1,c2,iNum1,iNum2,stype){
    var releft;
    var dur = 4;                // 淡入淡出步数
    var txt = $D(id).childNodes[getNodes(2)].childNodes[getNodes(iNum1)];
    var tit = $D(id).childNodes[getNodes(1)].childNodes[getNodes(iNum1)];
    var filters = 99;
    if (c1=="0") {
        with(txt.style){
            filter = "alpha(opacity=1)"; KHTMLOpacity = "0.01";
            MozOpacity = "0.01";opacity = "0.01";
            display = "block";
        }
        filters=1;
    }
    var st=0,sTimer = setInterval(function(){
        if(st<=dur&&filters>0&&filters<100){
            filters = (c1=="1")?filters - 20:filters += 20;
            with(txt.style){
                filter = "alpha(opacity="+filters+")"; KHTMLOpacity = filters/100;
                MozOpacity = filters/100;opacity = filters/100;
            }
        } else {
            clearInterval(sTimer);
            if (c1=="1"){
                txt.style.display = "none";
                var mleft = 0;
                releft = (stype=="left")?80:-80;
                var stTimer = setInterval(function(){
                    mleft = (stype == "left")?mleft + 20:mleft - 20;
                    if (Math.abs(mleft)<120){
                        tit.style.margin="0 0 0 "+mleft+"px";
                    }else{
                        clearInterval(stTimer);
                        tit.style.margin="0 0 0 -80px";
                        tit.className = "";
                    }
                },30);
            }
            if (iNum2>0){
                fade(id,'0','1',iNum2,'0',stype);
            }else {
                with(txt.style){
                    filter = "alpha(opacity=100)"; KHTMLOpacity = "1";
                    MozOpacity = "1";opacity = "1";
                }
                var mleft = (stype == "left")?-80:80;
                tit.style.margin="0 0 0 "+mleft+"px";
                tit.className = "active";
                var stTimer = setInterval(function(){
                    if (Math.abs(mleft)>10){
                        mleft = (stype=="left")? mleft + 20:mleft - 20;
                        tit.style.margin="0 0 0 "+mleft+"px";
                    }else{
                        clearInterval(stTimer);
                        tit.style.margin="0 0 0 0";
                    }
                },30);
            }
        }
        st++;
    },50);
}


所需要用到的图片:


最后大家来LOOK演示了:
HTML代码


[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]



aiver[2009-07-02 04:01 PM]del回复
Is so good!
hayden[2008-06-27 03:59 PM]del回复
呵呵,被BOSS逼的,没办法啊
zch123.cn[2008-06-27 02:41 PM]del回复
在Firefox3.0里效果完全正常。
真牛。收藏一下这代码。
发表评论
Name (required)
PassWord(游客发言不需要密码.)

虽然发表评论不用注册,但是为了保护您的发言权,建议您注册帐号.