仿海云天网站首页面

最新推荐文章于 2025-09-02 10:07:51 发布

原创最新推荐文章于 2025-09-02 10:07:51 发布 · 899 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#显示 #隐藏 #jQuery

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

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

效果图:

更多详细代码源文件请访问链接: http://download.youkuaiyun.com/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);