Перейти к содержимому


Валидная Бегущая Строка


  • Авторизуйтесь для ответа в теме
Сообщений в теме: 27

#21 Vaccina

Vaccina

    Активный участник

  • Модераторы
  • 24 353 сообщений

Отправлено 04 Февраль 2016 - 07:07

После
<pre id="ani1">
<a href="index.php?route=product/manufacturer&manufacturer_id=56"><img src="{ASSETS_IMAGES_PATH}4.png" alt="" title="" /></a>
</pre>

добавьте аналогичные строки со своими значениями, пример:
<pre id="ani2">
<a href="ссылка"><img src="{ASSETS_IMAGES_PATH}5.png" alt="" title="" /></a>
</pre>


#22 3796

3796

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 252 сообщений
  • ГородИваново

Отправлено 04 Февраль 2016 - 09:14

Просмотр сообщенияVaccina (04 Февраль 2016 - 07:07) писал:

После
<pre id="ani1">
<a href="index.php?route=product/manufacturer&manufacturer_id=56"><img src="{ASSETS_IMAGES_PATH}4.png" alt="" title="" /></a>
</pre>

добавьте аналогичные строки со своими значениями, пример:
<pre id="ani2">
<a href="ссылка"><img src="{ASSETS_IMAGES_PATH}5.png" alt="" title="" /></a>
</pre>

Добавила, но фото не появилось.
После вписала #ani2  в строку в коде

gsqoXI3.png

Теперь фото появилось, но стоит на месте.  И те, что движутся, убегают и больше не появляются.
Явно ещё нужно что-то добавить в код.

#23 RedHead

RedHead

    Активный участник

  • Модераторы
  • 1 052 сообщений

Отправлено 04 Февраль 2016 - 09:49

Просмотр сообщенияSilver-Pegas (04 Февраль 2016 - 09:14) писал:

Добавила, но фото не появилось.
После вписала #ani2  в строку в коде

Прикрепленный файл gsqoXI3.png

Теперь фото появилось, но стоит на месте.  И те, что движутся, убегают и больше не появляются.
Явно ещё нужно что-то добавить в код.

Здравствуйте. Чтобы подключить третью картинку, в шаблоне html замените скрипт:
<script language="JavaScript" type="text/javascript">
var timer, nPos = 0,
stop = false;
function anistop() {
stop = true
}
function anirun() {
start()
}
function start() {
stop = false;
timer && window.clearInterval(timer);
document.getElementById("anic");
var a = document.getElementById("ani"),
b = document.getElementById("ani1"),
c = document.getElementById("ani2"),
d = a.offsetWidth;
timer = setTimeout(function () {
a.style.left = b.style.left = nPos + "px";
nPos -= 3;
if (nPos < -c) nPos = 0;
stop || setTimeout(arguments.callee, 25)
}, 10)
}
window.onload = start;
</script>
на:
<script language="JavaScript" type="text/javascript">
var timer, nPos = 0,
stop = false;
function anistop() {
stop = true
}
function anirun() {
start()
}
function start() {
stop = false;
timer && window.clearInterval(timer);
document.getElementById("anic");
var a = document.getElementById("ani"),
b = document.getElementById("ani1"),
c = document.getElementById("ani2"),
d = a.offsetWidth;
timer = setTimeout(function () {
a.style.left = b.style.left = c.style.left = nPos + "px";
nPos -= 2;
if (nPos < -d) nPos = 0;
stop || setTimeout(arguments.callee, 25)
}, 10)
}
window.onload = start;
</script>


#24 3796

3796

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 252 сообщений
  • ГородИваново

Отправлено 04 Февраль 2016 - 10:09

Просмотр сообщенияRedHead (04 Февраль 2016 - 09:49) писал:

Здравствуйте. Чтобы подключить третью картинку, в шаблоне html замените скрипт:
<script language="JavaScript" type="text/javascript">
var timer, nPos = 0,
stop = false;
function anistop() {
stop = true
}
function anirun() {
start()
}
function start() {
stop = false;
timer && window.clearInterval(timer);
document.getElementById("anic");
var a = document.getElementById("ani"),
b = document.getElementById("ani1"),
c = document.getElementById("ani2"),
d = a.offsetWidth;
timer = setTimeout(function () {
a.style.left = b.style.left = nPos + "px";
nPos -= 3;
if (nPos < -c) nPos = 0;
stop || setTimeout(arguments.callee, 25)
}, 10)
}
window.onload = start;
</script>
на:
<script language="JavaScript" type="text/javascript">
var timer, nPos = 0,
stop = false;
function anistop() {
stop = true
}
function anirun() {
start()
}
function start() {
stop = false;
timer && window.clearInterval(timer);
document.getElementById("anic");
var a = document.getElementById("ani"),
b = document.getElementById("ani1"),
c = document.getElementById("ani2"),
d = a.offsetWidth;
timer = setTimeout(function () {
a.style.left = b.style.left = c.style.left = nPos + "px";
nPos -= 2;
if (nPos < -d) nPos = 0;
stop || setTimeout(arguments.callee, 25)
}, 10)
}
window.onload = start;
</script>

