bca9fd7f7f7eb195c32d88fee76a79c4c51302f0.svn-base 3.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112
  1. "use strict";
  2. /**
  3. * @classDescription 模拟Marquee,无间断滚动内容
  4. * @author Lyc 修改
  5. * @DOM
  6. * <div id="marquee">
  7. * <ul>
  8. * <li></li>
  9. * <li></li>
  10. * </ul>
  11. * </div>
  12. * @CSS
  13. * #marquee {overflow:hidden;width:200px;height:50px;}
  14. * @Usage
  15. * $("#marquee").kxbdMarquee(options);
  16. * @options
  17. * isEqual:true, //所有滚动的元素长宽是否相等,true,false
  18. * loop:0, //循环滚动次数,0时无限
  19. * direction:"left", //滚动方向,"left","right","up","down"
  20. * scrollAmount:1, //步长
  21. * scrollDelay:20 //时长
  22. */
  23. (function ($) {
  24. $.fn.kxbdMarquee = function (options) {
  25. var opts = $.extend({}, $.fn.kxbdMarquee.defaults, options);
  26. return this.each(function () {
  27. var $marquee = $(this); //滚动元素容器
  28. var _scrollObj = $marquee.get(0); //滚动元素容器DOM
  29. var scrollW = $marquee.width(); //滚动元素容器的宽度
  30. var scrollH = $marquee.height(); //滚动元素容器的高度
  31. var $element = $marquee.children(); //滚动元素
  32. var $kids = $element.children(); //滚动子元素
  33. var scrollSize = 0; //滚动元素尺寸
  34. //滚动类型,1左右,0上下
  35. var _type = opts.direction == "left" || opts.direction == "right" ? 1 : 0;
  36. //防止滚动子元素比滚动元素宽而取不到实际滚动子元素宽度
  37. $element.css(_type ? "width" : "height", 10000);
  38. //获取滚动元素的尺寸
  39. if (opts.isEqual) {
  40. scrollSize = $kids[_type ? "outerWidth" : "outerHeight"]() * $kids.length;
  41. } else {
  42. $kids.each(function () {
  43. scrollSize += $(this)[_type ? "outerWidth" : "outerHeight"]();
  44. });
  45. };
  46. //滚动元素总尺寸小于容器尺寸,不滚动
  47. if (scrollSize < (_type ? scrollW : scrollH)) {
  48. return;
  49. };
  50. //克隆滚动子元素将其插入到滚动元素后,并设定滚动元素宽度
  51. $element.append($kids.clone()).css(_type ? "width" : "height", scrollSize * 2);
  52. var numMoved = 0;
  53. function scrollFunc() {
  54. var _dir = opts.direction == "left" || opts.direction == "right" ? "scrollLeft" : "scrollTop";
  55. if (opts.loop > 0) {
  56. numMoved += opts.scrollAmount;
  57. if (numMoved > scrollSize * opts.loop) {
  58. _scrollObj[_dir] = 0;
  59. return clearInterval(moveId);
  60. };
  61. };
  62. if (opts.direction == "left" || opts.direction == "up") {
  63. var newPos = _scrollObj[_dir] + opts.scrollAmount;
  64. if (newPos >= scrollSize) {
  65. newPos -= scrollSize;
  66. }
  67. _scrollObj[_dir] = newPos;
  68. } else {
  69. var newPos = _scrollObj[_dir] - opts.scrollAmount;
  70. if (newPos <= 0) {
  71. newPos += scrollSize;
  72. };
  73. _scrollObj[_dir] = newPos;
  74. };
  75. };
  76. //滚动开始
  77. var moveId = setInterval(scrollFunc, opts.scrollDelay);
  78. //鼠标划过停止滚动
  79. $marquee.hover(function () {
  80. clearInterval(moveId);
  81. }, function () {
  82. clearInterval(moveId);
  83. moveId = setInterval(scrollFunc, opts.scrollDelay);
  84. });
  85. });
  86. };
  87. $.fn.kxbdMarquee.defaults = {
  88. isEqual: true, //所有滚动的元素长宽是否相等,true,false
  89. loop: 0, //循环滚动次数,0时无限
  90. direction: "left", //滚动方向,"left","right","up","down"
  91. scrollAmount: 1, //步长
  92. scrollDelay: 20 //时长
  93. };
  94. $.fn.kxbdMarquee.setDefaults = function (settings) {
  95. $.extend($.fn.kxbdMarquee.defaults, settings);
  96. };
  97. })(jQuery);
  98. //# sourceMappingURL=jquery.kxbdMarquee.js.map