Помощник
|
Прокрутка изображений |
a2kat
|
Сообщение
#1
|
||
|
|
||
|
|||
Arks |
1.5.2010, 16:44;
Ответить: Arks
Сообщение
#2
|
|
обычно делают так: выводят все элементы в контейнере позиционированном абсолютно. Саму зону прокрутки ограничивают размерами и ставят ей overflow:hidden(контейнер помещают в нее)
Делают кнопки(скролы, mousemove-event'ы и т.п. кому как нравится) которые при возникновении события меняют css свойство top для контейнера - вот вам и прокрутка. |
|
|
a2kat
|
Сообщение
#3
|
|
Arks, пример привести сможите?
|
|
|
Arks |
1.5.2010, 19:34;
Ответить: Arks
Сообщение
#4
|
|
Пример - Яндекс - карта=)
На самом деле слишком долго писать такой скрипт ради примера. Много строчек кода, отдельно реализация drag&drop в случае скролла и т.п. Ищите готовое. Нашел на jQuery, http://mabp.kiev.ua/content/source/jscroll/jscroll-3.zip но 150кБ плагинов это ни в какие рамки для обычной прокрутки, с учетом еще и того что на страничке картинки будут. |
|
|
Arks |
1.5.2010, 20:08;
Ответить: Arks
Сообщение
#5
|
|
Вот Вам простенький пример с использованием моего любимого jQuery по прокрутке.
Остается только выбрать элемент ответственный за прокрутку и прикрутить прокрутку на его событие. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> Для Вашего случая я бы поступил так:<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(function(){ for (i=0;i<10;i++){ $("#content").animate({bottom:400},3000); $("#content").animate({bottom:0},3000); } }); </script> <style type="text/css"> <!-- #container { height: 200px; width: 40%; margin:0 auto; background-color: #CCC; border: 1px solid #000; overflow:hidden; } body { padding-top: 100px; margin: 0px; } #content { position: relative; bottom: 0px; } --> </style> </head> <body> <div id="container"> <div id="content"> Из чего складывается успех современного коммерческого веб-сайта в условиях жесточайшей конкуренции? В первую очередь это – борьба за покупателя. За того покупателя, который еще не выбрал сайт, на котором совершит покупку, и за того, который уже находится на вашем сайте и готов к принятию решения о покупке. За посетителей первого типа отвечает оптимизация сайта. Поисковая оптимизация. Именно работы по этому направлению становятся основной статьей затрат у многих интернет-предпринимателей. Победу в борьбе за посетителей второго ряда обеспечивает копирайтер. Опытный копирайтер, способный не только придумать рекламный слоган, но и создать качественный контент для сайта, взять на себя такие обязанности, как информационная поддержка проекта, написание статей и текстов для сайта, нейминг, регулярно писать рекламные тексты… Разумеется, это – труд не для одного человека, каким бы высоким профессионалом он ни был. Информационная поддержка современного ресурса – задача для целой группы специалистов. Компания "Статья.ру" – это высокопрофессиональный копирайтинг, поставленный на промышленную основу. Наш капитал – слаженный коллектив специалистов, готовых успешно решить любую задачу, которую может поставить перед ними современный рынок интернет-услуг. Копирайтинг, рекламные тексты и контент для сайта, написание статей и рекламные тексты – опыт, накопленный нами за годы работы, позволяет предложить наиболее эффективное, быстрое и доступное решение любой проблемы, стоящей перед вашим сайтом. Написание текстов для сайтов самой разной направленности, информационная поддержка интернет-ресурсов любого уровня сложности, а главное, искренняя заинтересованность в успехе вашего бизнеса – вот основные причины того, почему наши клиенты обращаются к нам снова и снова. Заказать рекламные тексты? Или придумать рекламный слоган? Или поручить комплексную копирайт-поддержку своего нового проекта? - Статья.ру - выбирая лучшее! Потому что мы действительно заботимся о вашем бизнесе. </div> </div> </body> </html> сделал 2 кнопки соответственно вверх и вниз контейнера. Маленькие картинки поместил бы чтобы их влезало, ну например 3 строки в контейнер. При клике на соответствующую кнопку смещал бы контейнер ровно на 1 строку таблицы. Самая классная реализация, легко и эффективно. например вот с двумя кнопками(побыстрому сделал так что особо не рассчитывайте на применение): <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> style.css:<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(function(){ $("#container2").click(function(){ if ($("#content").offset().top>=-150){ $("#content").animate({bottom:"+=70"},400);} }); $("#container3").click(function(){ if ($("#content").offset().top<=140){ $("#content").animate({bottom:"-=70"},400);} }); }); </script> <link href="style.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="container3">Крутить вверх</div> <div class="container"> <div id="content"> <table width="100%" border="1" cellspacing="0" cellpadding="0"> <tr> <td height="70">1</td> <td>2</td> <td>3</td> </tr> <tr> <td height="70">4</td> <td>5</td> <td>6</td> </tr> <tr> <td height="70">7</td> <td>8</td> <td>9</td> </tr> <tr> <td height="70">10</td> <td>11</td> <td>12</td> </tr> <tr> <td height="70">13</td> <td>14</td> <td>15</td> </tr> <tr> <td height="70">16</td> <td>17</td> <td>18</td> </tr> <tr> <td height="70">19</td> <td>20</td> <td>21</td> </tr> <tr> <td height="70">22</td> <td>23</td> <td>24</td> </tr> </table> </div> </div> <div id="container2">Крутить вниз</div> </body> </html> .container {
height: 210px; width: 40%; margin:0 auto; background-color: #CCC; border: 1px solid #000; overflow:hidden; } #container2 { height: 40px; width: 10%; margin:0 auto; background-color: #CCC; border: 1px solid #000; } #container3 { height: 40px; width: 10%; margin:0 auto; background-color: #CCC; border: 1px solid #000; } body { padding-top: 100px; margin: 0px; } #content { position: relative; bottom: 0; } |
|
|
a2kat
|
Сообщение
#6
|
|
|
<html> <head> <script type="javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#right").click(function(){ $(".block").animate({"left": "+=50px"}, "slow"); }); $("#left").click(function(){ $(".block").animate({"left": "-=50px"}, "slow"); }); }); </script> </head> <body> <button id="right">-</button> <button id="left">+</button> <div class="block" style="position:absolute;background-color:#black;left:50px;width:120px;height:100px;margin:5px"></div> </body> </html> Вот допустим простой пример...но он не работает.Что здесь не так?
|
|
|
||
|
Похожие темы
Тема | Ответов | Автор | Просмотров | Последний ответ | |
---|---|---|---|---|---|
Продается сайт фотосток ИИ изображений Хороший вариант! |
20 | alexey | 3210 | 25.6.2023, 15:28 автор: alexey |
|
Корректность показа вёрстки изображений на разных гаджетах Не сохраняются пропорции изображений на смартфонах |
1 | master-vek | 37244 | 25.3.2021, 13:22 автор: tedder |
|
Личный фотосток, много бесплатных изображений | 15 | Ultrastalker | 5928 | 30.3.2020, 10:15 автор: Ultrastalker |
|
Продам 120 изображений с фотостока DepositPhotos Выгодное предложение |
6 | Морфин | 1767 | 20.1.2020, 20:36 автор: Морфин |
|
Обработка фотографий и изображений для сайтов, и не только … | 0 | DarkUnicorn | 2127 | 4.6.2019, 22:57 автор: DarkUnicorn |
Текстовая версия | Сейчас: 29.3.2024, 5:11 |