Форум

paveltkachev · #11 (**permalink**) 10.04.2014, 13:08

А как сюда добавить onload?

function preloadImages()
{
for(var i = 0; i<arguments.length; i++)
$("<img />").attr("src", arguments[i]);
}

рони · #12 (**permalink**) 10.04.2014, 14:32

paveltkachev,

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <script>
$(function () {
       var arr_src = ['http://www.anypics.ru/pic/201302/1366x768/anypics.ru-59453.jpg',
           'http://www.wall-papers.ru/main.php?g2_view=core.DownloadItem&g2_itemId=38417&g2_serialNumber=3',
           'http://w7t.ru/zooms/7da1/7/6168262b44.jpg',
           'http://imgs.mi9.com/uploads/cartoon/4834/disney-cartoon-wallpaper_1366x768_88837.jpg',
           'http://biskvitka.net/uploads/posts/2011-05/thumbs/1306582219_12.jpg'
       ];

       function preloadImages(src, callback) {
           var len = src.length;
           $.each(src, function () {
               $("<img/>", {
                   "src": this,
                   "css": {
                       "width": 180,
                       "height": 120
                   },
                   "load": function () {
                       $(this).appendTo('body');//для теста
                       len--;
                       !len && callback && callback()
                   }
               })
           });
       };

       preloadImages(arr_src, function () {
           alert('complete')
       })
   })
  </script>
</head>

<body>
</body>

</html>

paveltkachev · #13 (**permalink**) 10.04.2014, 17:18

Спасибо, что помогаете. Мои эксперименты показали, что мигание это следствие того, что все элементы display:none, кроме текущего. И потом делается отображение hide() текущему, и show() новому.

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

Подскажите, как поправить

http://ярославский27.рф/fly2.php

paveltkachev · #14 (**permalink**) 10.04.2014, 17:58

Сделал через z-index

http://ярославский27.рф/fly4.php

рони · #15 (**permalink**) 10.04.2014, 18:15

Сообщение от paveltkachev

Сделал через z-index

замечательно - тотже вариант думал предложить)))

paveltkachev · #16 (**permalink**) 10.04.2014, 18:26

Проблема с z-index в том, что под старыми мобильными, особенно на opera-mini дом не прокручивается, а показывается сразу следующая точка останова. А hide/show - полёт показывает, но мигает на десктопах, особенно на IE.

Почему не работает корректно hide/show в
http://ярославский27.рф/fly2.php
?

Это бы решило обе проблемы.

paveltkachev · #17 (**permalink**) 10.04.2014, 18:33

На айфоне через z-index тоже не летает.

рони · #18 (**permalink**) 10.04.2014, 18:33

paveltkachev,

<!DOCTYPE html>

<html>
<head>
  <title>Облёт дома</title>
  <meta charset="utf-8">
  <base href="http://xn--27-6kci4agff0atmd9o.xn--p1ai/" />
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>

</script>
  <style>
          #mainframe{
                width:800px;
                height:600px;
                position:relative;
            }
            #leftarrow{  z-index: 110;
                width:25px;
                height:25px;
                position:absolute;
                top:300px;
                left:25px;
                background:url(/image/3D-fly/left.png) left top no-repeat;
            }
            #flyin{
                width:25px;
                height:25px;
                position:absolute;
                top:370px;
                left:440px;
                background:url(/image/3D-fly/dvor.png) left top no-repeat;
            }
            #rightarrow{  z-index: 110;
                width:25px;
                height:25px;
                position:absolute;
                top:300px;
                left:750px;
                background:url(/image/3D-fly/right.png) left top no-repeat;
            }
            #leftarrow:hover{
                background:url(/image/3D-fly/lefth.png) left top no-repeat;
                cursor: pointer;
            }
            #rightarrow:hover{
                background:url(/image/3D-fly/righth.png) left top no-repeat;
                cursor: pointer;
            }
            .houseframe1, .houseframe2{
                width:800px;
                height:600px;
                position:absolute;
            }
            .curentframe{
                z-index: 100;
            }

  </style>
</head>

