Скроллинг списка бывает очень нужен, причём красивый скроллинг, который можно было бы украсить изображениями и анимационными эффектами. Flash/Flex использовать всего навсего из-за одного-двух блоков на сайте нет никакого желания. Вот из-за этого мне пришлось написать небольшой скрипт, который скроллит список. Украшается такая штука на ура.
Скрипт использует jquery для создания эффекта плавного появления. В этом примере от jquery пользы никакой, но поскольку я взял этот код из рабочего проекта, то менять его на getElementById мне было лень. Кому нужно сам разберётся какую строку нужно заменить. Demo тут.
Скрипт использует jquery для создания эффекта плавного появления. В этом примере от jquery пользы никакой, но поскольку я взял этот код из рабочего проекта, то менять его на getElementById мне было лень. Кому нужно сам разберётся какую строку нужно заменить. Demo тут.
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <title>javascript scroll</title>
6 <script type="text/javascript" language="JavaScript" src="jquery.js"></script>
7 <script type="text/javascript" language="JavaScript">
8
9 var currentItem = 1;
10 /** Подняться на один пункт вверх. */
11 function up() {
12 if (currentItem == 1) {
13 return;
14 }
15
16 currentItem--;
17 $("#item-" + (currentItem + 3)).hide();
18 $("#item-" + currentItem).fadeIn(500);
19 }
20
21 /** Опуститься по списку на один пункт. */
22 function down() {
23 if (currentItem == 7) {
24 return;
25 }
26 currentItem++;
27 $("#item-" + (currentItem - 1)).hide();
28 $("#item-" + (currentItem + 2)).fadeIn(500);
29 }
30
31 </script>
32 </head>
33 <body>
34
35 <h1>javascript scroll</h1>
36 <ul>
37 <li id="item-1">item a</li>
38 <li id="item-2">item b</li>
39 <li id="item-3">item c</li>
40 <li id="item-4" style="display: none;">item d</li>
41 <li id="item-5" style="display: none;">item e</li>
42 <li id="item-6" style="display: none;">item f</li>
43 <li id="item-7" style="display: none;">item g</li>
44 <li id="item-8" style="display: none;">item h</li>
45 <li id="item-9" style="display: none;">item i</li>
46 </ul>
47
48 <a href="javascript: up();">вверх</a>
49 <a href="javascript: down();">вниз</a>
50
51 </body>
52 </html>
Сообщения
Комментариев нет:
Отправить комментарий