X   Сообщение сайта
(Сообщение закроется через 3 секунды)



 

Здравствуйте, гость (

| Вход | Регистрация )

Открыть тему
Тема закрыта
> Прокрутка изображений
a2kat
a2kat
Topic Starter сообщение 1.5.2010, 15:38; Ответить: a2kat
Сообщение #1


Добрый день.

Я создаю сайт. Шаблон создан, ссылки реализованы...теперь нужно каждую страницу чем-то заполнять:) и первая проблема, с которой я столкнулся-это скрипт прокрутки изображний...Я сделал (можно сказать) галерею(Блок 680х500, а под ним блок в котором маленькие фотографии и при щелчке на 1 из них она показывается в большем размере в большом блоке).Так мне нужно прокручивать те самые маленькие картинки...сделать прокрутку вертикальной, используя overflow:auto это легко и не очень красиво под мой вариант расположения маленьких картинок...Если есть здесь люди, которые хорошо разбираются и без труда делают такие скрипты, подскажите пожалуйста. Буду очень благодарен
0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Arks
Arks
сообщение 1.5.2010, 16:44; Ответить: Arks
Сообщение #2


обычно делают так: выводят все элементы в контейнере позиционированном абсолютно. Саму зону прокрутки ограничивают размерами и ставят ей overflow:hidden(контейнер помещают в нее)
Делают кнопки(скролы, mousemove-event'ы и т.п. кому как нравится) которые при возникновении события меняют css свойство top для контейнера - вот вам и прокрутка.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
a2kat
a2kat
Topic Starter сообщение 1.5.2010, 17:43; Ответить: a2kat
Сообщение #3


Arks, пример привести сможите?
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Arks
Arks
сообщение 1.5.2010, 19:34; Ответить: Arks
Сообщение #4


Пример - Яндекс - карта=)
На самом деле слишком долго писать такой скрипт ради примера. Много строчек кода, отдельно реализация drag&drop в случае скролла и т.п.
Ищите готовое.
Нашел на jQuery, http://mabp.kiev.ua/content/source/jscroll/jscroll-3.zip но 150кБ плагинов это ни в какие рамки для обычной прокрутки, с учетом еще и того что на страничке картинки будут.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Arks
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">
<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>
style.css:
.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
a2kat
Topic Starter сообщение 4.5.2010, 15:58; Ответить: 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>


Вот допустим простой пример...но он не работает.Что здесь не так?

Замечание модератора:
Эта тема была закрыта автоматически ввиду отсутствия активности в ней на протяжении 100+ дней.
Если Вы считаете ее актуальной и хотите оставить сообщение, то воспользуйтесь кнопкой
или обратитесь к любому из модераторов.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Открыть тему
Тема закрыта
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0


Свернуть

> Похожие темы

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) Продается сайт фотосток ИИ изображений
Хороший вариант!
20 alexey 3209 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


 



RSS Текстовая версия Сейчас: 28.3.2024, 13:45
Дизайн