<body>
  <div id="mainframe"><img data-frame1="1" src=
  "http://xn--27-6kci4agff0atmd9o.xn--p1ai/image/3D-fly/around/1.jpg" class=
  "houseframe1 curentframe"><img data-frame1="2" src=
  "http://xn--27-6kci4agff0atmd9o.xn--p1ai/image/3D-fly/around/2.jpg" class=
  "houseframe1"><img data-frame1="3" src=
  "http://xn--27-6kci4agff0atmd9o.xn--p1ai/image/3D-fly/around/3.jpg" class=
  "houseframe1"><img data-frame1="4" src=
  "http://xn--27-6kci4agff0atmd9o.xn--p1ai/image/3D-fly/around/4.jpg" class=
  "houseframe1"><img data-frame1="5" src=
  "http://xn--27-6kci4agff0atmd9o.xn--p1ai/image/3D-fly/around/5.jpg" class=
  "houseframe1"><img data-frame1="6" src=
  "http://xn--27-6kci4agff0atmd9o.xn--p1ai/image/3D-fly/around/6.jpg" class=
  "houseframe1"><img data-frame1="7" src=
  "http://xn--27-6kci4agff0atmd9o.xn--p1ai/image/3D-fly/around/7.jpg" class=
  "houseframe1"><img data-frame1="8" src=
  "http://xn--27-6kci4agff0atmd9o.xn--p1ai/image/3D-fly/around/8.jpg" class=
  "houseframe1"><img data-frame1="9" src=
  "http://xn--27-6kci4agff0atmd9o.xn--p1ai/image/3D-fly/around/9.jpg" class=
  "houseframe1"><img data-frame1="10" src=
  "http://xn--27-6kci4agff0atmd9o.xn--p1ai/image/3D-fly/around/10.jpg" class=
  "houseframe1"><img data-frame1="11" src=
  "http://xn--27-6kci4agff0atmd9o.xn--p1ai/image/3D-fly/around/11.jpg" class=
  "houseframe1"><img data-frame1="12" src=
  "http://xn--27-6kci4agff0atmd9o.xn--p1ai/image/3D-fly/around/12.jpg" class=
  "houseframe1"><img data-frame1="13" src=
  "http://xn--27-6kci4agff0atmd9o.xn--p1ai/image/3D-fly/around/13.jpg" class=
  "houseframe1"><img data-frame1="14" src=
  "http://xn--27-6kci4agff0atmd9o.xn--p1ai/image/3D-fly/around/14.jpg" class=
  "houseframe1"><img data-frame1="15" src=
  "http://xn--27-6kci4agff0atmd9o.xn--p1ai/image/3D-fly/around/15.jpg" class=
  "houseframe1"><img data-frame1="16" src=
  "http://xn--27-6kci4agff0atmd9o.xn--p1ai/image/3D-fly/around/16.jpg" class=
  "houseframe1"><img data-frame1="17" src=
  "http://xn--27-6kci4agff0atmd9o.xn--p1ai/image/3D-fly/around/17.jpg" class=
  "houseframe1"><img data-frame1="18" src=
  "http://xn--27-6kci4agff0atmd9o.xn--p1ai/image/3D-fly/around/18.jpg" class=
  "houseframe1"><img data-frame1="19" src=
  "http://xn--27-6kci4agff0atmd9o.xn--p1ai/image/3D-fly/around/19.jpg" class=
  "houseframe1"><img data-frame1="20" src=
  "http://xn--27-6kci4agff0atmd9o.xn--p1ai/image/3D-fly/around/20.jpg" class=
  "houseframe1"><img data-frame1="21" src=
  "http://xn--27-6kci4agff0atmd9o.xn--p1ai/image/3D-fly/around/21.jpg" class=
  "houseframe1"><img data-frame1="22" src=
  "http://xn--27-6kci4agff0atmd9o.xn--p1ai/image/3D-fly/around/22.jpg" class=
  "houseframe1"><img data-frame1="23" src=
  "http://xn--27-6kci4agff0atmd9o.xn--p1ai/image/3D-fly/around/23.jpg" class=
  "houseframe1"><img data-frame1="24" src=
  "http://xn--27-6kci4agff0atmd9o.xn--p1ai/image/3D-fly/around/24.jpg" class=
  "houseframe1"><img data-frame1="25" src=
  "http://xn--27-6kci4agff0atmd9o.xn--p1ai/image/3D-fly/around/25.jpg" class=
  "houseframe1"><img data-frame1="26" src=
  "http://xn--27-6kci4agff0atmd9o.xn--p1ai/image/3D-fly/around/26.jpg" class=
  "houseframe1"><img data-frame1="27" src=
  "http://xn--27-6kci4agff0atmd9o.xn--p1ai/image/3D-fly/around/27.jpg" class=
  "houseframe1"><img data-frame1="28" src=
  "http://xn--27-6kci4agff0atmd9o.xn--p1ai/image/3D-fly/around/28.jpg" class=
  "houseframe1"><img data-frame1="29" src=
  "http://xn--27-6kci4agff0atmd9o.xn--p1ai/image/3D-fly/around/29.jpg" class=
  "houseframe1"><img data-frame1="30" src=
  "http://xn--27-6kci4agff0atmd9o.xn--p1ai/image/3D-fly/around/30.jpg" class=
  "houseframe1"><img data-frame1="31" src=
  "http://xn--27-6kci4agff0atmd9o.xn--p1ai/image/3D-fly/around/31.jpg" class=
  "houseframe1"><img data-frame1="32" src=
  "http://xn--27-6kci4agff0atmd9o.xn--p1ai/image/3D-fly/around/32.jpg" class=
  "houseframe1"><img data-frame1="33" src=
  "http://xn--27-6kci4agff0atmd9o.xn--p1ai/image/3D-fly/around/33.jpg" class=
  "houseframe1"><img data-frame1="34" src=
  "http://xn--27-6kci4agff0atmd9o.xn--p1ai/image/3D-fly/around/34.jpg" class=
  "houseframe1"><img data-frame1="35" src=
  "http://xn--27-6kci4agff0atmd9o.xn--p1ai/image/3D-fly/around/35.jpg" class=
  "houseframe1"><img data-frame1="36" src=
  "http://xn--27-6kci4agff0atmd9o.xn--p1ai/image/3D-fly/around/36.jpg" class=
  "houseframe1"><img data-frame1="37" src=
  "http://xn--27-6kci4agff0atmd9o.xn--p1ai/image/3D-fly/around/37.jpg" class=
  "houseframe1"><img data-frame1="38" src=
  "http://xn--27-6kci4agff0atmd9o.xn--p1ai/image/3D-fly/around/38.jpg" class=
  "houseframe1"><img data-frame1="39" src=
  "http://xn--27-6kci4agff0atmd9o.xn--p1ai/image/3D-fly/around/39.jpg" class=
  "houseframe1"></div>
  <script>
