Форум: Форум PHPФорум ApacheФорум Регулярные ВыраженияФорум MySQLHTML+CSS+JavaScriptФорум FlashРазное
Новые темы: 0000000
MySQL на примерах. Авторы: Кузнецов М.В., Симдянов И.В. Социальная инженерия и социальные хакеры. Авторы: Кузнецов М.В., Симдянов И.В. Самоучитель MySQL 5. Авторы: Кузнецов М.В., Симдянов И.В. Самоучитель PHP 5 / 6 (3 издание). Авторы: Кузнецов М.В., Симдянов И.В. PHP Puzzles. Авторы: Кузнецов М.В., Симдянов И.В.
ВСЕ НАШИ КНИГИ
Консультационный центр SoftTime

HTML+CSS+JavaScript

Выбрать другой форум

 

Здравствуйте, Посетитель!

вид форума:
Линейный форум Структурный форум

тема: "Падающий снег" нужно усовершенствовать скрипт.
 
 автор: drago   (16.11.2005 в 03:14)   письмо автору
 
 

Помогите сделать так, чтобы снег падал на всей странице, не зависимо от прокрутки.
То есть, сейчас он падает только вверхней части, а если страница растянута вниз, то если прокрутить, его не видно.

//Извените, не в ту ветку запостил. Жаль перенести самому нельзя.

   
 
 автор: 12345   (16.11.2005 в 04:11)   письмо автору
 
   для: drago   (16.11.2005 в 03:14)
 

1. Скрипт устарел - в FF не работает, NN4 помер. Советую поискать другой, поновее или написать : )
2. Самое простое - поправки в 3 местах (см.вложение) сделал. Но если страница будет более чем двойной высоты окна, то вид будет неприглядный при быстром скролле вверх. Чтобы было достойно, его по-другому писать надо.

   
 
 автор: Drago   (16.11.2005 в 06:18)   письмо автору
 
   для: 12345   (16.11.2005 в 04:11)
 

Да, в FF действительно не работает. :(
Поищем новый, а за этот спасибо. :)

   
 
 автор: 12345   (16.11.2005 в 23:41)   письмо автору
 
   для: Drago   (16.11.2005 в 06:18)
 

А вот код, работающий в FF, но с тем же багом первого экрана. Надо заметить, что падает он здесь гораздо менее навязчиво. http://www.hypergurl.com/snowmaker.html

Этот код без бага, но как-то очень по-синусоидному ведёт себя падение снежинок. http://www.dynamicdrive.com/dynamicindex3/snow.htm

   
 
 автор: Drago   (17.11.2005 в 22:46)   письмо автору
 
   для: 12345   (16.11.2005 в 23:41)
 

Спасибо за ссылки. :)

Первый, действительно красивый, жаль только там нельзя картинку подставить.

   
 
 автор: elenaki   (27.12.2005 в 21:44)   письмо автору
 
   для: Drago   (17.11.2005 в 22:46)
 

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

   
 
 автор: Vados   (27.12.2005 в 21:49)   письмо автору
 
   для: elenaki   (27.12.2005 в 21:44)
 

Привет! Лови!
Только весь код пропиши в начале тега <BODY>

<script type="text/javascript">

  //Путь к картинке
  var snowsrc="images/snow.gif"
  // Кол-во объектов на дисплее
  var no = 15;
  var hidesnowtime = 0;
  var snowdistance = "pageheight";

  var ie4up = (document.all) ? 1 : 0;
  var ns6up = (document.getElementById&&!document.all) ? 1 : 0;

    function iecompattest(){
    return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
    }

  var dx, xp, yp;    // координаты и позиция значения
  var am, stx, sty;  // амплитуда и шаг значения
  var i, doc_width = 800, doc_height = 600; 
  
  if (ns6up) {
    doc_width = self.innerWidth;
    doc_height = self.innerHeight;
  } else if (ie4up) {
    doc_width = iecompattest().clientWidth;
    doc_height = iecompattest().clientHeight;
  }

  dx = new Array();
  xp = new Array();
  yp = new Array();
  am = new Array();
  stx = new Array();
  sty = new Array();
  snowsrc=(snowsrc.indexOf("dynamicdrive.com")!=-1)? "snow.gif" : snowsrc
  for (i = 0; i < no; ++ i) {  
    dx[i] = 0;                        // установка координаты значения
    xp[i] = Math.random()*(doc_width-50);  // установка позиции значения
    yp[i] = Math.random()*doc_height;
    am[i] = Math.random()*20;         // установка амплитуды значения
    stx[i] = 0.02 + Math.random()/10; // установка значения шага
    sty[i] = 0.7 + Math.random();     // установка значения шага
        if (ie4up||ns6up) {
      if (i == 0) {
        document.write("<div id=\"dot"+ i +"\" style=\"POSITION: absolute; Z-INDEX: "+ i +"; VISIBILITY: visible; TOP: 15px; LEFT: 15px;\"><img src='"+snowsrc+"' border=\"0\"><\/div>");
      } else {
        document.write("<div id=\"dot"+ i +"\" style=\"POSITION: absolute; Z-INDEX: "+ i +"; VISIBILITY: visible; TOP: 15px; LEFT: 15px;\"><img src='"+snowsrc+"' border=\"0\"><\/div>");
      }
    }
  }

  function snowIE_NS6() { 
    doc_width = ns6up?window.innerWidth-10 : iecompattest().clientWidth-10;
        doc_height=(window.innerHeight && snowdistance=="windowheight")? window.innerHeight : (ie4up && snowdistance=="windowheight")?  iecompattest().clientHeight : (ie4up && !window.opera && snowdistance=="pageheight")? iecompattest().scrollHeight : iecompattest().offsetHeight;
    for (i = 0; i < no; ++ i) {  
      yp[i] += sty[i];
      if (yp[i] > doc_height-50) {
        xp[i] = Math.random()*(doc_width-am[i]-30);
        yp[i] = 0;
        stx[i] = 0.02 + Math.random()/10;
        sty[i] = 0.7 + Math.random();
      }
      dx[i] += stx[i];
      document.getElementById("dot"+i).style.top=yp[i]+"px";
      document.getElementById("dot"+i).style.left=xp[i] + am[i]*Math.sin(dx[i])+"px";  
    }
    snowtimer=setTimeout("snowIE_NS6()", 10);
  }

    function hidesnow(){
        if (window.snowtimer) clearTimeout(snowtimer)
        for (i=0; i<no; i++) document.getElementById("dot"+i).style.visibility="hidden"
    }
        

