仿海云天网站首页面

来源：互联网发布：网络直播节目策划方案编辑：程序博客网时间：2024/04/29 04:38

实现的动画效果:
1)文字上下循环定时滚动
2)文字左右循环滚动,悬浮时停止滚动
3)悬浮导航显示隐藏内容

项目收获和问题
①文字左右循环滚动时会隐藏部分内容
②导航中隐藏的相应内容的显示不能完全同步

效果图:

更多详细代码源文件请访问链接: http://download.csdn.net/detail/viciousdear/8609821

悬浮导航显示隐藏内容
相应的javascript文件
【nav.js】

(function($){    $(document).ready(function(){        spanList = aboutUs.getElementsByTagName("span");        subSpanFocusFlag = false;        for(var i = 0; i < spanList.length; i++){            $(spanList[i]).hover(                function(){                    subSpanFocusFlag = true;                },                function(){                    subSpanFocusFlag = false;                    setTimeout(function(){                    if(subSpanFocusFlag == false){                        $('.navSon').css({'display':'none'});                        $('#aboutUs').css({'display':'none'});                    }                },100);                });             }        $('#aboutUsFather').hover(            function(){                var leftPosition = parseFloat(getXLeft('aboutUsFather')-100) + 'px';                //alert(getXLeft('aboutUsFather'));                $('.navSon').css({                    'display':'block'                });                $('#aboutUs').css({                    'display':'block',                    'left':leftPosition                });            },            function(){                setTimeout(function(){                    if(subSpanFocusFlag == false){                        $('.navSon').css({'display':'none'});                        $('#aboutUs').css({'display':'none'});                    }                },200);             }        );    });    function getYTop(e){         var offset=$('#'+e).offset().top;        if(e.offsetParent!=null)             offset+=getYTop($('#'+e).offset().offsetParent);        return offset;    }     //获取元素的横坐标     function getXLeft(e){         var offset=$('#'+e).offset().left;        return offset;    }     function getNumFromStringCarryPX(strSource){        if(strSource.indexOf("px") > 0){            return parseInt(strSource.split("px")[0]);        }else{            return parseInt(strSource);        }    }})(jQuery);

【文字垂直滚动.js】
这里写图片描述

(function ($){    $(document).ready(function(){        $("#secondCircle").html($("#topCircle").html());        firstUl=$("#topCircle");        secondUl=$("#secondCircle");        setTimeout (runnable, 1000);    });    var runnable = function ()    {        var top = parseFloat (firstUl.css ("top"));        var top2 = parseFloat(secondUl.css("top"));        if(Math.abs(top) <= firstUl.height() - 25){            top -= 25;            top2 -= 25;            firstUl.animate({'top':top+'px'},500);            secondUl.animate({'top':top2+'px'},500);            setTimeout (arguments.callee, 2000);        }else{            firstUl.css("top",0+"px");            z = firstUl;            firstUl = secondUl;            secondUl = z;            setTimeout (arguments.callee, 10);        }    }       })(jQuery);

【文字水平滚动.js】
这里写图片描述

(function ($){    $(document).ready(function(){        $("#newsContent2").html($("#newsContent1").html());        firstSpan=$("#newsContent1");        secondSpan=$("#newsContent2");        secondSpan.css("left",firstSpan.width());        $('#spanDiv').hover(            function(){                clearTimeout(spanTimeOut);            }            ,            function(){                runnableLeft();            }        );        spanTimeOut = setTimeout (runnableLeft, 100);    });    var runnableLeft = function ()    {        var left = parseFloat (firstSpan.css ("left"));        var left2 = parseFloat(secondSpan.css("left"));        if(Math.abs(left) <= firstSpan.width()){            left -= 5;            left2 -= 5;            firstSpan.animate({'left':left+'px'},50);            secondSpan.animate({'left':left2+'px'},50);            spanTimeOut = setTimeout (arguments.callee, 100);        }else{            firstSpan.css("left",secondSpan.width()+"px");            tempSpan = firstSpan;            firstSpan = secondSpan;            secondSpan = tempSpan;            spanTimeOut = setTimeout (arguments.callee, 100);        }    }})(jQuery);

0 0