php文字滚动特效,jq实现文字div块状无缝上移滚动效果

标题块的无缝上移的jq动画效果的实现

• php
• mysql
• linux

var wuf;

//无缝上移动画函数

function wufeng(){

//设置定时器实现不停上移

wuf = setInterval(function(){

//把整个内容的列表div整体往上移动一个标题的高度动画

$('.caselink').animate({marginTop:'-24px'},1000,function(){

//移动后把第一个遮住的li移动到整个内容div里面的最小面去，就是把第一个li放到最后一个li位置

$(this).children('li').eq(0).appendTo('.caselink');

//然后把整个内容的div设置回来,这时候原来的第二个li在第一的位置

$(this).css('margin-top','0px');

});

},1500);

}

//鼠标移动内容上时清理定时器，停止滚动，移除继续调用

$('.caselink').hover(function(){

clearInterval(wuf);

},function(){

wufeng();

});

//默认执行

wufeng();

整体效果的实现就是通过 setInterval 定时器不停的执行当前div jq 动画上移一个内容列表标题的一个高度，然后把第一个标题填充到整个内容的内末尾的同时把整个div 没动画的下移到原来的位置，整个过程就是不停的动画上移内容，把一个标题放到底部同时内容位置还原的一系列动作。