├── README.md
├── bower.json
├── css
├── liMarquee.css
└── style.css
├── examples
├── change_speed.html
├── default.html
├── destroy.html
├── drag_line_off.html
├── from_left_to_right.html
├── hover_stop_off.html
├── image.html
├── index.html
├── move_html.html
├── pause_and_play.html
├── text.xml
├── update.html
├── vertical.html
└── xml.html
├── js
└── jquery.liMarquee.js
└── package.json
/README.md:
--------------------------------------------------------------------------------
1 | # jquery.limarquee
2 | github repository http://masscode.ru/index.php/k2/item/44-limarquee
3 |
--------------------------------------------------------------------------------
/bower.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "jquery.liMarquee",
3 | "version": "4.6.0",
4 | "main": "js/jquery.liMarquee.js",
5 | "ignore": [
6 | "**/.*",
7 | "node_modules",
8 | "bower_components"
9 | ],
10 | "dependencies": {
11 | "jquery": "^1.9||^2.0"
12 | },
13 | "homepage": "http://masscode.ru/index.php/k2/item/44-limarquee",
14 | "authors": [
15 | "Linnik Yura"
16 | ],
17 | "description": "A jQuery plugin that help you made running content",
18 | "keywords": [
19 | "marquee",
20 | "text",
21 | "slider",
22 | "limarquee"
23 | ]
24 | }
25 |
--------------------------------------------------------------------------------
/css/liMarquee.css:
--------------------------------------------------------------------------------
1 | /*Plugin CSS*/
2 | .str_wrap {
3 | overflow:hidden;
4 | //zoom:1;
5 | width:100%;
6 | font-size:12px;
7 | line-height:16px;
8 | position:relative;
9 | -moz-user-select: none;
10 | -khtml-user-select: none;
11 | user-select: none;
12 | background:#f6f6f6;
13 | white-space:nowrap;
14 | }
15 |
16 | .str_wrap.str_active {
17 | background:#f1f1f1;
18 | }
19 | .str_move {
20 | white-space:nowrap;
21 | position:absolute;
22 | top:0;
23 | left:0;
24 | cursor:move;
25 | }
26 | .str_move_clone {
27 | display:inline-block;
28 | //display:inline;
29 | //zoom:1;
30 | vertical-align:top;
31 | position:absolute;
32 | left:100%;
33 | top:0;
34 | }
35 | .str_vertical .str_move_clone {
36 | left:0;
37 | top:100%;
38 | }
39 | .str_down .str_move_clone {
40 | left:0;
41 | bottom:100%;
42 | }
43 | .str_vertical .str_move,
44 | .str_down .str_move {
45 | white-space:normal;
46 | width:100%;
47 | }
48 | .str_static .str_move,
49 | .no_drag .str_move,
50 | .noStop .str_move{
51 | cursor:inherit;
52 | }
53 | .str_wrap img {
54 | max-width:none !important;
55 | }
--------------------------------------------------------------------------------
/css/style.css:
--------------------------------------------------------------------------------
1 | body {
2 | color: #000;
3 | font: 13px/1.6em Arial, Helvetica, sans-serif;
4 | margin: 0;
5 | padding: 0 10px;
6 | border:100px solid #0769AD;
7 | border-width:0 100px;
8 | background:#000;
9 | }
10 | a {color:#0769AD; text-decoration:underline;}
11 | .conteiner {
12 | margin: auto;
13 |
14 | text-align:center;
15 | padding:10px 0 10px 0;
16 | position:relative;
17 | }
18 | .header {
19 | background: none;
20 | margin: 0;
21 | padding: 10px 0;
22 | text-align: left;
23 | height:72px;
24 | position:fixed;
25 | bottom:0;
26 | left:0;
27 | }
28 | .autor {
29 | left: -112px;
30 | position: fixed;
31 | top: 50%;
32 | margin-top:-45px;
33 |
34 | }
35 | .logoMass {
36 | color:#fff;
37 | }
38 | .logoMasscode {
39 | color:#000;
40 | text-decoration:none;
41 | line-height:72px;
42 | font-size:50px;
43 | font-family:Arial, Helvetica, sans-serif;
44 | font-weight:900;
45 | display:block;
46 | letter-spacing:-8px;
47 |
48 | -moz-transform:rotate(-90deg);
49 | -webkit-transform:rotate(-90deg);
50 | -o-transform:rotate(-90deg);
51 | -ms-transform:rotate(-90deg);
52 | transform:rotate(-90deg);
53 | }
54 | .descr {
55 | text-align: left;
56 | margin-left:30px;
57 | margin-right:30px;
58 | }
59 | h2 { clear:both; padding:40px 0 5px 0; line-height:1.2em; text-align:left}
60 | hr { clear:both; border:0; border-bottom:1px dashed #ccc; height:0; margin:20px 0; display:block}
61 | .slidik { margin:auto !important}
62 | pre {text-align:left}
63 | h3,
64 | p { text-align:left;}
65 |
66 |
67 | .str1,
68 | .str2,
69 | .str3,
70 | .str4,
71 | .str5,
72 | .str6,
73 | .str9 { margin:0 0 30px 0;}
74 | .str4,
75 | .str5,
76 | .str6,
77 | .str8 {
78 | /*width:24% !important;*/
79 | display:inline-block;
80 | //display:inline;
81 | //zoom:1;
82 | vertical-align:top;
83 | }
84 | .str_wrap p {
85 | padding:10px 0;
86 | margin:0;
87 | }
88 | .str_vertical p {
89 | padding:10px;
90 | }
91 | fieldset { border:1px dotted #AAADC4; margin:0 0 45px 0; background:#fff; box-shadow:0 0 0 20px #fff; border-radius:1px; text-align:left; padding:30px 40px; position:relative; display:block;}
92 | legend { text-transform:uppercase; font-weight:900;}
93 | h3 {
94 | color:#fff;
95 | padding:0 0 10px 0;
96 | text-align:center;
97 | text-transform:uppercase;
98 | }
99 | .navPr {
100 | margin:0 0 40px ;
101 | }
102 | .navPr a {
103 | display:inline-block;
104 | vertical-align:top;
105 | background:#0769AD;
106 | color:#fff;
107 | font-weight:700;
108 | text-decoration:none;
109 | padding:5px 15px;
110 | margin:0 5px;
111 | border:1px solid #0769AD;
112 | }
113 | .navPr span {
114 | display:inline-block;
115 | vertical-align:top;
116 | background:#fff;
117 | color:#000;
118 | font-weight:700;
119 | text-decoration:none;
120 | padding:5px 15px;
121 | margin:0 5px;
122 | border:1px solid #fff;
123 |
124 | }
125 | .optionsTable {
126 | border-collapse:collapse;
127 | }
128 | .optionsTable td {
129 | border-top:1px solid #e5e5e5;
130 | padding:10px 50px 10px 0;
131 | }
132 | .optionsTable th {padding:10px 50px 10px 0; }
133 | .optionsTable tr td:first-child {
134 | font-weight:900;
135 | }
136 | .optionsTable tr:nth-child(even) td {
137 | background:#FCFCFC
138 | }
139 | .optionsTable th {
140 | color:#000;
141 | text-transform:uppercase;
142 | font-weight:900;
143 | }
144 | .value { padding:4px 10px; background:#000; color:#fff;}
145 |
146 | .addContent,
147 | .removeContent,
148 | .destroyBtn,
149 | .updateBtn { background: #0769AD; color:#fff; display:inline-block; padding:10px 20px; font-size:16px;}
150 |
151 | h2 { clear:both; padding:0px 0 5px 0; line-height:1.2em; text-align:left}
152 | .btnWrap {text-align:center; padding:30px 0 0;}
--------------------------------------------------------------------------------
/examples/change_speed.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | liMarquee
6 |
31 |
liMarquee - jQuery Marquee или бегущая строка на jQuery
32 |
33 |
Демо
34 |
Параметры по умолчанию
35 |
36 |
37 |
38 | Результат
39 |
40 |
41 | Будь собой! Если казаться не тем, кто ты на самом деле, можно получить не ту работу, не тех друзей, не свою любовь и вообще, не свою жизнь.
42 |
43 |
44 | Медленно (30px/sec)
45 | Нормально (90px/sec)
46 | Быстро (250px/sec)
47 |
48 |
49 |
50 |
51 |
52 | Подключаемые файлы
53 | <![CDATA[
54 | <link rel="stylesheet" href="../css/liMarquee.css">
55 | <script src="js/jquery-1.9.0.min.js"></script>
56 | <script src="../js/jquery.liMarquee.js"></script>
57 | ]]>
59 |
60 |
61 | Инициализация плагина
62 | <![CDATA[
63 | <script>
64 | $(window).load(function(){
65 | var stringEl = $('.str1').liMarquee();
66 | $('.speedChange').on('click',function(){
67 | var speedChange = $(this);
68 | var dataSpeed = speedChange.data('scrollamount');
69 |
70 | stringEl.trigger('mouseenter');
71 | stringEl.data({scrollamount:dataSpeed});
72 | stringEl.trigger('mouseleave');
73 |
74 | return false;
75 | })
76 | })
77 | </script>
78 | ]]>
80 |
81 |
82 | Код HTML
83 | <![CDATA[
84 | <div class="str1 str_wrap">
85 | Будь собой! Если казаться не тем, кто ты на самом деле, можно получить не ту работу, не тех друзей, не свою любовь и вообще, не свою жизнь.
86 | </div>
87 | <a class="speedChange" data-scrollamount="30" href="#">Медленно (30px/sec)</a>
88 | <a class="speedChange" data-scrollamount="90" href="#">Нормально (90px/sec)</a>
89 | <a class="speedChange" data-scrollamount="250" href="#">Быстро (250px/sec)</a>
90 | ]]>
92 |
93 |
liMarquee
6 |
21 |
liMarquee - jQuery Marquee или бегущая строка на jQuery
22 |
23 |
Демо
24 |
Параметры по умолчанию
25 |
26 |
27 |
28 | Результат
29 |
30 |
31 | Будь собой! Если казаться не тем, кто ты на самом деле, можно получить не ту работу, не тех друзей, не свою любовь и вообще, не свою жизнь.
32 |
33 |
34 |
35 |
36 |
37 | Подключаемые файлы
38 | <![CDATA[
39 | <link rel="stylesheet" href="../css/liMarquee.css">
40 | <script src="js/jquery-1.9.0.min.js"></script>
41 | <script src="../js/jquery.liMarquee.js"></script>
42 | ]]>
44 |
45 |
46 | Инициализация плагина
47 | <![CDATA[
48 | <script>
49 | $(window).load(function(){
50 | $('.str1').liMarquee();
51 | })
52 | </script>
53 | ]]>
55 |
56 |
57 | Код HTML
58 | <![CDATA[
59 | <div class="str1 str_wrap">
60 | Будь собой! Если казаться не тем, кто ты на самом деле, можно получить не ту работу, не тех друзей, не свою любовь и вообще, не свою жизнь.
61 | </div>
62 | ]]>
64 |
65 |
liMarquee
6 |
28 |
liMarquee - jQuery Marquee или бегущая строка на jQuery
29 |
30 |
Демо
31 |
Использование метода "destroy"
32 |
33 |
34 |
35 | Результат
36 |
37 | И с другом и с врагом ты должен быть хорош!
38 |
39 |
40 | destroy plugin
41 | update plugin
42 |
43 |
44 |
45 | Подключаемые файлы
46 | <![CDATA[
47 | <link rel="stylesheet" href="../css/liMarquee.css">
48 | <script src="js/jquery-1.9.0.min.js"></script>
49 | <script src="../js/jquery.liMarquee.js"></script>
50 | ]]>
52 |
53 |
54 | Инициализация плагина
55 | <![CDATA[
56 | <script>
57 | $(window).load(function(){
58 | $('.str').liMarquee();
59 |
60 | $('.destroyBtn').on('click',function(){
61 | $('.str').liMarquee('destroy');
62 | return false;
63 | })
64 | $('.updateBtn').on('click',function(){
65 | $('.str').liMarquee('update');
66 | return false;
67 | })
68 | })
69 | </script>
70 | ]]>
72 |
73 |
74 | Код HTML
75 | <![CDATA[
76 | <div class="str str_wrap">
77 | И с другом и с врагом ты должен быть хорош!
78 | </div>
79 |
80 | <a class="destroyBtn" href="">destroy plugin</a>
81 | <a class="updateBtn" href="">update plugin</a>
82 | ]]>
84 |
85 |
liMarquee
6 |
23 |
liMarquee - jQuery Marquee или бегущая строка на jQuery
24 |
25 |
Демо
26 |
Отключена возможность draggable (перетаскивания)
27 |
28 |
29 |
30 | Результат
31 |
32 |
33 | Живи так, как хочешь ты, а не как ожидают от тебя другие. Не важно оправдаешь ты их ожидания или нет, умирать ты будешь без них. И свои победы одержишь сам! © Конфуций
34 |
35 |
36 |
37 |
38 | Подключаемые файлы
39 | <![CDATA[
40 | <link rel="stylesheet" href="../css/liMarquee.css">
41 | <script src="js/jquery-1.9.0.min.js"></script>
42 | <script src="../js/jquery.liMarquee.js"></script>
43 | ]]>
45 |
46 |
47 | Инициализация плагина
48 | <![CDATA[
49 | <script>
50 | $(window).load(function(){
51 | $('.str2').liMarquee({
52 | drag: false
53 | });
54 | })
55 | </script>
56 | ]]>
58 |
59 |
60 | Код HTML
61 | <![CDATA[
62 | <div class="str2 str_wrap">
63 | Живи так, как хочешь ты, а не как ожидают от тебя другие. Не важно оправдаешь ты их ожидания или нет, умирать ты будешь без них. И свои победы одержишь сам! © Конфуций
64 | </div>
65 | ]]>
67 |
68 |
liMarquee
6 |
23 |
liMarquee - jQuery Marquee или бегущая строка на jQuery
24 |
25 |
Демо
26 |
Движение слева на право
27 |
28 |
29 |
30 | Результат
31 |
32 |
33 | Проблема в том, что, не рискуя, мы рискуем в сто раз больше. © Марк Аврелий
34 |
35 |
36 |
37 |
38 | Подключаемые файлы
39 | <![CDATA[
40 | <link rel="stylesheet" href="../css/liMarquee.css">
41 | <script src="js/jquery-1.9.0.min.js"></script>
42 | <script src="../js/jquery.liMarquee.js"></script>
43 | ]]>
45 |
46 |
47 | Инициализация плагина
48 | <![CDATA[
49 | <script>
50 | $(window).load(function(){
51 | $('.str9').liMarquee({
52 | direction: 'right'
53 | });
54 | })
55 | </script>
56 | ]]>
58 |
59 |
60 | Код HTML
61 | <![CDATA[
62 | <div class="str9 str_wrap">
63 | Проблема в том, что, не рискуя, мы рискуем в сто раз больше. © Марк Аврелий
64 | </div>
65 | ]]>
67 |
68 |
liMarquee
6 |
23 |
liMarquee - jQuery Marquee или бегущая строка на jQuery
24 |
25 |
Демо
26 |
Отключена остановка строки при наведении мыши
27 |
28 |
29 |
30 | Результат
31 |
32 |
33 | Самая большая человеческая глупость – страх. Страх совершить поступок, поговорить, признаться. Мы всегда боимся, и поэтому так часто проигрываем. Бернард Шоу
34 |
35 |
36 |
37 |
38 | Подключаемые файлы
39 | <![CDATA[
40 | <link rel="stylesheet" href="../css/liMarquee.css">
41 | <script src="js/jquery-1.9.0.min.js"></script>
42 | <script src="../js/jquery.liMarquee.js"></script>
43 | ]]>
45 |
46 |
47 | Инициализация плагина
48 | <![CDATA[
49 | <script>
50 | $(window).load(function(){
51 | $('.str10').liMarquee({
52 | hoverstop: false
53 | });
54 | })
55 | </script>
56 | ]]>
58 |
59 |
60 | Код HTML
61 | <![CDATA[
62 | <div class="str10 str_wrap">
63 | Самая большая человеческая глупость – страх. Страх совершить поступок, поговорить, признаться. Мы всегда боимся, и поэтому так часто проигрываем. Бернард Шоу
64 | </div>
65 | ]]>
67 |
68 |
liMarquee
6 |
31 |
liMarquee - jQuery Marquee или бегущая строка на jQuery
32 |
33 |
Демо
34 |
Бегущие изображения
35 |
36 |
37 |
38 | Результат
39 |
40 |
41 |
42 |
43 |
44 |
45 |
46 |
47 |
48 |
49 |
50 |
51 |
52 |
53 |
54 |
55 |
56 |
57 |
58 |
59 |
61 |
62 |
63 | Подключаемые файлы
64 | <![CDATA[
65 | <link rel="stylesheet" href="../css/liMarquee.css">
66 | <script src="js/jquery-1.9.0.min.js"></script>
67 | <script src="../js/jquery.liMarquee.js"></script>
68 | ]]>
70 |
71 |
72 | Инициализация плагина
73 | <![CDATA[
74 | <script>
75 | $(window).load(function(){
76 | $('.str3').liMarquee();
77 | })
78 | </script>
79 | ]]>
81 |
82 |
83 | Код HTML
84 | <![CDATA[
85 | <div class="str3 str_wrap">
86 | <a href="#"><img src="http://masscode.ru/media/k2/items/cache/1c0ae2205709722b62e843abc0471a55_S.jpg"></a>
87 | <a href="#"><img src="http://masscode.ru/media/k2/items/cache/01f1a05053c6242fcfa23075e5b963c1_S.jpg"></a>
88 | <a href="#"><img src="http://masscode.ru/media/k2/items/cache/6f43b5263fbba79c5962514b85d34738_S.jpg"></a>
89 | <a href="#"><img src="http://masscode.ru/media/k2/items/cache/8b6e33345ac8d5ffd9cf0d107a7d9e9d_S.jpg"></a>
90 | <a href="#"><img src="http://masscode.ru/media/k2/items/cache/9b2c4b44fb86522964124ed80d03c5e8_S.jpg"></a>
91 | <a href="#"><img src="http://masscode.ru/media/k2/items/cache/9ecd376e5371efaef9aad9bc9143aed8_S.jpg"></a>
92 | <a href="#"><img src="http://masscode.ru/media/k2/items/cache/19f9cefdfb07230a68581d617885a3af_S.jpg"></a>
93 | <a href="#"><img src="http://masscode.ru/media/k2/items/cache/36fdb1a35cd2f54f95cf2119fb5bc7ed_S.jpg"></a>
94 | <a href="#"><img src="http://masscode.ru/media/k2/items/cache/0b1ad7a7b79268a1f4558db78e092446_S.jpg"></a>
95 | <a href="#"><img src="http://masscode.ru/media/k2/items/cache/1c0ae2205709722b62e843abc0471a55_S.jpg"></a>
96 | <a href="#"><img src="http://masscode.ru/media/k2/items/cache/01f1a05053c6242fcfa23075e5b963c1_S.jpg"></a>
97 | <a href="#"><img src="http://masscode.ru/media/k2/items/cache/6f43b5263fbba79c5962514b85d34738_S.jpg"></a>
98 | <a href="#"><img src="http://masscode.ru/media/k2/items/cache/8b6e33345ac8d5ffd9cf0d107a7d9e9d_S.jpg"></a>
99 | <a href="#"><img src="http://masscode.ru/media/k2/items/cache/9b2c4b44fb86522964124ed80d03c5e8_S.jpg"></a>
100 | <a href="#"><img src="http://masscode.ru/media/k2/items/cache/9ecd376e5371efaef9aad9bc9143aed8_S.jpg"></a>
101 | <a href="#"><img src="http://masscode.ru/media/k2/items/cache/0b1ad7a7b79268a1f4558db78e092446_S.jpg"></a>
102 | <a href="#"><img src="http://masscode.ru/media/k2/items/cache/19f9cefdfb07230a68581d617885a3af_S.jpg"></a>
103 | <a href="#"><img src="http://masscode.ru/media/k2/items/cache/36fdb1a35cd2f54f95cf2119fb5bc7ed_S.jpg"></a>
104 | <a href="#"><img src="http://masscode.ru/media/k2/items/cache/0b1ad7a7b79268a1f4558db78e092446_S.jpg"></a>
105 | </div>
106 | ]]>
108 |
109 |
liMarquee
6 |
11 |
liMarquee - jQuery Marquee или бегущая строка на jQuery
12 |
13 | Демо
14 |
15 |
16 |
17 | Описание
18 | liMarquee - jQuery Marquee или бегущая строка на jQuery
28 |
29 |
30 | Демо
31 | Параметры по умолчанию
32 | Движение слева на право
33 | Отключена возможность draggable (перетаскивания)
34 | Отключена остановка строки при наведении мыши
35 | Бегущие изображения
36 | Бегущая строка с html кодом
37 | Движение по вертикали
38 | XML
39 | Использование метода "update"
40 | Использование метода "destroy"
41 | Изменение скорости движения
42 | Методы "pause" и "play"
43 |
44 |
45 |
46 |
47 | Параметры
48 |
49 |
50 |
51 |
52 | Option
53 | Default value
54 | Datatype
55 | Description
56 |
57 |
58 | direction
59 | "left"
60 | String
61 | Указывает направление движения бегущей строки. "left" , "right" , "up" , "down"
62 |
63 |
64 | loop
65 | -1
66 | Number
67 | Задает, сколько раз будет прокручиваться содержимое. любое целое положительное число или -1 - для бесконечного повторения
68 |
69 |
70 | scrolldelay
71 | 0
72 | Number
73 | Величина задержки перед каждым повторением. любое целое положительное число в миллисекундах
74 |
75 |
76 | scrollamount
77 | 50
78 | Number
79 | Скорость движения строки. любое целое положительное число px/sec
80 |
81 |
82 | circular
83 | true
84 | Boolean
85 | Создает эффект бесконечной строки. true , false
86 |
87 |
88 | drag
89 | true
90 | Boolean
91 | Включает перетаскивание строки мышкой. true , false
92 |
93 |
94 | runshort
95 | true
96 | Boolean
97 | Включает движение "короткой" строки, когда размер контента меньше размера бегущей строки. true , false
98 |
99 |
100 | hoverstop
101 | true
102 | Boolean
103 | Включает остановку строки при наведения курсора мыши. true , false
104 |
105 |
106 | xml
107 | false
108 | Boolean, String
109 | Подключает внешний XML файл с контентом, и загружает этот контент в бегущую строку. путь к XML файлу или false
110 |
111 |
112 | inverthover
113 | false
114 | Boolean
115 | Инвертирует стандартную реакцию на наведение курсора. true , false
116 |
117 |
118 |
119 |
120 |
121 | Методы
122 | update()
123 | Обновляет инициализацию строки (например: после изменения внутреннего содержания)
124 | (Этот метод не принимает аргументов)
125 |
126 | Пример кода
127 |
128 | $('.str').liMarquee('update');
129 |
130 |
131 | destroy()
132 | Удаляет весь функционал бегущей строки. Возвращает элемент в состояние до инициализации плагина
133 | (Этот метод не принимает аргументов)
134 |
135 | Пример кода
136 |
137 | $('.str').liMarquee('destroy');
138 |
139 |
140 | pause()
141 | Останавливает движение строки
142 | (Этот метод не принимает аргументов)
143 |
144 | Пример кода
145 |
146 | $('.str').liMarquee('pause');
147 |
148 |
149 | play()
150 | Запускает движение строки
151 | (Этот метод не принимает аргументов)
152 |
153 | Пример кода
154 |
155 | $('.str').liMarquee('play');
156 |
157 |
158 |
159 |
160 | LOG
161 | 20.11.2014 - Добавлены методы "pause" и "play" для паузы/пуска движения строки
187 |
188 |
189 |
liMarquee
6 |
25 |
liMarquee - jQuery Marquee или бегущая строка на jQuery
26 |
27 |
Демо
28 |
Бегущая строка с html кодом
29 |
30 |
31 |
32 | Результат
33 |
34 | 1
35 | 2
36 | 3
37 | 4
38 | 5
39 | 6
40 | 7
41 | 8
42 | 9
43 | 0
44 |
45 |
46 |
47 |
48 | Подключаемые файлы
49 | <![CDATA[
50 | <link rel="stylesheet" href="../css/liMarquee.css">
51 | <script src="js/jquery-1.9.0.min.js"></script>
52 | <script src="../js/jquery.liMarquee.js"></script>
53 | ]]>
55 |
56 |
57 | Инициализация плагина
58 | <![CDATA[
59 | <script>
60 | $(window).load(function(){
61 | $('.str3-2').liMarquee();
62 | })
63 | </script>
64 | ]]>
66 |
67 |
68 | Код HTML
69 | <![CDATA[
70 | <div class="str3-2 str_wrap">
71 | <span>1</span>
72 | <span>2</span>
73 | <span>3</span>
74 | <span>4</span>
75 | <span>5</span>
76 | <span>6</span>
77 | <span>7</span>
78 | <span>8</span>
79 | <span>9</span>
80 | <span>0</span>
81 | </div>
82 | ]]>
84 |
85 |
liMarquee
6 |
27 |
liMarquee - jQuery Marquee или бегущая строка на jQuery
28 |
29 |
Демо
30 |
Методы "pause" и "play"
31 |
32 |
33 |
34 | Результат
35 |
36 |
37 | Самая большая человеческая глупость – страх. Страх совершить поступок, поговорить, признаться. Мы всегда боимся, и поэтому так часто проигрываем. Бернард Шоу
38 |
39 |
40 | Pause
41 | Play
42 |
43 |
44 |
45 |
46 | Подключаемые файлы
47 | <![CDATA[
48 | <link rel="stylesheet" href="../css/liMarquee.css">
49 | <script src="js/jquery-1.9.0.min.js"></script>
50 | <script src="../js/jquery.liMarquee.js"></script>
51 | ]]>
53 |
54 |
55 | Инициализация плагина
56 | <![CDATA[
57 | <script>
58 | $(window).load(function(){
59 | $('.str10').liMarquee();
60 | $('.btnPause').on('click',function(){
61 | $('.str10').liMarquee('pause');
62 | })
63 | $('.btnPlay').on('click',function(){
64 | $('.str10').liMarquee('play');
65 | })
66 | })
67 | </script>
68 | ]]>
70 |
71 |
72 | Код HTML
73 | <![CDATA[
74 | <div class="str10 str_wrap">
75 | Самая большая человеческая глупость – страх. Страх совершить поступок, поговорить, признаться. Мы всегда боимся, и поэтому так часто проигрываем. Бернард Шоу
76 | </div>
77 | <div class="btnWrap">
78 | <button class="btnPause">Pause</button>
79 | <button class="btnPlay">Play</button>
80 | </div>
81 | ]]>
83 |
84 |
3 |
4 | В настоящей любви точки не бывает.
5 |
6 |
7 | Можно разойтись, разругаться, разочароваться — возможно абсолютно все.
8 |
9 |
10 | Но какие бы причины ни были, настоящая любовь все равно продолжает жить в сердце.
11 |
12 |
13 | Она отделяется от разума, живет вне происходящего.
14 |
15 |
16 | Ты ничего не можешь поделать с этой любовью и просто сохраняешь ее в себе.
17 |
18 |
19 | Эльчин Сафарли
20 |
21 |
--------------------------------------------------------------------------------
/examples/update.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | liMarquee
6 |
35 |
liMarquee - jQuery Marquee или бегущая строка на jQuery
36 |
37 |
Демо
38 |
Использование метода "update"
39 |
40 |
41 |
42 | Результат
43 |
44 |
И с другом и с врагом ты должен быть хорош!
45 |
46 |
add content
49 | remove content
50 |
51 |
52 |
53 | Подключаемые файлы
54 | <![CDATA[
55 | <link rel="stylesheet" href="../css/liMarquee.css">
56 | <script src="js/jquery-1.9.0.min.js"></script>
57 | <script src="../js/jquery.liMarquee.js"></script>
58 | ]]>
60 |
61 |
62 | Инициализация плагина
63 | <![CDATA[
64 | <script>
65 | $(window).load(function(){
66 | $('.str4').liMarquee({
67 | direction: 'up'
68 | });
69 |
70 | var newContent = '<p>new content new content new content new content new content new content new content new </p>'
71 |
72 | $('.addContent').on('click',function(){
73 | $('.str_origin',$('.str4')).html( $('.str_origin',$('.str4')).html() + newContent);
74 | $('.str4').liMarquee('update')
75 | return false;
76 | })
77 |
78 | $('.removeContent').on('click',function(){
79 | $('p',$('.str4')).eq(0).remove();
80 | $('.str4').liMarquee('update')
81 | return false;
82 | })
83 |
84 | })
85 | </script>
86 | ]]>
88 |
89 |
90 | Код HTML
91 | <![CDATA[
92 | <div class="str4 str_wrap" style="height:200px;">
93 | <p>И с другом и с врагом ты должен быть хорош!</p>
94 | <p>Кто по натуре добр, в том злобы не найдешь.</p>
95 | <p>Обидишь друга — наживешь врага ты,</p>
96 | <p>Врага обнимешь — друга обретешь.</p>
97 | <p>Омар Хайям</p>
98 | </div>
99 |
100 | <a class="addContent" href="">add content</a>
101 | <a class="removeContent" href="">remove content</a>
102 | ]]>
104 |
105 |
liMarquee
6 |
22 |
liMarquee - jQuery Marquee или бегущая строка на jQuery
23 |
24 |
Демо
25 |
Движение по вертикали
26 |
27 |
28 |
29 | Результат
30 |
31 |
И с другом и с врагом ты должен быть хорош!
32 |
Кто по натуре добр , в том злобы не найдешь.
33 |
Обидишь друга — наживешь врага ты,
34 |
Врага обнимешь — друга обретешь.
35 |
Омар Хайям
36 |
38 |
39 |
40 | Подключаемые файлы
41 | <![CDATA[
42 | <link rel="stylesheet" href="../css/liMarquee.css">
43 | <script src="js/jquery-1.9.0.min.js"></script>
44 | <script src="../js/jquery.liMarquee.js"></script>
45 | ]]>
47 |
48 |
49 | Инициализация плагина
50 | <![CDATA[
51 | <script>
52 | $(window).load(function(){
53 | $('.str4').liMarquee({
54 | direction: 'up'
55 | });
56 | })
57 | </script>
58 | ]]>
60 |
61 |
62 | Код HTML
63 | <![CDATA[
64 | <div class="str4 str_wrap" style="height:200px;">
65 | <p>И с другом и с врагом ты должен быть хорош!</p>
66 | <p>Кто по натуре добр, в том злобы не найдешь.</p>
67 | <p>Обидишь друга — наживешь врага ты,</p>
68 | <p>Врага обнимешь — друга обретешь.</p>
69 | <p>Омар Хайям</p>
70 | </div>
71 | ]]>
73 |
74 |
liMarquee
6 |
23 |
liMarquee - jQuery Marquee или бегущая строка на jQuery
24 |
28 |
29 |
30 | Результат
31 |
32 |
33 |
34 |
35 |
36 | Подключаемые файлы
37 | <![CDATA[
38 | <link rel="stylesheet" href="../css/liMarquee.css">
39 | <script src="js/jquery-1.9.0.min.js"></script>
40 | <script src="../js/jquery.liMarquee.js"></script>
41 | ]]>
43 |
44 |
45 | Инициализация плагина
46 | <![CDATA[
47 | <script>
48 | $(window).load(function(){
49 | $('.str7').liMarquee({
50 | xml:'text.xml' //путь к xml файлу
51 | });
52 | })
53 | </script>
54 | ]]>
56 |
57 |
58 | Код HTML
59 | <![CDATA[
60 | <div class="str7 str_wrap"></div>
61 | ]]>
63 |
64 |
65 | Содержание файла text.xml
66 | <![CDATA[
67 | <?xml version="1.0" encoding="utf-8"?>
68 | <textwrap>
69 | <text>
70 | В настоящей любви точки не бывает.
71 | </text>
72 | <text>
73 | Можно разойтись, разругаться, разочароваться — возможно абсолютно все.
74 | </text>
75 | <text>
76 | Но какие бы причины ни были, настоящая любовь все равно продолжает жить в сердце.
77 | </text>
78 | <text>
79 | Она отделяется от разума, живет вне происходящего.
80 | </text>
81 | <text>
82 | Ты ничего не можешь поделать с этой любовью и просто сохраняешь ее в себе.
83 | </text>
84 | <text>
85 | Эльчин Сафарли
86 | </text>
87 | </textwrap>
88 | ]]>
90 |
91 |
').addClass('str_move'));
70 | }
71 |
72 | var
73 | strMove = $('.str_move', strWrap).addClass('str_origin'),
74 | strMoveClone = strMove.clone().removeClass('str_origin').addClass('str_move_clone'),
75 | time = 0;
76 |
77 | if (!p.hoverstop) {
78 | strWrap.addClass('noStop');
79 | }
80 |
81 | var circCloneHor = function(){
82 | strMoveClone.clone().css({
83 | left:'100%',
84 | right:'auto',
85 | width: strMove.width()
86 | }).appendTo(strMove);
87 | strMoveClone.css({
88 | right: '100%',
89 | left:'auto',
90 | width: strMove.width()
91 | }).appendTo(strMove);
92 | }
93 |
94 | var circCloneVert = function(){
95 | strMoveClone.clone().css({
96 | top: '100%',
97 | bottom:'auto',
98 | height: strMove.height()
99 | }).appendTo(strMove);
100 | strMoveClone.css({
101 | bottom: '100%',
102 | top:'auto',
103 | height:strMove.height()
104 | }).appendTo(strMove);
105 | }
106 |
107 |
108 |
109 | if (p.direction == 'left') {
110 | strWrap.height(strMove.outerHeight())
111 | if (strMove.width() > strWrap.width()) {
112 | var leftPos = -strMove.width();
113 |
114 | if (p.circular) {
115 |
116 | if (!p.xml) {
117 | circCloneHor()
118 | leftPos = -(strMove.width() + (strMove.width() - strWrap.width()));
119 | }
120 | }
121 | if (p.xml) {
122 | strMove.css({
123 | left:strWrap.width()
124 | })
125 | }
126 | var
127 | strMoveLeft = strWrap.width(),
128 | k1 = 0,
129 | timeFunc1 = function () {
130 | var
131 | fullS = Math.abs(leftPos),
132 | time = (fullS / strWrap.data('scrollamount')) * 1000;
133 | if (parseFloat(strMove.css('left')) != 0) {
134 | fullS = (fullS + strWrap.width());
135 | time = (fullS - (strWrap.width() - parseFloat(strMove.css('left')))) / strWrap.data('scrollamount') * 1000;
136 | }
137 | return time;
138 | },
139 | moveFuncId1 = false,
140 | moveFunc1 = function () {
141 | if (loop != 0) {
142 | strMove.stop(true).animate({
143 | left: leftPos
144 | }, timeFunc1(), 'linear', function () {
145 | $(this).css({
146 | left: strWrap.width()
147 | });
148 | if (loop == -1) {
149 | moveFuncId1 = setTimeout(moveFunc1, p.scrolldelay);
150 | } else {
151 | loop--;
152 | moveFuncId1 = setTimeout(moveFunc1, p.scrolldelay);
153 | }
154 | });
155 | }
156 | };
157 | strWrap.data({
158 | moveId: moveFuncId1 ,
159 | moveF : moveFunc1
160 | })
161 | if(!p.inverthover){
162 | moveFunc1();
163 | }
164 |
165 | if (p.hoverstop) {
166 | strWrap.on(enterEvent, function () {
167 | $(this).addClass('str_active');
168 | clearTimeout(moveFuncId1);
169 | strMove.stop(true);
170 | }).on(leaveEvent, function () {
171 | $(this).removeClass('str_active');
172 | $(this).off('mousemove');
173 | moveFunc1();
174 | });
175 |
176 | if (p.drag) {
177 | strWrap.on('mousedown', function (e) {
178 | if(p.inverthover){
179 | strMove.stop(true);
180 | }
181 | //drag
182 | var dragLeft;
183 | var dir = 1;
184 | var newX;
185 | var oldX = e.clientX;
186 | //drag
187 |
188 | strMoveLeft = strMove.position().left;
189 | k1 = strMoveLeft - (e.clientX - strWrap.offset().left);
190 |
191 |
192 |
193 | $(this).on('mousemove', function (e) {
194 | fMove = true;
195 |
196 | //drag
197 | newX = e.clientX;
198 | if(newX > oldX){
199 | dir = 1
200 | }else{
201 | dir = -1
202 | }
203 | oldX = newX
204 | dragLeft = k1 + (e.clientX - strWrap.offset().left);
205 |
206 | if (!p.circular) {
207 | if(dragLeft < -strMove.width() && dir < 0){
208 | dragLeft = strWrap.width();
209 | strMoveLeft = strMove.position().left;
210 | k1 = strMoveLeft - (e.clientX - strWrap.offset().left);
211 | }
212 | if(dragLeft > strWrap.width() && dir > 0){
213 | dragLeft = -strMove.width();
214 | strMoveLeft = strMove.position().left;
215 | k1 = strMoveLeft - (e.clientX - strWrap.offset().left);
216 | }
217 | }else{
218 | if(dragLeft < -strMove.width() && dir < 0){
219 | dragLeft = 0;
220 | strMoveLeft = strMove.position().left;
221 | k1 = strMoveLeft - (e.clientX - strWrap.offset().left);
222 | }
223 | if(dragLeft > 0 && dir > 0){
224 | dragLeft = -strMove.width();
225 | strMoveLeft = strMove.position().left;
226 | k1 = strMoveLeft - (e.clientX - strWrap.offset().left);
227 | }
228 |
229 | }
230 |
231 |
232 | strMove.stop(true).css({
233 | left: dragLeft
234 | });
235 | //drag
236 |
237 |
238 |
239 | }).on('mouseup', function () {
240 | $(this).off('mousemove');
241 | if(p.inverthover){
242 | strMove.trigger('mouseenter')
243 | }
244 | setTimeout(function () {
245 | fMove = false
246 | }, 50)
247 |
248 | });
249 | return false;
250 | })
251 | .on('click', function () {
252 | if (fMove) {
253 | return false
254 | }
255 | });
256 | } else {
257 | strWrap.addClass('no_drag');
258 | };
259 | }
260 | } else {
261 | if (p.runshort) {
262 | strMove.css({
263 | left: strWrap.width()
264 | });
265 | var
266 | strMoveLeft = strWrap.width(),
267 | k1 = 0,
268 | timeFunc = function () {
269 | time = (strMove.width() + strMove.position().left) / strWrap.data('scrollamount') * 1000;
270 | return time;
271 | };
272 | var moveFunc = function () {
273 | if (loop != 0) {
274 | var leftPos = -strMove.width();
275 | strMove.animate({
276 | left: leftPos
277 | }, timeFunc(), 'linear', function () {
278 | $(this).css({
279 | left: strWrap.width()
280 | });
281 | if (loop == -1) {
282 | setTimeout(moveFunc, p.scrolldelay);
283 | } else {
284 | loop--;
285 | setTimeout(moveFunc, p.scrolldelay);
286 | }
287 | });
288 | }
289 | };
290 | strWrap.data({
291 | moveF : moveFunc
292 | })
293 | if(!p.inverthover){
294 | moveFunc();
295 | }
296 | if (p.hoverstop) {
297 | strWrap.on(enterEvent, function () {
298 | $(this).addClass('str_active');
299 | strMove.stop(true);
300 | }).on(leaveEvent, function () {
301 | $(this).removeClass('str_active');
302 | $(this).off('mousemove');
303 | moveFunc();
304 | });
305 |
306 | if (p.drag) {
307 | strWrap.on('mousedown', function (e) {
308 | if(p.inverthover){
309 | strMove.stop(true);
310 | }
311 |
312 | //drag
313 | var dragLeft;
314 | var dir = 1;
315 | var newX;
316 | var oldX = e.clientX;
317 | //drag
318 |
319 | strMoveLeft = strMove.position().left;
320 | k1 = strMoveLeft - (e.clientX - strWrap.offset().left);
321 | $(this).on('mousemove', function (e) {
322 | fMove = true;
323 |
324 |
325 | //drag
326 | newX = e.clientX;
327 | if(newX > oldX){
328 | dir = 1
329 | }else{
330 | dir = -1
331 | }
332 | oldX = newX
333 | dragLeft = k1 + (e.clientX - strWrap.offset().left);
334 |
335 | if(dragLeft < -strMove.width() && dir < 0){
336 | dragLeft = strWrap.width();
337 | strMoveLeft = strMove.position().left;
338 | k1 = strMoveLeft - (e.clientX - strWrap.offset().left);
339 | }
340 | if(dragLeft > strWrap.width() && dir > 0){
341 | dragLeft = -strMove.width();
342 | strMoveLeft = strMove.position().left;
343 | k1 = strMoveLeft - (e.clientX - strWrap.offset().left);
344 | }
345 |
346 |
347 | strMove.stop(true).css({
348 | left: dragLeft
349 | });
350 |
351 |
352 |
353 | }).on('mouseup', function () {
354 | if(p.inverthover){
355 | strMove.trigger('mouseenter')
356 | }
357 | $(this).off('mousemove');
358 | setTimeout(function () {
359 | fMove = false
360 | }, 50)
361 | });
362 | return false;
363 | })
364 | .on('click', function () {
365 | if (fMove) {
366 | return false
367 | }
368 | });
369 | } else {
370 | strWrap.addClass('no_drag');
371 | };
372 | }
373 | } else {
374 | strWrap.addClass('str_static');
375 | }
376 | };
377 | };
378 | if (p.direction == 'right') {
379 | strWrap.height(strMove.outerHeight())
380 | strWrap.addClass('str_right');
381 | strMove.css({
382 | left: -strMove.width(),
383 | right: 'auto'
384 | })
385 |
386 | if (strMove.width() > strWrap.width()) {
387 | var leftPos = strWrap.width();
388 | strMove.css({
389 | left: 0
390 | })
391 | if (p.circular) {
392 | if (!p.xml) {
393 | circCloneHor()
394 | //Определяем крайнюю точку
395 | leftPos = strMove.width();
396 | }
397 | }
398 |
399 | var
400 | k2 = 0;
401 | timeFunc = function () {
402 | var
403 | fullS = strWrap.width(), //крайняя точка
404 | time = (fullS / strWrap.data('scrollamount')) * 1000; //время
405 | if (parseFloat(strMove.css('left')) != 0) {
406 | fullS = (strMove.width() + strWrap.width());
407 | time = (fullS - (strMove.width() + parseFloat(strMove.css('left')))) / strWrap.data('scrollamount') * 1000;
408 | }
409 | return time;
410 | };
411 | var moveFunc = function () {
412 |
413 | if (loop != 0) {
414 | strMove.animate({
415 | left: leftPos
416 | }, timeFunc(), 'linear', function () {
417 | $(this).css({
418 | left: -strMove.width()
419 | });
420 | if (loop == -1) {
421 | setTimeout(moveFunc, p.scrolldelay);
422 | } else {
423 | loop--;
424 | setTimeout(moveFunc, p.scrolldelay);
425 | };
426 | });
427 | };
428 | };
429 | strWrap.data({
430 | moveF : moveFunc
431 | })
432 |
433 | if(!p.inverthover){
434 | moveFunc();
435 | }
436 | if (p.hoverstop) {
437 | strWrap.on(enterEvent, function () {
438 | $(this).addClass('str_active');
439 | strMove.stop(true);
440 | }).on(leaveEvent, function () {
441 | $(this).removeClass('str_active');
442 | $(this).off('mousemove');
443 | moveFunc();
444 | });
445 |
446 | if (p.drag) {
447 |
448 | strWrap.on('mousedown', function (e) {
449 | if(p.inverthover){
450 | strMove.stop(true);
451 | }
452 |
453 |
454 | //drag
455 | var dragLeft;
456 | var dir = 1;
457 | var newX;
458 | var oldX = e.clientX;
459 | //drag
460 |
461 | strMoveLeft = strMove.position().left;
462 | k2 = strMoveLeft - (e.clientX - strWrap.offset().left);
463 | $(this).on('mousemove', function (e) {
464 |
465 | fMove = true;
466 |
467 | //drag
468 | newX = e.clientX;
469 | if(newX > oldX){
470 | dir = 1
471 | }else{
472 | dir = -1
473 | }
474 | oldX = newX
475 | dragLeft = k2 + (e.clientX - strWrap.offset().left);
476 |
477 |
478 | if (!p.circular) {
479 |
480 | if(dragLeft < -strMove.width() && dir < 0){
481 | dragLeft = strWrap.width();
482 | strMoveLeft = strMove.position().left;
483 | k2 = strMoveLeft - (e.clientX - strWrap.offset().left);
484 | }
485 | if(dragLeft > strWrap.width() && dir > 0){
486 | dragLeft = -strMove.width();
487 | strMoveLeft = strMove.position().left;
488 | k2 = strMoveLeft - (e.clientX - strWrap.offset().left);
489 | }
490 | }else{
491 | if(dragLeft < -strMove.width() && dir < 0){
492 | dragLeft = 0;
493 | strMoveLeft = strMove.position().left;
494 | k2 = strMoveLeft - (e.clientX - strWrap.offset().left);
495 | }
496 | if(dragLeft > 0 && dir > 0){
497 | dragLeft = -strMove.width();
498 | strMoveLeft = strMove.position().left;
499 | k2 = strMoveLeft - (e.clientX - strWrap.offset().left);
500 | }
501 |
502 | }
503 |
504 | strMove.stop(true).css({
505 | left: dragLeft
506 | });
507 |
508 |
509 | }).on('mouseup', function () {
510 | if(p.inverthover){
511 | strMove.trigger('mouseenter')
512 | }
513 | $(this).off('mousemove');
514 | setTimeout(function () {
515 | fMove = false
516 | }, 50)
517 | });
518 | return false;
519 | })
520 | .on('click', function () {
521 | if (fMove) {
522 | return false
523 | }
524 | });
525 | } else {
526 | strWrap.addClass('no_drag');
527 | };
528 | }
529 | } else {
530 |
531 | if (p.runshort) {
532 |
533 | var k2 = 0;
534 | var timeFunc = function () {
535 | time = (strWrap.width() - strMove.position().left) / strWrap.data('scrollamount') * 1000;
536 | return time;
537 | };
538 | var moveFunc = function () {
539 | if (loop != 0) {
540 | var leftPos = strWrap.width();
541 | strMove.animate({
542 | left: leftPos
543 | }, timeFunc(), 'linear', function () {
544 | $(this).css({
545 | left: -strMove.width()
546 | });
547 | if (loop == -1) {
548 | setTimeout(moveFunc, p.scrolldelay);
549 | } else {
550 | loop--;
551 | setTimeout(moveFunc, p.scrolldelay);
552 | };
553 | });
554 | }
555 | };
556 |
557 | strWrap.data({
558 | moveF : moveFunc
559 | })
560 |
561 | if(!p.inverthover){
562 | moveFunc();
563 | }
564 | if (p.hoverstop) {
565 | strWrap.on(enterEvent, function () {
566 | $(this).addClass('str_active');
567 | strMove.stop(true);
568 | }).on(leaveEvent, function () {
569 | $(this).removeClass('str_active');
570 | $(this).off('mousemove');
571 | moveFunc();
572 | });
573 |
574 | if (p.drag) {
575 | strWrap.on('mousedown', function (e) {
576 | if(p.inverthover){
577 | strMove.stop(true);
578 | }
579 |
580 | //drag
581 | var dragLeft;
582 | var dir = 1;
583 | var newX;
584 | var oldX = e.clientX;
585 | //drag
586 |
587 | strMoveLeft = strMove.position().left;
588 | k2 = strMoveLeft - (e.clientX - strWrap.offset().left);
589 | $(this).on('mousemove', function (e) {
590 | fMove = true;
591 |
592 |
593 |
594 | //drag
595 | newX = e.clientX;
596 | if(newX > oldX){
597 | dir = 1
598 | }else{
599 | dir = -1
600 | }
601 | oldX = newX
602 | dragLeft = k2 + (e.clientX - strWrap.offset().left);
603 |
604 | if(dragLeft < -strMove.width() && dir < 0){
605 | dragLeft = strWrap.width();
606 | strMoveLeft = strMove.position().left;
607 | k2 = strMoveLeft - (e.clientX - strWrap.offset().left);
608 | }
609 | if(dragLeft > strWrap.width() && dir > 0){
610 | dragLeft = -strMove.width();
611 | strMoveLeft = strMove.position().left;
612 | k2 = strMoveLeft - (e.clientX - strWrap.offset().left);
613 | }
614 |
615 | strMove.stop(true).css({
616 | left:dragLeft
617 | });
618 |
619 | }).on('mouseup', function () {
620 | if(p.inverthover){
621 | strMove.trigger('mouseenter')
622 | }
623 | $(this).off('mousemove');
624 | setTimeout(function () {
625 | fMove = false
626 | }, 50)
627 | });
628 | return false;
629 | })
630 | .on('click', function () {
631 | if (fMove) {
632 | return false
633 | }
634 | });
635 | } else {
636 | strWrap.addClass('no_drag');
637 | };
638 | }
639 | } else {
640 | strWrap.addClass('str_static');
641 | }
642 | };
643 | };
644 | if (p.direction == 'up') {
645 | strWrap.addClass('str_vertical');
646 |
647 | if (strMove.height() > strWrap.height()) {
648 | var topPos = -strMove.height();
649 | if (p.circular) {
650 | if (!p.xml) {
651 | circCloneVert();
652 | topPos = -(strMove.height() + (strMove.height() - strWrap.height()));
653 | }
654 | }
655 | if (p.xml) {
656 | strMove.css({
657 | top:strWrap.height()
658 | })
659 | }
660 | var
661 | k2 = 0;
662 | timeFunc = function () {
663 | var
664 | fullS = Math.abs(topPos),
665 | time = (fullS / strWrap.data('scrollamount')) * 1000;
666 | if (parseFloat(strMove.css('top')) != 0) {
667 | fullS = (fullS + strWrap.height());
668 | time = (fullS - (strWrap.height() - parseFloat(strMove.css('top')))) / strWrap.data('scrollamount') * 1000;
669 | }
670 |
671 | return time;
672 | };
673 | var moveFunc = function () {
674 | if (loop != 0) {
675 | strMove.animate({
676 | top: topPos
677 | }, timeFunc(), 'linear', function () {
678 | $(this).css({
679 | top: strWrap.height()
680 | });
681 | if (loop == -1) {
682 | setTimeout(moveFunc, p.scrolldelay);
683 | } else {
684 | loop--;
685 | setTimeout(moveFunc, p.scrolldelay);
686 | };
687 | });
688 | };
689 | };
690 |
691 | strWrap.data({
692 | moveF : moveFunc
693 | })
694 |
695 | if(!p.inverthover){
696 | moveFunc();
697 | }
698 | if (p.hoverstop) {
699 | strWrap.on(enterEvent, function () {
700 | $(this).addClass('str_active');
701 | strMove.stop(true);
702 | }).on(leaveEvent, function () {
703 | $(this).removeClass('str_active');
704 | $(this).off('mousemove');
705 | moveFunc();
706 | });
707 |
708 | if (p.drag) {
709 | strWrap.on('mousedown', function (e) {
710 | if(p.inverthover){
711 | strMove.stop(true);
712 | }
713 |
714 | //drag
715 | var dragTop;
716 | var dir = 1;
717 | var newY;
718 | var oldY = e.clientY;
719 | //drag
720 |
721 |
722 | strMoveTop = strMove.position().top;
723 | k2 = strMoveTop - (e.clientY - strWrap.offset().top);
724 | $(this).on('mousemove', function (e) {
725 |
726 | fMove = true;
727 |
728 | //drag
729 | newY = e.clientY;
730 | if(newY > oldY){
731 | dir = 1
732 | }else{
733 | if(newY < oldY){
734 | dir = -1
735 | }
736 | }
737 | oldY = newY
738 | dragTop = k2 + e.clientY - strWrap.offset().top;
739 |
740 |
741 | if (!p.circular){
742 | if(dragTop < -strMove.height() && dir < 0){
743 | dragTop = strWrap.height();
744 | strMoveTop = strMove.position().top;
745 | k2 = strMoveTop - (e.clientY - strWrap.offset().top);
746 | }
747 | if(dragTop > strWrap.height() && dir > 0){
748 | dragTop = -strMove.height();
749 | strMoveTop = strMove.position().top;
750 | k2 = strMoveTop - (e.clientY - strWrap.offset().top);
751 | }
752 | }else{
753 | if(dragTop < -strMove.height() && dir < 0){
754 | dragTop = 0;
755 | strMoveTop = strMove.position().top;
756 | k2 = strMoveTop - (e.clientY - strWrap.offset().top);
757 | }
758 | if(dragTop > 0 && dir > 0){
759 | dragTop = -strMove.height();
760 | strMoveTop = strMove.position().top;
761 | k2 = strMoveTop - (e.clientY - strWrap.offset().top);
762 | }
763 | }
764 |
765 |
766 | strMove.stop(true).css({
767 | top: dragTop
768 | });
769 | //drag
770 |
771 |
772 |
773 |
774 |
775 |
776 |
777 |
778 |
779 |
780 |
781 |
782 | }).on('mouseup', function () {
783 | if(p.inverthover){
784 | strMove.trigger('mouseenter')
785 | }
786 | $(this).off('mousemove');
787 | setTimeout(function () {
788 | fMove = false
789 | }, 50)
790 | });
791 | return false;
792 | })
793 | .on('click', function () {
794 | if (fMove) {
795 | return false
796 | }
797 | });
798 | } else {
799 | strWrap.addClass('no_drag');
800 | };
801 | }
802 | } else {
803 | if (p.runshort) {
804 | strMove.css({
805 | top: strWrap.height()
806 | });
807 | var k2 = 0;
808 | var timeFunc = function () {
809 |
810 | time = (strMove.height() + strMove.position().top) / strWrap.data('scrollamount') * 1000;
811 |
812 | return time;
813 | };
814 | var moveFunc = function () {
815 | if (loop != 0) {
816 | var topPos = -strMove.height();
817 | strMove.animate({
818 | top: topPos
819 | }, timeFunc(), 'linear', function () {
820 | $(this).css({
821 | top: strWrap.height()
822 | });
823 | if (loop == -1) {
824 | setTimeout(moveFunc, p.scrolldelay);
825 | } else {
826 | loop--;
827 | setTimeout(moveFunc, p.scrolldelay);
828 | };
829 | });
830 | }
831 | };
832 | strWrap.data({
833 | moveF : moveFunc
834 | })
835 | if(!p.inverthover){
836 | moveFunc();
837 | }
838 | if (p.hoverstop) {
839 | strWrap.on(enterEvent, function () {
840 | $(this).addClass('str_active');
841 | strMove.stop(true);
842 | }).on(leaveEvent, function () {
843 | $(this).removeClass('str_active');
844 | $(this).off('mousemove');
845 | moveFunc();
846 | });
847 |
848 | if (p.drag) {
849 | strWrap.on('mousedown', function (e) {
850 | if(p.inverthover){
851 | strMove.stop(true);
852 | }
853 |
854 | //drag
855 | var dragTop;
856 | var dir = 1;
857 | var newY;
858 | var oldY = e.clientY;
859 | //drag
860 |
861 | strMoveTop = strMove.position().top;
862 | k2 = strMoveTop - (e.clientY - strWrap.offset().top);
863 | $(this).on('mousemove', function (e) {
864 |
865 |
866 | fMove = true;
867 |
868 | //drag
869 | newY = e.clientY;
870 | if(newY > oldY){
871 | dir = 1
872 | }else{
873 | if(newY < oldY){
874 | dir = -1
875 | }
876 | }
877 | oldY = newY
878 | dragTop = k2 + e.clientY - strWrap.offset().top;
879 |
880 | if(dragTop < -strMove.height() && dir < 0){
881 | dragTop = strWrap.height();
882 | strMoveTop = strMove.position().top;
883 | k2 = strMoveTop - (e.clientY - strWrap.offset().top);
884 | }
885 | if(dragTop > strWrap.height() && dir > 0){
886 | dragTop = -strMove.height();
887 | strMoveTop = strMove.position().top;
888 | k2 = strMoveTop - (e.clientY - strWrap.offset().top);
889 | }
890 | //*drag
891 |
892 | strMove.stop(true).css({
893 | top: dragTop
894 | });
895 |
896 |
897 | }).on('mouseup', function () {
898 | if(p.inverthover){
899 | strMove.trigger('mouseenter')
900 | }
901 | $(this).off('mousemove');
902 | setTimeout(function () {
903 | fMove = false
904 | }, 50)
905 | });
906 | return false;
907 | })
908 | .on('click', function () {
909 | if (fMove) {
910 | return false
911 | }
912 | });
913 | } else {
914 | strWrap.addClass('no_drag');
915 | };
916 | }
917 | } else {
918 | strWrap.addClass('str_static');
919 | }
920 | };
921 | };
922 | if (p.direction == 'down') {
923 |
924 | strWrap.addClass('str_vertical').addClass('str_down');
925 | strMove.css({
926 | top: -strMove.height(),
927 | bottom: 'auto'
928 | })
929 | if (strMove.height() > strWrap.height()) {
930 | var topPos = strWrap.height();
931 | if (p.circular) {
932 | if (!p.xml) {
933 | circCloneVert();
934 | topPos = strMove.height();
935 | }
936 | }
937 | if (p.xml) {
938 | strMove.css({
939 | top:-strMove.height()
940 | })
941 | }
942 | var
943 | k2 = 0;
944 | timeFunc = function () {
945 | var
946 | fullS = strWrap.height(), //крайняя точка
947 | time = (fullS / strWrap.data('scrollamount')) * 1000; //время
948 |
949 | if (parseFloat(strMove.css('top')) != 0) {
950 | fullS = (strMove.height() + strWrap.height());
951 | time = (fullS - (strMove.height() + parseFloat(strMove.css('top')))) / strWrap.data('scrollamount') * 1000;
952 | }
953 | return time;
954 | };
955 | var moveFunc = function () {
956 |
957 | if (loop != 0) {
958 | strMove.animate({
959 | top: topPos
960 | }, timeFunc(), 'linear', function () {
961 | $(this).css({
962 | top: -strMove.height()
963 | });
964 | if (loop == -1) {
965 |
966 | setTimeout(moveFunc, p.scrolldelay);
967 | } else {
968 | loop--;
969 | setTimeout(moveFunc, p.scrolldelay);
970 | };
971 | });
972 | };
973 | };
974 | strWrap.data({
975 | moveF : moveFunc
976 | })
977 | if(!p.inverthover){
978 | moveFunc();
979 | }
980 | if (p.hoverstop) {
981 | strWrap.on(enterEvent, function () {
982 | $(this).addClass('str_active');
983 | strMove.stop(true);
984 | }).on(leaveEvent, function () {
985 | $(this).removeClass('str_active');
986 | $(this).off('mousemove');
987 | moveFunc();
988 | });
989 |
990 | if (p.drag) {
991 | strWrap.on('mousedown', function (e) {
992 | if(p.inverthover){
993 | strMove.stop(true);
994 | }
995 |
996 | //drag
997 | var dragTop;
998 | var dir = 1;
999 | var newY;
1000 | var oldY = e.clientY;
1001 | //drag
1002 |
1003 |
1004 | strMoveTop = strMove.position().top;
1005 | k2 = strMoveTop - (e.clientY - strWrap.offset().top);
1006 | $(this).on('mousemove', function (e) {
1007 |
1008 | fMove = true;
1009 |
1010 | //drag
1011 | newY = e.clientY;
1012 | if(newY > oldY){
1013 | dir = 1
1014 | }else{
1015 | if(newY < oldY){
1016 | dir = -1
1017 | }
1018 | }
1019 | oldY = newY
1020 | dragTop = k2 + e.clientY - strWrap.offset().top;
1021 |
1022 |
1023 | if (!p.circular){
1024 | if(dragTop < -strMove.height() && dir < 0){
1025 | dragTop = strWrap.height();
1026 | strMoveTop = strMove.position().top;
1027 | k2 = strMoveTop - (e.clientY - strWrap.offset().top);
1028 | }
1029 | if(dragTop > strWrap.height() && dir > 0){
1030 | dragTop = -strMove.height();
1031 | strMoveTop = strMove.position().top;
1032 | k2 = strMoveTop - (e.clientY - strWrap.offset().top);
1033 | }
1034 | }else{
1035 | if(dragTop < -strMove.height() && dir < 0){
1036 | dragTop = 0;
1037 | strMoveTop = strMove.position().top;
1038 | k2 = strMoveTop - (e.clientY - strWrap.offset().top);
1039 | }
1040 | if(dragTop > 0 && dir > 0){
1041 | dragTop = -strMove.height();
1042 | strMoveTop = strMove.position().top;
1043 | k2 = strMoveTop - (e.clientY - strWrap.offset().top);
1044 | }
1045 | }
1046 |
1047 |
1048 | strMove.stop(true).css({
1049 | top: dragTop
1050 | });
1051 | //drag
1052 |
1053 |
1054 |
1055 | }).on('mouseup', function () {
1056 | if(p.inverthover){
1057 | strMove.trigger('mouseenter')
1058 | }
1059 | $(this).off('mousemove');
1060 | setTimeout(function () {
1061 | fMove = false
1062 | }, 50)
1063 | });
1064 | return false;
1065 | })
1066 | .on('click', function () {
1067 | if (fMove) {
1068 | return false
1069 | }
1070 | });
1071 | } else {
1072 | strWrap.addClass('no_drag');
1073 | };
1074 | }
1075 | } else {
1076 | if (p.runshort) {
1077 | var k2 = 0;
1078 | var timeFunc = function () {
1079 | time = (strWrap.height() - strMove.position().top) / strWrap.data('scrollamount') * 1000;
1080 | return time;
1081 | };
1082 | var moveFunc = function () {
1083 | if (loop != 0) {
1084 | var topPos = strWrap.height();
1085 | strMove.animate({
1086 | top: topPos
1087 | }, timeFunc(), 'linear', function () {
1088 | $(this).css({
1089 | top: -strMove.height()
1090 | });
1091 | if (loop == -1) {
1092 | setTimeout(moveFunc, p.scrolldelay);
1093 | } else {
1094 | loop--;
1095 | setTimeout(moveFunc, p.scrolldelay);
1096 | };
1097 | });
1098 | }
1099 | };
1100 | strWrap.data({
1101 | moveF : moveFunc
1102 | })
1103 | if(!p.inverthover){
1104 | moveFunc();
1105 | }
1106 | if (p.hoverstop) {
1107 | strWrap.on(enterEvent, function () {
1108 | $(this).addClass('str_active');
1109 | strMove.stop(true);
1110 | }).on(leaveEvent, function () {
1111 | $(this).removeClass('str_active');
1112 | $(this).off('mousemove');
1113 | moveFunc();
1114 | });
1115 |
1116 | if (p.drag) {
1117 | strWrap.on('mousedown', function (e) {
1118 | if(p.inverthover){
1119 | strMove.stop(true);
1120 | }
1121 |
1122 | //drag
1123 | var dragTop;
1124 | var dir = 1;
1125 | var newY;
1126 | var oldY = e.clientY;
1127 | //drag
1128 |
1129 | strMoveTop = strMove.position().top;
1130 | k2 = strMoveTop - (e.clientY - strWrap.offset().top);
1131 | $(this).on('mousemove', function (e) {
1132 | fMove = true;
1133 |
1134 | //drag
1135 | newY = e.clientY;
1136 | if(newY > oldY){
1137 | dir = 1
1138 | }else{
1139 | if(newY < oldY){
1140 | dir = -1
1141 | }
1142 | }
1143 | oldY = newY
1144 | dragTop = k2 + e.clientY - strWrap.offset().top;
1145 |
1146 |
1147 | if(dragTop < -strMove.height() && dir < 0){
1148 | dragTop = strWrap.height();
1149 | strMoveTop = strMove.position().top;
1150 | k2 = strMoveTop - (e.clientY - strWrap.offset().top);
1151 | }
1152 | if(dragTop > strWrap.height() && dir > 0){
1153 | dragTop = -strMove.height();
1154 | strMoveTop = strMove.position().top;
1155 | k2 = strMoveTop - (e.clientY - strWrap.offset().top);
1156 | }
1157 | //*drag
1158 |
1159 | strMove.stop(true).css({
1160 | top: dragTop
1161 | });
1162 |
1163 |
1164 |
1165 |
1166 |
1167 |
1168 |
1169 |
1170 | }).on('mouseup', function () {
1171 | if(p.inverthover){
1172 | strMove.trigger('mouseenter')
1173 | }
1174 | $(this).off('mousemove');
1175 | setTimeout(function () {
1176 | fMove = false
1177 | }, 50)
1178 | })
1179 | return false;
1180 | })
1181 | .on('click', function () {
1182 | if (fMove) {
1183 | return false
1184 | }
1185 | });
1186 | } else {
1187 | strWrap.addClass('no_drag');
1188 | };
1189 | }
1190 | } else {
1191 | strWrap.addClass('str_static');
1192 | }
1193 | };
1194 | };
1195 |
1196 |
1197 |
1198 |
1199 | }
1200 | if (p.xml) {
1201 | $.ajax({
1202 | url: p.xml,
1203 | dataType: "xml",
1204 | success: function (xml) {
1205 | var xmlTextEl = $(xml).find('text');
1206 | var xmlTextLength = xmlTextEl.length;
1207 | for(var i = 0; i < xmlTextLength; i++){
1208 | var xmlElActive = xmlTextEl.eq(i);
1209 | var xmlElContent = xmlElActive.text();
1210 | var xmlItemEl = $('').text(xmlElContent).appendTo(strWrap);
1211 |
1212 | if(p.direction == 'left' || p.direction == 'right'){
1213 | xmlItemEl.css({display:'inline-block',textAlign:'right'});
1214 | if(i > 0){
1215 | xmlItemEl.css({width:strWrap.width()+xmlItemEl.width()});
1216 | }
1217 | }
1218 | if(p.direction == 'down' || p.direction == 'up'){
1219 | xmlItemEl.css({display:'block',textAlign:'left'});
1220 | if(i > 0){
1221 | xmlItemEl.css({paddingTop:strWrap.height()});
1222 | }
1223 | }
1224 |
1225 | }
1226 | code();
1227 | }
1228 | });
1229 | } else {
1230 | code();
1231 | }
1232 | strWrap.data({
1233 | ini:code,
1234 | startheight: startHeight
1235 | })
1236 |
1237 |
1238 |
1239 |
1240 | });
1241 | },
1242 | update: function () {
1243 | var el = $(this);
1244 | var str_origin = $('.str_origin',el);
1245 | var str_move_clone = $('.str_move_clone',el);
1246 | str_origin.stop(true);
1247 | str_move_clone.remove();
1248 | el.data('ini')();
1249 | },
1250 | destroy: function () {
1251 |
1252 | var el = $(this);
1253 | var elMove = $('.str_move',el);
1254 | var startHeight = el.data('startheight');
1255 |
1256 | $('.str_move_clone',el).remove();
1257 | el.off('mouseenter');
1258 | el.off('mousedown');
1259 | el.off('mouseup');
1260 | el.off('mouseleave');
1261 | el.off('mousemove');
1262 | el.removeClass('noStop').removeClass('str_vertical').removeClass('str_active').removeClass('no_drag').removeClass('str_static').removeClass('str_right').removeClass('str_down');
1263 |
1264 | var elStyle = el.attr('style');
1265 | if(elStyle){
1266 | var styleArr = elStyle.split(';');
1267 | for(var i=0; i < styleArr.length; i++){
1268 | var str = $.trim(styleArr[i]);
1269 | var tested = str.search(/^height/g);
1270 | if(tested != -1){
1271 | styleArr[i] = '';
1272 | }
1273 | }
1274 | var newArr = styleArr.join(';');
1275 | var newStyle = newArr.replace(/;+/g,';')
1276 |
1277 | if(newStyle == ';'){
1278 | el.removeAttr('style');
1279 | }else{
1280 | el.attr('style',newStyle);
1281 | }
1282 |
1283 | if(startHeight){
1284 | el.css({height:startHeight})
1285 | }
1286 | }
1287 | elMove.stop(true);
1288 |
1289 | if(elMove.length){
1290 | var context = elMove.html();
1291 | elMove.remove();
1292 | el.html(context);
1293 | }
1294 |
1295 | },
1296 | pause: function(){
1297 | var el = $(this);
1298 | var elMove = $('.str_move',el);
1299 | elMove.stop(true);
1300 | },
1301 | play: function(){
1302 | var el = $(this);
1303 | $(this).off('mousemove');
1304 | el.data('moveF')();
1305 | }
1306 |
1307 | };
1308 | $.fn.liMarquee = function (method) {
1309 | if (methods[method]) {
1310 | return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
1311 | } else if (typeof method === 'object' || !method) {
1312 | return methods.init.apply(this, arguments);
1313 | } else {
1314 | $.error('Метод ' + method + ' в jQuery.liMarquee не существует');
1315 | }
1316 | };
1317 | })(jQuery);
1318 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "jquery.limarquee",
3 | "version": "4.6.0",
4 | "description": "A jQuery plugin that help you made running content",
5 | "main": "js/jquery.liMarquee.js",
6 | "directories": {
7 | "example": "examples"
8 | },
9 | "scripts": {
10 | "test": "echo \"Error: no test specified\" && exit 1"
11 | },
12 | "repository": {
13 | "type": "git",
14 | "url": "git+https://github.com/omcg33/jquery.limarquee.git"
15 | },
16 | "keywords": [
17 | "marquee",
18 | "text",
19 | "slider",
20 | "limarquee"
21 | ],
22 | "author": "Linnik Yura",
23 | "license": "SEE LICENSE IN js/jquery.liMarquee.js",
24 | "bugs": {
25 | "url": "https://github.com/omcg33/jquery.limarquee/issues"
26 | },
27 | "homepage": "https://github.com/omcg33/jquery.limarquee#readme",
28 | "dependencies": {
29 | "jquery": "^1.9||^2.0"
30 | }
31 | }
32 |
--------------------------------------------------------------------------------