ホームページ  >  記事  >  ウェブフロントエンド  >  jQuery_jqueryをベースにした無限ループスクロール実装コードのお知らせ

jQuery_jqueryをベースにした無限ループスクロール実装コードのお知らせ

WBOY
WBOYオリジナル
2016-05-16 17:53:461045ブラウズ

在線演示:http://demo.jb51.net/js/2012/callboard/
jQuery代码

复制代 代码如下:

//第二版:Newton 改造
(function (win){
var callboarTimer;
var callboard = $(' #callboard');
var callboardUl = callboard.find('ul');
var callboardLi = callboard.find('li');
var initHeight = callboardLi.first().outerHeight(true);
win.autoAnimation = function (){
if (liLen var callboardLiFirst = callboard.find('li').first();
callboardLiFirst.animate({
marginTop:-initHeight
}, 500, function (){
clearTimeout(callboarTimer);
callboardLiFirst.appendTo(callboardUl).css({marginTop:0});
callboarTimer(self, 5000);
callboard.mouseenter(
function (){
clearTimeout(callboarTimer);
}).mouseleave(function (){
callboarTimer = setTimeout(win.autoAnimation, 5000);
}) ;
}(ウィンドウ));
setTimeout(window.autoAnimation, 5000);


HTML代:



复制代
代記入如下:


  • 公告:前端组上線上一个月零八天,PR升3,BD权重1




  • CSS代記入:(必要に応じて另设)



    复制代記入
    代記入如下: #callboard { 高さ:24px;行の高さ:24px; overflow:hidden;} #callboard ul {padding:0;}
    #callboard li {padding:0;}


    完整演演代:



    复制代码
    代码如下:





    滚アニメーション公告栏










    声明:
    この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。