Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 13.06.2014, 02:44
Новичок на форуме
Отправить личное сообщение для isclear Посмотреть профиль Найти все сообщения от isclear
 
Регистрация: 13.06.2014
Сообщений: 1

Как запустить две анимации при загрузке страницы?
Подскажите как реализовать
запуск двух и более анимаций при загрузке страницы

конструкция <body onload="...; ...;"> почему-то не срабатывает ?


Вот пример скрипта http://jsfiddle.net/acCPc/ по которому должна запускаться анимация и срабатывать
автосворачивания блока ,но работает только первая если отключить первую
то работает вторая но вмсесте незапускаются

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />



    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>

<title>Dynamic Drive DHTML Scripts- Flying Butterfly script</title>

<!-- /////// SLUDE //////////////////////////////////// -->

    <script type="text/javascript" >

	    function slideUpDiv(){
		    $('#les8_ex3').slideUp();
		}
		function slideDownDiv(){
		    $('#les8_ex3').slideDown();
		}

		function slideUpDivStart(){
		    $('#les8_ex3').slideUp(0);
		}

    </script>

    <!-- ,,,,,,,,,, CSS ,,,,,,,,,,,,, -->
    <style>
		    #les8_ex3{

		    width:100%;
		    height:200px;
		    background:Palegreen;
		    border:1px solid #333366;
		    margin-bottom:20px;
		}

		.resalt{

		    background: none repeat scroll 0 0 #FFFFFF;
		    border: 1px solid #475E75;
		    margin: 10px;
		    padding: 10px;
		}
   </style>

<!-- ///////// SLUDE ///////////////////////////////// -->



</head>

<body onload="slideUpDivStart();">

<script language="JavaScript1.2">

/*
Flying Butterfly script (By BGAudioDr@aol.com)
Modified slightly/ permission granted to Dynamic Drive to feature script in archive
For full source, visit http://www.dynamicdrive.com
*/

var Ymax=8;                                //MAX # OF PIXEL STEPS IN THE "X" DIRECTION
var Xmax=8;                                //MAX # OF PIXEL STEPS IN THE "Y" DIRECTION
var Tmax=10000;                        //MAX # OF MILLISECONDS BETWEEN PARAMETER CHANGES

//FLOATING IMAGE URLS FOR EACH IMAGE. ADD OR DELETE ENTRIES. KEEP ELEMENT NUMERICAL ORDER STARTING WITH "0" !!

var floatimages=new Array();
floatimages[0]='http://img-fotki.yandex.ru/get/4704/42428604.da/0_76b87_d2d4c0a8_S';
floatimages[1]='http://img-fotki.yandex.ru/get/4704/42428604.da/0_76b87_d2d4c0a8_S';

//*********DO NOT EDIT BELOW***********
var NS4 = (navigator.appName.indexOf("Netscape")>=0 && parseFloat(navigator.appVersion) >= 4 && parseFloat(navigator.appVersion) < 5)? true : false;
var IE4 = (document.all)? true : false;
var NS6 = (parseFloat(navigator.appVersion) >= 5 && navigator.appName.indexOf("Netscape")>=0 )? true: false;
var wind_w, wind_h, t='', IDs=new Array();
for(i=0; i<floatimages.length; i++){
t+=(NS4)?'<layer name="pic'+i+'" visibility="hide" width="10" height="10"><a href="javascript:hidebutterfly()">' : '<div id="pic'+i+'" style="position:absolute; visibility:hidden;width:10px; height:10px"><a href="javascript:hidebutterfly()">';
t+='<img src="'+floatimages[i]+'" name="p'+i+'" border="0">';
t+=(NS4)? '</a></layer>':'</a></div>';
}
document.write(t);

function moveimage(num){
if(getidleft(num)+IDs[num].W+IDs[num].Xstep >= wind_w+getscrollx())IDs[num].Xdir=false;
if(getidleft(num)-IDs[num].Xstep<=getscrollx())IDs[num].Xdir=true;
if(getidtop(num)+IDs[num].H+IDs[num].Ystep >= wind_h+getscrolly())IDs[num].Ydir=false;
if(getidtop(num)-IDs[num].Ystep<=getscrolly())IDs[num].Ydir=true;
moveidby(num, (IDs[num].Xdir)? IDs[num].Xstep :  -IDs[num].Xstep , (IDs[num].Ydir)?  IDs[num].Ystep:  -IDs[num].Ystep);
}

function getnewprops(num){
IDs[num].Ydir=Math.floor(Math.random()*2)>0;
IDs[num].Xdir=Math.floor(Math.random()*2)>0;
IDs[num].Ystep=Math.ceil(Math.random()*Ymax);
IDs[num].Xstep=Math.ceil(Math.random()*Xmax)
setTimeout('getnewprops('+num+')', Math.floor(Math.random()*Tmax));
}

function getscrollx(){
if(NS4 || NS6)return window.pageXOffset;
if(IE4)return document.body.scrollLeft;
}

function getscrolly(){
if(NS4 || NS6)return window.pageYOffset;
if(IE4)return document.body.scrollTop;
}

function getid(name){
if(NS4)return document.layers[name];
if(IE4)return document.all[name];
if(NS6)return document.getElementById(name);
}

function moveidto(num,x,y){
if(NS4)IDs[num].moveTo(x,y);
if(IE4 || NS6){
IDs[num].style.left=x+'px';
IDs[num].style.top=y+'px';
}}

