zepto.textSlider.js 2.5 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677
  1. (function($){
  2. $.fn.textSlider = function(options){
  3. //默认配置
  4. var defaults = {
  5. speed:40, //滚动速度,值越大速度越慢
  6. line:1 //滚动的行数
  7. };
  8. var opts = $.extend({}, defaults, options);
  9. var $timer;
  10. function marquee(obj, _speed){
  11. var top = 0;
  12. var margintop;
  13. $timer = setInterval(function(){
  14. top++;
  15. margintop = 0-top;
  16. obj.find("ul").animate({
  17. marginTop: margintop
  18. },0,function(){
  19. var s = Math.abs(parseInt($(this).css("margin-top")));
  20. if(s >=obj.find("li").height()){
  21. top = 0;
  22. $(this).css("margin-top", 0); //确保每次都是从0开始,避免抖动
  23. $(this).find("li").slice(0, 1).appendTo($(this));
  24. }
  25. });
  26. }, _speed);
  27. }
  28. this.each(function(){
  29. var speed = opts["speed"],line = opts["line"],_this = $(this);
  30. var $ul =_this.find("ul");
  31. if($ul.height() > _this.height()){
  32. marquee(_this, speed);
  33. }
  34. //触摸开始
  35. _this.on('touchstart', function(ev){
  36. //ev.preventDefault();
  37. clearInterval($timer);
  38. });
  39. //向上滑动
  40. _this.on('swipeup', function(ev){
  41. //ev.preventDefault();
  42. clearInterval($timer);
  43. if($ul.height() > _this.height()){
  44. for(i=0;i<opts.line;i++){
  45. $ul.find("li").first().appendTo($ul);
  46. }
  47. $ul.css("margin-top",0);
  48. }
  49. });
  50. //向下滑动
  51. _this.on('swipedown', function(ev){
  52. //ev.preventDefault();
  53. clearInterval($timer);
  54. if($ul.height() > _this.height()){
  55. for(i=0;i<opts.line;i++){
  56. $ul.find("li").first().before($ul.find("li").last());
  57. }
  58. $ul.css("margin-top",0);
  59. }
  60. });
  61. //触摸结束
  62. _this.on('touchend',function(ev){
  63. //ev.preventDefault();
  64. if($ul.height() > _this.height()){
  65. marquee(_this, speed);
  66. }
  67. });
  68. });
  69. }
  70. })(Zepto);