我们用心服务每一个客户

Our intention to service each customer

诚实 守信 专业 专注

在线咨询在线咨询

LI无缝滚动代码（上下及左右）

更新时间：　点击：0
您当前的位置：主页 > 技术文档 > 网页特效 >
[html]
 
  1. <script type="text/javascript">
  2. $(function () {
  3. //奇数背景设置为灰色
  4. //$('.box1 li:even,.box2 li:even,.box3 li:even').css({ backgroundColor: "gray" });
  5.  
  6. $(".box1").Scroll({ direction: "y" }); //设置为纵向滚动
  7. $(".box2").Scroll(); //默认横向滚动
  8. $(".box3").Scroll();
  9. });
  10. </script>
  11. 以下面JS引入，以上JS调用
  12. <script>
  13. (function ($) {
  14. $.fn.Scroll = function (options) {
  15. //将当前上下文对象存入root
  16. var root = this;
  17.  
  18. //默认配置
  19. var settings = {
  20. speed: 40, //滚动速度,值越大速度越慢
  21. direction: "x" //滚动方向("x"或者"y" [x横向;y纵向])
  22. };
  23.  
  24. //不为空，则合并参数
  25. if (options)
  26. $.extend(settings, options);
  27.  
  28.  
  29. var timer = []; //计时器
  30. var marquee; //滚动器(函数)
  31. var isRoll; //判断是否滚动(函数)
  32.  
  33. var _ul = $("> ul", root); //ul标签
  34. var _li = $("> ul > li", root); //li标签(集合)
  35.  
  36. var li_num = _li.length; //li标签个数
  37. var li_first = _li.first(); //获取单个li标签
  38.  
  39.  
  40. //判断为纵向还是横向，并进行相应操作
  41. if (settings.direction == "x") {
  42. 　　　　　　　
  43. 　　　　　　 var li_w = li_first.outerWidth(true); //单个li标签的宽度
  44. 　　　　　　 var ul_w = li_w * li_num; 　　　　　　 //ul标签的宽度
  45.  
  46. _ul.css({ width: ul_w }); //设置ul宽度
  47.  
  48. marquee = function () {
  49. _ul.animate({ marginLeft: "-=1" }, 0, function () {
  50. var _mleft = Math.abs(parseInt($(this).css("margin-left")));
  51. if (_mleft > li_w) { //滚动长度一旦大于单个li的长度
  52. $("> li:first", $(this)).appendTo($(this)); //就把第一个li移到最后
  53. $(this).css("margin-left", 0); //滚动长度归0
  54. }
  55. });
  56. };
  57. //ul长度小于box长度时则不滚动，反之滚动
  58. isRoll = function (t) {
  59. if (ul_w <= root.width())
  60. clearInterval(t);
  61. else
  62. marquee();
  63. }
  64. }
  65. else {
  66. 　　　　　　 var li_h = li_first.outerHeight(true); //单个li标签的高度
  67. 　　　　　　 var ul_h = li_h * li_num; //ul标签的高度
  68.  
  69. _ul.css({ height: ul_h }); //设置ul高度
  70.  
  71. marquee = function () {
  72. _ul.animate({ marginTop: "-=1" }, 0, function () {
  73. var _mtop = Math.abs(parseInt($(this).css("margin-top"))); //取绝对值
  74. if (_mtop > li_h) {
  75. $("> li:first", $(this)).appendTo($(this));
  76. $(this).css("margin-top", 0);
  77. }
  78. });
  79. };
  80. //ul长度小于box长度时则不滚动，反之滚动
  81. isRoll = function (t) {
  82. if (ul_h <= root.height())
  83. clearInterval(t);
  84. else
  85. marquee();
  86. }
  87. }
  88.  
  89. //遵循链式原则，并进行初始化
  90. return root.each(function (i) {
  91. //超出内容隐藏，防止用户没写overflow样式
  92. $(this).css({ overflow: "hidden" });
  93.  
  94. timer[i] = setInterval(function () {
  95. isRoll(timer[i]);
  96. }, settings.speed);
  97.  
  98. //鼠标进入停止滚动，离开继续滚动
  99. $(this).hover(function () {
  100. clearInterval(timer[i]);
  101. }, function () {
  102. timer[i] = setInterval(function () {
  103. isRoll(timer[i]);
  104. }, settings.speed);
  105. });
  106.  
  107. });
  108.  
  109. };
  110. })(jQuery);
  111. </script> 
  112.  
  113.  
  114.  
相关标签： 无缝 滚动 代码 上下 及 左右 script type t
武汉网站建设 武汉页维网络科技有限公司
服务热线：18062108535
邮箱：19587582@qq.com
地址：洪山区文化大道555号融科智谷C2楼

如果您想和我们联系

热线电话： 18062108535

商务咨询 售后咨询

服务时间：周一至周五 早上9：00至下午17：00

页维微信
微信咨询页维
Copyright © 2009-2029 武汉页维网络科技有限公司(www.yeweiw.com) All Rights Reserved.
鄂公网安备 鄂公网安备 42011102005606号 鄂ICP备2024069953号-1

服务热线

18062108535

提供专业技术服务

页维微信

微信客服