if (ie4up||ns6up){
    snowIE_NS6();
        if (hidesnowtime>0)
        setTimeout("hidesnow()", hidesnowtime*1000)
        }

</script>

   
 
 автор: 12345   (27.12.2005 в 22:17)   письмо автору
 
   для: Vados   (27.12.2005 в 21:49)
 

?? Какой смысл выкладывать неработающий скопированный код без ссылки на первоисточник?? Чтобы он начал работать, надо запустить snowIE_NS6(), но и с запуском там нелады с y-координатой. Первоисточник - приведённая выше ссылка http://www.dynamicdrive.com/dynamicindex3/snow.htm

Впрочем, при копировании их кода по инструкции, наблюдается та же картина (не работает).
...
Понятно, если страница пуста, скрипт вообще висит.

elenaki: а если увеличить snowtimer=setTimeout("snowIE_NS6()", 10); до 100? Падать будет крайне медленно, но и время на другие скрипты появится.

При изменении с 10 на 100 процент загрузки уменьшился с 25% до 5% (FF)

   
 
 автор: elenaki   (27.12.2005 в 22:19)   письмо автору
 
   для: Vados   (27.12.2005 в 21:49)
 

тоже самое. пока летят снежинки, ни один другой скрипт не работает на странице.
стоит только прокрутить немного вниз страницу, так, что снежинок не видно - начинают
бегать скроллинги.

у меня запустился. я сразу убрала вот это: snowsrc=(snowsrc.indexOf("dynamicdrive.com")!=-1)? "snow.gif" : snowsrc мне не нужны картинки. просто работа скрипта мне не нравится.
наверно, придется во Флаше рисовать...

сейчас посмотрела в taskmanagere - этот скрипт жрет 80% ЦПУ!

вообще-то нет, всего 25-30%, просто у меня три страницы было открыто с этим скриптом :).
но все равно, не многовато ли для JS?

   
 
 автор: Vados   (27.12.2005 в 23:02)   письмо автору
 
   для: elenaki   (27.12.2005 в 22:19)
 

Не знаю, у меня скрипт работает, не знаю, на счёт того, если есть ещё скрипты на страниуе, а вот как одиночный скрипт, нечего делать!

   
 
 автор: 12345   (28.12.2005 в 00:25)   письмо автору
 
   для: Vados   (27.12.2005 в 23:02)
 

Вот, нашёл ошибку, почему этот скрипт в IE не запускался. Если страницу пишешь правильно и до скрипта ни единого HTML-символа, то при запуске он выдаёт ошибку. Дело в том, что там определяют ширину документа до того как появился документ - document.body.clientWidth . Он для document.body выдаёт null и вслед за ним ошибку. Исправляется переносом этого места кода на место перед строкой snowIE_NS6();.. (Это кроме той ошибки, что при пустой странице не работает, когда document.body.clientHeight мало.)


В общем, elenaki: запустил я для интереса скрипт с первого ресурса - http://www.hypergurl.com/snowmaker.html (с багом первого экрана, не требует рисунков), так он показал загрузку в 50% на FF при умолчательных установках. (snowmax=35 снежинок). Т.е. тоже весьма нагружает процессор.

Оказывается, нет нормального современного скрипта снега без багов.

