实现的动画效果:
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);