實(shí)現(xiàn)的動(dòng)畫效果:
1)文字上下循環(huán)定時(shí)滾動(dòng)
2)文字左右循環(huán)滾動(dòng),懸浮時(shí)停止?jié)L動(dòng)
3)懸浮導(dǎo)航顯示隱藏內(nèi)容

項(xiàng)目收獲和問題
①文字左右循環(huán)滾動(dòng)時(shí)會(huì)隱藏部分內(nèi)容
②導(dǎo)航中隱藏的相應(yīng)內(nèi)容的顯示不能完全同步

效果圖:

更多詳細(xì)代碼源文件請(qǐng)?jiān)L問鏈接: http://download.csdn.net/detail/viciousdear/8609821

相應(yīng)的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; } //獲取元素的橫坐標(biāo) 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);

【文字垂直滾動(dòng).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);

【文字水平滾動(dòng).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);

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。