function getidleft(num){
if(NS4)return IDs[num].left;
if(IE4 || NS6)return parseInt(IDs[num].style.left);
}

function getidtop(num){
if(NS4)return IDs[num].top;
if(IE4 || NS6)return parseInt(IDs[num].style.top);
}

function moveidby(num,dx,dy){
if(NS4)IDs[num].moveBy(dx, dy);
if(IE4 || NS6){
IDs[num].style.left=(getidleft(num)+dx)+'px';
IDs[num].style.top=(getidtop(num)+dy)+'px';
}}

function getwindowwidth(){
if(NS4 || NS6)return window.innerWidth;
if(IE4)return document.body.clientWidth;
}

function getwindowheight(){
if(NS4 || NS6)return window.innerHeight;
if(IE4)return document.body.clientHeight;
}

function init(){
wind_w=getwindowwidth();
wind_h=getwindowheight();
for(i=0; i<floatimages.length; i++){
IDs[i]=getid('pic'+i);
if(NS4){
IDs[i].W=IDs[i].document.images["p"+i].width;
IDs[i].H=IDs[i].document.images["p"+i].height;
}
if(NS6 || IE4){
IDs[i].W=document.images["p"+i].width;
IDs[i].H=document.images["p"+i].height;
}
getnewprops(i);
moveidto(i , Math.floor(Math.random()*(wind_w-IDs[i].W)), Math.floor(Math.random()*(wind_h-IDs[i].H)));
if(NS4)IDs[i].visibility = "show";
if(IE4 || NS6)IDs[i].style.visibility = "visible";
startfly=setInterval('moveimage('+i+')',Math.floor(Math.random()*100)+100);
}}

function hidebutterfly(){
for(i=0; i<floatimages.length; i++){
if (IE4)
eval("document.all.pic"+i+".style.visibility='hidden'")
else if (NS6)
document.getElementById("pic"+i).style.visibility='hidden'
else if (NS4)
eval("document.pic"+i+".visibility='hide'")
clearInterval(startfly)
}
}

if (NS4||NS6||IE4){
window.onload=init;
window.onresize=function(){ wind_w=getwindowwidth(); wind_h=getwindowheight(); }
}

</script><!--webbot bot="HTMLMarkup" endspan i-checksum="54371" --></p>



      <div class="resalt">
      <center>


      <div id="les8_ex3"></div>
    <input type="button" value="Свернуть" onclick="slideUpDiv();">
    <input type="button" value="Развернуть" onclick="slideDownDiv();">

      </center>
      </div>




<h1>Duis te feugifacilisi</h1>

  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem 
  nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. 
  Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit 
  lobortis nisl ut aliquip ex ea commodo consequat.</p>
  <p>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc,
  </p>

</body>

</html>
Ответить с цитированием
  #2 (permalink)  
Старый 17.06.2014, 15:32
Аспирант
Отправить личное сообщение для cyber_2.0 Посмотреть профиль Найти все сообщения от cyber_2.0
 
Регистрация: 13.06.2014
Сообщений: 36

вот код
function animate ( opts ) {

  var start = new Date,
      properties = opts.properties,
      elem = opts.target,
      post, id;


    for( var prop in properties  ) {        
    	  post = getUnits( properties [prop]. post );
        elem.style [prop] =  properties [prop].from + post ;
    }


  (function anim() {

    var progress = (new Date - start) / opts.duration,
        from, to;
    
      if (progress > 1) progress = 1;
      
      for( var prop in properties  ) {
          
          from = properties [ prop ].from;
          to = properties [ prop ].to;
          post = getUnits( properties [prop]. post );

          elem.style [ prop ] =  ( ( to - from )  * progress + from ) + post;
      };

    if (progress == 1) {
      opts.complete && opts.complete();
      return;
    }
      
    id = setTimeout( anim, opts.delay || 20 ) ;

  }());


  function getUnits ( val ) {
  	if ( val === undefined ) 
  		return "px";

  	return val;
  };

  return function() {

    clearInterval ( id );
  }
    
}


вот пример вызова
properties = {
      top : { // свойство которое анимируем
        from: rect.top,
        to: top
      },
      left: {
        from: rect.left,
        to: left
      },
      width: {
        from: 0,
        to: width.val,
        post: width.units,
      },
      height: {
       from:  0,
       to: height.val,
       //post -  единицы измерения в которых анимируем, по умолчанию px
      },
      opacity: { 
        from: 0, 
        to: 1, 
        post: "%"  
      }
     };

 animate({
      target : win, // окно которое анимируем 
      delay: 15,
      duration: 2000, // время анимация в милесекундах 
      properties: properties, // объект со свойствами которые анимируем
      // complete: - тут можно передать callback
    });
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Прокрутка окна при загрузке страницы dexteron Общие вопросы Javascript 5 09.04.2015 19:08
Отправка формы при загрузке страницы Shimmy AJAX и COMET 4 26.11.2013 14:51
При загрузке страницы не отображается картинка pimax1978 Opera, Safari и др. 10 06.01.2012 23:09
Плавное появление изображений при загрузке страницы Imdoode jQuery 7 28.06.2011 10:48
Срабатывание скрипта при загрузке страницы bormax Общие вопросы Javascript 3 03.04.2008 09:57