Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Полоса рейтинга по состоянию просмотра странице (https://javascript.ru/forum/dom-window/13729-polosa-rejjtinga-po-sostoyaniyu-prosmotra-stranice.html)

Sweet 11.12.2010 14:14

Во:
<div style="position: relative; width:200px; height:20px;">
  <div style="position: relative; height:20px; background-color:#0033CC;" id="reit">
    <div style="position: relative; height:20px; width:200px;">Число просмотров.</div>
  </div>
</div>
<script>           
var show = 200;
if (show < 1000 ) {
document.getElementById('reit').style.width = ( show / 1000 ) * 200 + 'px'; 
} else {
document.getElementById('reit').style.width = ( show / 10000) * 200 + 'px';
}                
</script>

ybiza 11.12.2010 19:46

Sweet Огромное спасибо извини что пропал отходил от компьютера поэтому сразу не сказал спасибо. Выручил прям не знаю как! Почему у тебя карма 514 я же по моему ставил + 515 было не могу понять.

Слушай а ты мне ссылку давал на материал там анимация была сюда тоже можно это прикрутить чтобы при загрузки страниц она наполняла блок. Щас вот думаю как это реализовать.

Написал вот так работает но без анимации. Что не так!


<div style="position: relative; width:200px; height:20px;">
<div style="position: relative; height:20px; background-color:#0033CC;" id="reit">
<div style="position: relative; height:20px; width:200px;">Число просмотров.</div>
</div>
</div>
<script>      
var element = document.getElementById("reit");
var from = 0; // Начальная координата X
var to = <?php echo $this->article->hits; ?>; // Конечная координата X
var duration = 1000; // Длительность - 1 секунда
var start = new Date().getTime(); // Время старта

setTimeout(function() {
    var now = (new Date().getTime()) - start; // Текущее время
    var progress = now / duration; // Прогресс анимации

    var result =  ( to / 1000 ) * 200;

    element.style.width = result + "px";

    if (progress < 1) // Если анимация не закончилась, продолжаем
        setTimeout(arguments.callee, 10);
}, 10);


function delta(progress) {
    return Math.pow(progress, 2);
}                
</script>

ybiza 11.12.2010 20:20

Кто нибудь скажите пожалуйста почему скрипт не работает в IE 6 как в остальных IE не знаю.
<div style="position: relative; width:200px; height:20px;">
  <div style="position: relative; height:20px; background-color:#0033CC;" id="reit">
    <div style="position: relative; height:20px; width:200px;">Число просмотров.</div>
  </div>
</div>
<script>           
var show = 200;
if (show < 1000 ) {
document.getElementById('reit').style.width = ( show / 1000 ) * 200 + 'px'; 
} else {
document.getElementById('reit').style.width = ( show / 10000) * 200 + 'px';
}                
</script>

Sweet 11.12.2010 21:48

В IE не работает из-за позиционирования (используй position: absolute).
Что касается анимированного варианта: функция работает, но result-то не меняется и всегда равен конечному результату:) Но в твоем случае лучше привязываться не ко времени, а к длине. Как-то так:
<div style="position: absolute; width:200px; height:20px;">
  <div style="position: absolute; height:20px; background-color:#0033CC;" id="reit">
    <div style="position: absolute; height:20px; width:200px;">Число просмотров.</div>
  </div>
</div>
<script>      
var element = document.getElementById("reit"),
    now = 0,
    to = 273;
    
(function(){
  if(now < to){
    element.style.width = ( now++ / 1000 ) * 200 + 'px';
    setTimeout(arguments.callee, 1);
  };
}());             
</script>

ybiza 11.12.2010 21:54

Профессор Sweet СПАСИБО ОГРОМНОЕ!!! Сижу сейчас как дурак радуюсь просто супер то что надо. Можно было бы плюсов наставил Карма лопнула. Еще раз огромное спасибо!

Sweet 11.12.2010 21:56

Пожалуйста:)


Часовой пояс GMT +3, время: 00:23.