$(window).load(function () {
       $('#mainframe').append('<div id="leftarrow"><\/div><div id="flyin"><\/div><div id="rightarrow"><\/div>');
       var frames = $('.houseframe1'),
           k = 0,
           len = frames.length;

       function move(b) {
           var a = 4;
           (function c() {
               a--;
               k = (k + b) % len;
               0 > k && (k += len);
               frames.removeClass("curentframe").eq(k).addClass("curentframe");
               a && setTimeout(function () {
                   c()
               }, 40)
           })()
       };
       $('div#rightarrow').click(function () {
           move(1)
       });
       $('div#leftarrow').click(function () {
           move(-1)
       });
   });
  </script>
</body>
</html>

paveltkachev · #19 (**permalink**) 10.04.2014, 18:36

Вот такой подход прекрасно работает на всех мобильных
http://ярославский27.рф/fly1.php

Но мигает на десктопах. Нажмите на оранжевую кнопку по центру

рони · #20 (**permalink**) 10.04.2014, 20:04

paveltkachev,

<!DOCTYPE html>

<html>
<head>
  <title>Облёт дома</title>
  <meta charset="utf-8">
  <base href="http://xn--27-6kci4agff0atmd9o.xn--p1ai/" />
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>

</script>
  <style>
          #mainframe{
                width:800px;
                height:600px;
                position:relative;
            }
            #leftarrow{
                z-index: 110;
                width:25px;
                height:25px;
                position:absolute;
                top:300px;
                left:25px;
                background:url(/image/3D-fly/left.png) left top no-repeat;
            }
            #flyin.curent{ z-index: 120;
                width:25px;
                height:25px;
                position:absolute;
                top:370px;
                left:440px;
                background:url(/image/3D-fly/dvor.png) left top no-repeat;
            }

            #rightarrow{  z-index: 110;
                width:25px;
                height:25px;
                position:absolute;
                top:300px;
                left:750px;
                background:url(/image/3D-fly/right.png) left top no-repeat;
            }
            #leftarrow:hover{
                background:url(/image/3D-fly/lefth.png) left top no-repeat;
                cursor: pointer;
            }
            #rightarrow:hover{
                background:url(/image/3D-fly/righth.png) left top no-repeat;
                cursor: pointer;
            }
            .houseframe1, .houseframe2{
                width:800px;
                height:600px;
                position:absolute;
                opacity: 0;
 
            }
            .curentframe{
                opacity: 1;
            }

  </style>
</head>

<body>
  <div id="mainframe"></div>
  <script>
$(window).load(function () {
       $.each(Array(39), function (indx, element) {
           $("<img/>", {
               "src": "http://xn--27-6kci4agff0atmd9o.xn--p1ai/image/3D-fly/around/" + (indx + 1) + ".jpg",
               "class": "houseframe1"
           }).appendTo('#mainframe')
       });
       $.each(Array(51), function (indx, element) {
           $("<img/>", {
               "src": "http://xn--27-6kci4agff0atmd9o.xn--p1ai/image/3D-fly/flyin/" + (indx + 1) + ".jpg",
               "class": "houseframe2"
           }).appendTo('#mainframe')
       });
       $("img:first").addClass("curentframe");

       $('#mainframe').append('<div id="leftarrow"><\/div><div id="flyin" class="curent"><\/div><div id="rightarrow"><\/div>');

       function move(cls, b, l) {
           var frames = $(cls),
               k = frames.index($(cls + ".curentframe")),
               len = frames.length;
           var a = l || len - 1;
           (function c() {
               a--;
               k = (k + b) % len;
               0 > k && (k += len);

               $(".curentframe").removeClass("curentframe");
               frames.eq(k).addClass("curentframe");
               (k < 2 || k > len - 3) && cls == '.houseframe1' ? $("#flyin").addClass("curent") : $("#flyin").removeClass("curent");
               a && setTimeout(function () {
                   c()
               }, 40)
           })()
       };
       $('div#rightarrow').click(function () {
           move('.houseframe1', 1, 4)
       });
       $('div#leftarrow').click(function () {
           move('.houseframe1', -1, 4)
       });
       $('div#flyin').click(function () {
           move('.houseframe2', 1)
       });

   });
  </script>
</body>
</html>

Форум

Справочник

Discord чат

Курсы javascript