Поэтому поправил скрипт с hypergurl.com, чтобы убрать баги с прокруткой. Не идеально, но тут в самом деле проблема с загрузкой процессора - добавление одного действия уже мешает. Этот скрипт не критичен и к высоте документа, как тот с dynamicdrive.com . И добавил знаки долларов, евро и фунтов. К нему несложно добавить и рисунки снежинок разных размеров и формы.

Результаты здесь: http://www.softtime.ru/forum/read.php?id_forum=2&id_theme=10921

   
 
 автор: Devastator!   (28.12.2005 в 20:58)   письмо автору
 
   для: 12345   (28.12.2005 в 00:25)
 


<script language="JavaScript">
<!--
var no=10;
var speed=5;
var snowflake="snow.gif";

var ns4up=(document.layers)?1:0;
var ie4up=(document.all)?1:0;
var dx,xp,yp;
var am,stx,sty;
var i,doc_width=800,doc_height=600;
if(ns4up){doc_width=self.innerWidth;doc_height=self.innerHeight;}
else if(ie4up){doc_width=document.body.clientWidth;doc_height=document.body.clientHeight;}
dx=new Array();
xp=new Array();
yp=new Array();
am=new Array();
stx=new Array();
sty=new Array();
for(i=0;i<no;++ i){ 
dx[i]=0;
xp[i]=Math.random()*(doc_width-50);
yp[i]=Math.random()*doc_height;
am[i]=Math.random()*20;
stx[i]=0.02+Math.random()/10;
sty[i]=0.7+Math.random();
if(ns4up){
if(i==0){
document.write("<layer name=\"dot"+i+"\" left=\"15\" ");
document.write("top=\"15\" visibility=\"show\"><img src=\"");
document.write(snowflake+"\" border=\"0\"></layer>");
}else{
document.write("<layer name=\"dot"+i+"\" left=\"15\" ");
document.write("top=\"15\" visibility=\"show\"><img src=\"");
document.write(snowflake+"\" border=\"0\"></layer>");
}
}else if(ie4up){
if(i==0){
document.write("<div id=\"dot"+i+"\" style=\"POSITION: ");
document.write("absolute; Z-INDEX: "+i+"; VISIBILITY: ");
document.write("visible; TOP: 15px; LEFT: 15px;\"><img src=\"");
document.write(snowflake+"\" border=\"0\"></div>");
}else{
document.write("<div id=\"dot"+i+"\" style=\"POSITION: ");
document.write("absolute; Z-INDEX: "+i+"; VISIBILITY: ");
document.write("visible; TOP: 15px; LEFT: 15px;\"><img src=\"");
document.write(snowflake+"\" border=\"0\"></div>");
}
}
}
function snowNS(){
for(i=0;i<no;++i){
yp[i]+=sty[i];
if(yp[i]>doc_height-50){
xp[i]=Math.random()*(doc_width-am[i]-30);
yp[i]=0;
stx[i]=0.02+Math.random()/10;
sty[i]=0.7+Math.random();
doc_width=self.innerWidth;
doc_height=self.innerHeight;
}
dx[i]+=stx[i];
document.layers["dot"+i].top=yp[i];
document.layers["dot"+i].left=xp[i] + am[i]*Math.sin(dx[i]);
}
setTimeout("snowNS()",speed);
}
function snowIE(){
for(i=0;i<no;++i){
yp[i]+=sty[i];
if(yp[i]>doc_height-50){
xp[i]=Math.random()*(doc_width-am[i]-30);
yp[i]=0;
stx[i]=0.02+Math.random()/10;
sty[i]=0.7+Math.random();
doc_width=document.body.clientWidth;
doc_height=document.body.clientHeight;
}
dx[i]+=stx[i];
document.all["dot"+i].style.pixelTop=yp[i];
document.all["dot"+i].style.pixelLeft=xp[i]+am[i]*Math.sin(dx[i]);
}
setTimeout("snowIE()",speed);
}
if(ns4up){snowNS();}
else if(ie4up){snowIE();}
// -->

Вот вроде неплохой скрипт...

   
 
 автор: 12345   (28.12.2005 в 21:56)   письмо автору
 
   для: Devastator!   (28.12.2005 в 20:58)
 

Проходили такой - очень похожий или этот самый один человек приводил и просил сделать, чтобы в FF работало. Осовремененный (вкл. FF) аналог его лежит по ссылке в этой цитате:

>Этот код без бага, но как-то очень по-синусоидному ведёт себя падение снежинок.
> http://www.dynamicdrive.com/dynamicindex3/snow.htm ,

и в нём убран "баг первого экрана", которым страдает Ваш пример - если страницу с приведённым кодом заполнить <br><br>.....<br> и прокрутить, снежинки начнут "таять" не внизу, а выше. И синусоидность движения снежинок заставляет "не поверить", что изображён снег.

Вот он, отличный от других, хорошо продуманный скрипт падающего снега:

   
Rambler's Top100
вверх

Rambler's Top100 Яндекс.Метрика Яндекс цитирования