用kissy实现最简单文字不间断滚动-优快云博客

本文介绍如何使用KISSY库实现文字滚动效果。通过设置定时器，利用animate函数改变元素的margin-top属性，并结合appendTo方法实现内容循环滚动。

最近项目用到tae的地方比较多，必须都用淘宝自己的kissy，让习惯于用jquery的我很郁闷，不过我觉得时间长了kissy用起来也会很顺手吧，毕竟相通的地方挺多的。

今天遇到的问题是实现文字的滚动，本来有一套用jquery写的代码，其实跟kissy大同小异的，但是因为对kissy不是很了解，加上tae在kissy的应用上有很多限制，所以只能重写。大概缕了一下思路，原理很简单：将需要滚动的元素放到一个div里，用animate函数改变这个div的margin-top为(-行高)px,再用appendTo方法将需要的滚动的第一条内容放在div最后，将以上代码写入一个function,用setInterval隔一定时间调用就可以。

具体代码如下

如果用kissy首先引入kissy核心文件

setInterval(function(){autoScroll()},1000);

//滚动方法
function autoScroll(){
   $(".list").animate({marginTop:"-22px"}, 1, 'easeNone', function(){
       $(".list p:first").appendTo($(".list"));
        KISSY.DOM.get(".list").style.marginTop="0px";
   });
}

html相关代码

<div class = "taeapp-list" style="line-height:22px; height:100px; width:200px;">
测试滚动1

测试滚动2

测试滚动3

测试滚动4

测试滚动5
</div>

关于kissy匹配第一个元素的方法，在jquery和kissy的对照里写的是juqery的$(".list").find方法等同于$(".list").all这个是正确的，$(".list p:first").find方法等同于$(".list p").one这个是错的，也许是我用的kissy版本比较新，在我的实践中kissy里$(".list p:first")的与juqery里的$(".list:first").find等同，没有.one方法

转载于:https://www.cnblogs.com/txzj/p/3387102.html