Алгоритм поняла.
Но что-то всё равно не так. Доходит до второй картинки и перепрыгивает заново.
Т.е. остальные фото вообще не заходят "за кулисы".  Получается не бегущая строка, а прыгающая.)

#25 RedHead

RedHead

    Активный участник

  • Модераторы
  • 1 052 сообщений

Отправлено 04 Февраль 2016 - 13:46

Просмотр сообщенияSilver-Pegas (04 Февраль 2016 - 10:09) писал:

Алгоритм поняла.
Но что-то всё равно не так. Доходит до второй картинки и перепрыгивает заново.
Т.е. остальные фото вообще не заходят "за кулисы".  Получается не бегущая строка, а прыгающая.)

Предлагаю Вам другую, более простую реализацию.

В шаблоне html замените блок кода:
<style type="text/css">
#anic {
position:relative;
padding:0px;
width:1150px; height:94px;
overflow:hidden;
background-color: #fff;
margin:0 auto;
}
#anic img {
				 max-height: 75px;
				 padding-left: 10px;
				 display: inline-block;
				 margin-top: -5px;
}
#ani, #ani1, #ani2, #ani3 {
color: #000;
display:inline-block;
position:relative;
}
</style>
<script language="JavaScript" type="text/javascript">
var timer, nPos = 0,
stop = false;
function anistop() {
stop = true
}
function anirun() {
start()
}
function start() {
stop = false;
timer && window.clearInterval(timer);
document.getElementById("anic");
var a = document.getElementById("ani"),
b = document.getElementById("ani1"),
c = document.getElementById("ani2"),
d = a.offsetWidth;
timer = setTimeout(function () {
a.style.left = b.style.left = c.style.left = nPos + "px";
nPos -= 2;
if (nPos < -d) nPos = 0;
stop || setTimeout(arguments.callee, 25)
}, 10)
}
window.onload = start;
</script>
<div class="clear"></div>
<div id="anic" onmouseover="anistop()" onmouseout="anirun()">
<pre id="ani">
<a href="http://silver-pegas.ru/catalog"><img src="{ASSETS_IMAGES_PATH}3.png" alt="" title="" /></a>
</pre>
<pre id="ani1">
<a href="http://silver-pegas.ru/catalog"><img src="{ASSETS_IMAGES_PATH}4.png" alt="" title="" /></a>
</pre>
<pre id="ani2">
<a href="http://silver-pegas.ru/catalog"><img src="{ASSETS_IMAGES_PATH}789.png" alt="" title="" /></a>
</pre>
</div>
<br>
на:
<div class="beg-stroka"> 
<marquee scrollamount="10">
<a href="#">
<img src="{ASSETS_IMAGES_PATH}4.png" alt="" title="" style="max-height: 100px;"/>
</a>
<a href="#">
<img src="{ASSETS_IMAGES_PATH}789.png" alt="" title="" style="max-height: 100px;"/>
</a>
<a href="#">
<img src="{ASSETS_IMAGES_PATH}3.png" alt="" title="" style="max-height: 100px;"/>
</a><a href="#">
<img src="{ASSETS_IMAGES_PATH}3.png" alt="" title="" style="max-height: 100px;"/>
</a>
<a href="#">
<img src="{ASSETS_IMAGES_PATH}3.png" alt="" title="" style="max-height: 100px;"/>
</a>
<a href="#">
<img src="{ASSETS_IMAGES_PATH}4.png" alt="" title="" style="max-height: 100px;"/>
</a>
<a href="#">
<img src="{ASSETS_IMAGES_PATH}789.png" alt="" title="" style="max-height: 100px;"/>
</a>
</a><a href="#">
<img src="{ASSETS_IMAGES_PATH}3.png" alt="" title="" style="max-height: 100px;"/>
</a>
<a href="#">
<img src="{ASSETS_IMAGES_PATH}3.png" alt="" title="" style="max-height: 100px;"/>
</a>
</marquee>
</div>
и в конец main.css добавьте:
.beg-stroka {
position:relative;
padding:10px;
width:1150px;
background-color: #fff;
margin:0 auto;
}


#26 3796

3796

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 252 сообщений
  • ГородИваново

Отправлено 04 Февраль 2016 - 16:16

Просмотр сообщенияRedHead (04 Февраль 2016 - 13:46) писал:

Предлагаю Вам другую, более простую реализацию.


