實現的動畫效果:
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);

總結

以上是生活随笔為你收集整理的仿海云天网站首页面的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。