自己写了一个无缝滚动的插件(jQuery)
2020-11-18 10:04
标签：com http blog style class div img code java c log 效果图: html代码: css代码: js插件代码: 插件的调用: 自己写了一个无缝滚动的插件(jQuery),搜素材,soscw.com 自己写了一个无缝滚动的插件(jQuery) 标签：com http blog style class div img code java c log 原文地址：http://www.cnblogs.com/guoyansi19900907/p/3701206.html
1 h1>无缝滚动,向右滚动h1>
2 ul id="guoul1">
3 li>img src="img/f1.jpg" alt="f1"/>li>
4 li>img src="img/f2.jpg" alt="f2"/>li>
5 li>img src="img/f3.jpg" alt="f3"/>li>
6 li>img src="img/f4.jpg" alt="f4"/>li>
7 li>img src="img/f5.jpg" alt="f5"/>li>
8 li>img src="img/f6.jpg" alt="f6"/>li>
9 li>img src="img/f7.jpg" alt="f7"/>li>
10 ul>
11
12 h1>无缝滚动,向左滚动h1>
13 ul id="guoul2">
14 li>111111111111li>
15 li>222222222222li>
16 li>3333333333333li>
17 li>4444444444444li>
18 li>5555555555555li>
19 li>6666666666666li>
20 li>7777777777777li>
21 li>8888888888888li>
22 li>9999999999999li>
23 ul>
24 h1>无缝滚动,向上滚动h1>
25 ul id="guoul3">
26 li>111111111111li>
27 li>222222222222li>
28 li>3333333333333li>
29 li>4444444444444li>
30 li>5555555555555li>
31 li>6666666666666li>
32 li>7777777777777li>
33 li>8888888888888li>
34 li>9999999999999li>
35 ul>
36 h1>无缝滚动,向下滚动h1>
37 ul id="guoul4">
38 li>111111111111li>
39 li>222222222222li>
40 li>3333333333333li>
41 li>4444444444444li>
42 li>5555555555555li>
43 li>6666666666666li>
44 li>7777777777777li>
45 li>8888888888888li>
46 li>9999999999999li>
47 ul>
48 h1>无缝滚动,非ul,li标签组合,向右滚动h1>
49 div id="guoul5">
50 p>111111111111p>
51 p>222222222222p>
52 p>3333333333333p>
53 p>4444444444444p>
54 p>5555555555555p>
55 p>6666666666666p>
56 p>7777777777777p>
57 p>8888888888888p>
58 p>9999999999999p>
59 div>
60 h1>不动h1>
61 ul id="guoul6">
62 li>111111111111li>
63 li>222222222222li>
64 li>3333333333333li>
65 li>4444444444444li>
66 li>5555555555555li>
67 li>6666666666666li>
68 li>7777777777777li>
69 li>8888888888888li>
70 li>9999999999999li>
71 ul>
1 ul, li,h1 { margin: 0; padding: 0; list-style-type:none;}
2 ul,div { height: 200px; border: 1px solid red; width: 300px; padding: 30px;margin:10px;list-style-type:none;}
3 li,p { height: 30px; line-height: 30px; margin-top: 10px; background-color: Gray; color: Yellow; margin-left:10px;}
4 #guoul1{ width:1000px; height:188px;margin: 0; padding: 0;}
5 #guoul1 li{ width:300px; height:188px;margin: 0; padding: 0; margin-left:10px;}
1 ; (function ($) {
2 var defaults = {
3 dir: "left", //none:不动,up:上,right:右,down:下,right:左
4 delay: 30,//执行时间
5 };
6 $.fn.gysContentDisplay = function (opt) {
7 opt = $.extend({}, defaults, opt);
8
9 //全局变量区域
10 var obj = $(this); //当前对象
11 obj.css({ "overflow": "hidden" }); //初始化元素
12 if (opt.dir == "none") return;
13 var objLis = obj.children(); //对象中的子元素
14 objLis.css({ "overflow": "hidden" });
15 var objSize = 0; //外框尺寸
16 var scrollEvent = "scrollLeft"; //滚动条的滚动方向
17 var liTotalSize = 0, liTotalSizeOther = 0; //每个li元素的尺寸(宽或者高),克隆之后的总尺寸
18 var scrollSize = 0, //滚动条的实际距离
19 scrollSizeMax = 0, //滚动条的最大距离
20 scrollSizeMin = 0; //滚动条的最小距离
21 var interval = ""; //记录setInterval
22
23 if (opt.dir == "up" || opt.dir == "down") {//上下
24 objSize = obj.innerHeight();
25 scrollEvent = "scrollTop";
26 obj.css({ "padding-top": 0, "padding-bottom": 0 }).height(objSize);
27 }
28 else if (opt.dir == "left" || opt.dir == "right") {//左右
29 objSize = obj.innerWidth();
30 scrollEvent = "scrollLeft";
31 obj.css({ "padding-left": 0, "padding-right": 0 }).width(objSize);
32 }
33 else {
34 alert("你的dir参数有误");
35 }
36
37 var getChildTotalSize = function (dir) {// 定义获取li总尺寸的方法
38 if (dir == "left" || dir == "right") {
39 objLis.css("float", "left");
40 return function () {
41 objLis.each(function () {
42 liTotalSize += $(this).outerWidth(true);
43 });
44 }
45 }
46 else if (dir == "up" || dir == "down") {
47 objLis.css("float", "none");
48 return function () {
49 objLis.each(function () {
50 liTotalSize += $(this).outerHeight(true);
51 });
52 }
53 }
54 } (opt.dir);
55 getChildTotalSize(); //获得所有的li的总尺寸,在方法中赋值
56
57 (function () {
58 var cloneCount = Math.ceil(objSize * 2 / liTotalSize); //赋值子元素多少遍
59 var cloneHtmlNow = "", cloneHtmlStart = obj.html(); //原始的子元素字符串
60
61 for (var i = 0; i ) {
62 cloneHtmlNow += cloneHtmlStart;
63 }
64 obj.append(cloneHtmlNow);
65 liTotalSizeOther = (cloneCount + 1) * liTotalSize; //获取添加了子元素之后的长度
66 })();
67
68
69 if (opt.dir == "left" || opt.dir == "right") {
70 obj.css({ "position": "relative", "z-index": 0 });
71 obj.children().css({ "position": "absolute", "z-index": 1 });
72 var left = 0;
73 obj.children().each(function () {
74 $(this).css({ "left": left + "px", "top": 0 });
75 left += $(this).outerWidth(true);
76 });
77 }
78
79
80 //滚动条的滚动方法
81 function scrollChange(dir) {
82 if (dir == "left" || dir == "up") {
83 obj[scrollEvent](0);
84 scrollChange = function () {
85 scrollSize++;
86 if (scrollSize >= liTotalSize) scrollSize = 0;
87 obj[scrollEvent](scrollSize);
88 }
89 }
90 else if (dir == "right" || dir == "down") {
91 scrollSizeMax = liTotalSizeOther - objSize;
92 obj[scrollEvent](scrollSizeMax);
93 scrollSize = scrollSizeMax;
94 scrollSizeMin = scrollSizeMax - liTotalSize;
95 scrollChange = function () {
96 scrollSize--;
97 if (scrollSize scrollSizeMax;
98 obj[scrollEvent](scrollSize);
99 }
100 }
101 };
102 scrollChange(opt.dir);
103 interval = setInterval(scrollChange, opt.delay);
104 obj.children().on("mouseover", function () {
105 clearInterval(interval);
106 }).on("mouseleave", function () {
107 interval = setInterval(scrollChange, opt.delay);
108 });
109 }
110 })(jQuery);
1 $(function () {
2 $("#guoul1").gysContentDisplay({ dir: "right" });
3 $("#guoul2").gysContentDisplay({ dir: "left" });
4 $("#guoul3").gysContentDisplay({ dir: "up" });
5 $("#guoul4").gysContentDisplay({ dir: "down" });
6 $("#guoul5").gysContentDisplay({ dir: "right" });
7 $("#guoul6").gysContentDisplay({ dir: "none" });
8 })
上一篇：js去java的变量
下一篇：Python环境右键定制