音乐吧 - www.52290.com

 找回密码
 注册

QQ登录

只需一步,快速开始

查看: 3242|回复: 0

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

[复制链接]

1056

主题

1090

帖子

1万

积分

管理员

Rank: 9Rank: 9Rank: 9

音乐币
101
贡献
537
金钱
4461
威望
2120
相册
1

推广达人宣传达人突出贡献荣誉管理最佳新人活跃会员

QQ
发表于 2020-11-3 12:56:17 | 显示全部楼层 |阅读模式

马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

您需要 登录 才可以下载或查看,没有帐号?注册

x
标题块的无缝上移的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 没动画的下移到原来的位置,整个过程就是不停的动画上移内容,把一个标题放到底部同时内容位置还原的一系列动作。
您需要登录后才可以回帖 登录 | 注册

本版积分规则

QQ|小黑屋|手机版|Archiver|版权声明|001科技| 音乐吧 52290 ( 桂ICP备2021006182号 )

GMT+8, 2024-12-22 09:11 , Processed in 0.040407 second(s), 25 queries .

Powered by Discuz! X3.4

© 2001-2023 07726.Com Inc.

快速回复 返回顶部 返回列表