Супер! Эта "конструкция" намного проще и лучше.  Огромное спасибо!

#27 reload_69

reload_69

    Новичок

  • Пользователи
  • Pip
  • 1 сообщений
  • ГородТверь

Отправлено 06 Июнь 2016 - 00:09

Для меня тоже сейчас тема актуальна, но хотелось бы валидный код. Подскажите, не получается.
Мои действия:
1. В тело документа пишу
<div id="scroller_container">
<div id="scroller">

Содержание бегущей строки

</div>
</div>
http://c2n.me/3yRWhiz
2. В CSS файл вставляю
/* Scroller Box */
#scroller_container {
position: relative;
width: 600px;
height: 60px;
overflow: hidden;
}
#scroller {
white-space: nowrap;
line-height: 60px;
font-size: 36px;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
/* Scoller Box */
http://c2n.me/3yRWsQo
3. Заливаю на сарвер файлы Js http://c2n.me/3yRX1rI
4. Между тегами head вставляю код, но не могу сохранить его, т.к. пишет что ошибка в коде
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="jscroller-0.4.js"></script>
<script type="text/javascript">
$(document).ready(function(){
// Add Scroller Object
$jScroller.add("#scroller_container","#scroller","left",10, true);	   
// Start Autoscroller
		  $jScroller.start();
		  });
  </script>
http://c2n.me/3yRWTLJ
Подскажите, пожалуйста, Действительно ли есть ошибка в 4-м пункте?

#28 Юля123

Юля123

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 2 567 сообщений

Отправлено 06 Июнь 2016 - 10:04

Просмотр сообщенияreload_69 (06 Июнь 2016 - 00:09) писал:

Для меня тоже сейчас тема актуальна, но хотелось бы валидный код. Подскажите, не получается.
Мои действия:
1. В тело документа пишу
<div id="scroller_container">
<div id="scroller">

Содержание бегущей строки

</div>
</div>
http://c2n.me/3yRWhiz
2. В CSS файл вставляю
/* Scroller Box */
#scroller_container {
position: relative;
width: 600px;
height: 60px;
overflow: hidden;
}
#scroller {
white-space: nowrap;
line-height: 60px;
font-size: 36px;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
/* Scoller Box */
http://c2n.me/3yRWsQo
3. Заливаю на сарвер файлы Js http://c2n.me/3yRX1rI
4. Между тегами head вставляю код, но не могу сохранить его, т.к. пишет что ошибка в коде
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="jscroller-0.4.js"></script>
<script type="text/javascript">
$(document).ready(function(){
// Add Scroller Object
$jScroller.add("#scroller_container","#scroller","left",10, true);	
// Start Autoscroller
		 $jScroller.start();
		 });
</script>
http://c2n.me/3yRWTLJ
Подскажите, пожалуйста, Действительно ли есть ошибка в 4-м пункте?

Здравствуйте, предлагаю Вам воспользоваться более простой инструкцией из сообщения 25, для реализации бегущей строки не требуется использования скриптов, а много проще в реализации. Чтобы ее добавить,  в необходимом шаблоне, в месте, где должна располагаться бегущая строка добавляете код:


<div class="beg-stroka">
<marquee scrollamount="10">
<a href="#">
<img src="ссылка на картинку1" alt="" title="" style="max-height: 100px;"/>
</a>
<a href="#">
<img src="ссылка на картинку 2" alt="" title="" style="max-height: 100px;"/>
</a>
<a href="#">
<img src="ссылка на картинку 3" alt="" title="" style="max-height: 100px;"/>
</a>
<a href="#">
<img src="ссылка на картинку 4" alt="" title="" style="max-height: 100px;"/>
</a>
<a href="#">
<img src="ссылка на картинку 5" alt="" title="" style="max-height: 100px;"/>
</a>
<a href="#">
<img src="ссылка на картинку 6" alt="" title="" style="max-height: 100px;"/>
</a>
<a href="#">
<img src="ссылка на картинку 7" alt="" title="" style="max-height: 100px;"/>
</a>
</a><a href="#">
<img src="ссылка на картинку 8" alt="" title="" style="max-height: 100px;"/>
</a>
<a href="#">
<img src="ссылка на картинку 9" alt="" title="" style="max-height: 100px;"/>
</a>
</marquee>
</div>


ссылки на картинку заменяйте на нужные. Так же это могут быть не картинки, а строка. Для этого добавляйте код:

<div class="beg-stroka">
<marquee scrollamount="10">
<a href="#">
Текст
</a>
</marquee>
</div>

и в конец main.css добавьте:
.beg-stroka {
position:relative;
padding:10px;
width:1150px;
background-color: #fff;
margin:0 auto;
}





Количество пользователей, читающих эту тему: 0

0 пользователей, 0 гостей, 0 анонимных