Изменение z-индекса перекрывающихся изображений с помощью jQuery - PullRequest
Новая
       2

Изменение z-индекса перекрывающихся изображений с помощью jQuery

6 голосов
/ 28 декабря 2011

У меня есть три прямоугольных изображения, наложенных друг на друга по диагональной линии, первое полностью видимое в верхнем левом углу, второе в центре частично скрыто первым, а последнее в нижнем правом углу частично скрыто вторым. Я хочу, чтобы изображение нажималось, чтобы идти поверх других. Я пытаюсь достичь этого, манипулируя z-index с помощью jQuery, но, похоже, это не работает. На самом деле кажется, что jQuery даже не распознается.

Это мой тестовый код: 

<html>
<head>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js">
    $(document).ready(function () {
        $('#launch').click(function () {
            alert('Ok');
        });

        $('.bottom-pic').click(function () {
            $(this).css('z-index' : '1');
            $('.bottom-pic').not(this).css('z-index' : '0');
        });
    });
    </script>
    <style type="text/css">
    #pictures {
        width: 650px;
        height: 300px;

        margin-left: auto;
        margin-right: auto;
        margin-top: 20px;
        margin-bottom: 50px;

        position: relative;
    }

    #top {
        top: 0;
        left: 0;

        position: absolute; 
        z-index: 1;
    }

    #center {
        top: 60px; 
        left: 200px;

        position: absolute; 
        z-index: 1;
    }

    #bottom {
        top: 150px; 
        left: 400px; 

        position: absolute; 
        z-index: 0;
    }
    </style>
    </head>
    <body>
    <div id="pictures">
         <img src="bottom-pic.jpg" id="top" class="bottom-pic">
         <img src="bottom-pic.jpg" id="center" class="bottom-pic">
         <img src="bottom-pic.jpg" id="bottom" class="bottom-pic">
    </div>
    <input type="button" value="Try" id="launch">
</body>
</html>

Тем не менее, когда я нажимаю кнопку «запуск», ничего даже не происходит.

Ответы [ 5 ]

1 голос
/ 28 декабря 2011

Хорошо, я только что понял, что вы допустили небольшую ошибку, вы используете ЖЕ тег для загрузки запроса и объявления вашего встроенного JavaScript ... вы не можете этого сделать. Вы должны использовать два отдельных тега скрипта. 

<html>
<head>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js">
    </script>

ПРИМЕЧАНИЕ: новый тег script: 

  <script type="text/javascript">
    $(document).ready(function () {
        $('#launch').click(function () {
            alert('Ok');
        });

        $('.bottom-pic').click(function () {
            $(this).css('z-index', '1');
            $('.bottom-pic').not(this).css('z-index', '0');
        });
    });
   </script>

...

Остальная часть ответа остается в силе. А именно, вы должны избавиться от z-index в #top, #middle и #bottom ....

0 голосов
/ 11 января 2012

просто несколько предложений здесь

  1. Как отметил Ахмед, ваш скрипт находится внутри тега скрипта, который имеет отдельное значение src и url - создайте отдельный для вашего встроенного скрипта.Довольны ли вы тем, что сделали это правильно?
  2. Попробуйте поместить кнопку ввода между открывающими и закрывающими тегами формы или хотя бы каким-нибудь элементом уровня блока, например, div или p.По-видимому, некоторые строгие доктрины не принимают это иначе.
  3. У меня были некоторые проблемы с скриптами, не работающими, когда они связаны с файлами js с несколькими точками в имени файла, такими как 1.7.1.min.js - я ссылаюськ размещенному в Google коду, который вместо этих точек находится в пути к каталогу, например ... / 1.7.1 / jquery.js

Мне, очевидно, нужно решить, как включить примеры кода - щелкнув поКнопка "{}" или добавление 4 пробелов не работает!

0 голосов
/ 02 января 2012

Измените ваши сценарии следующим образом: 

    <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
          $('#launch').click(function () {
              alert('Ok');
          });

          $('.bottom-pic').click(function () {
              $(this).css('z-index' , '1');
              $('.bottom-pic').not(this).css('z-index' , '0');
          });
        });
    </script>

Это должно работать.

0 голосов
/ 30 декабря 2011

У вас ошибка синтаксиса JavaScript. В ваших командах CSS замените: на, также вам нужно обернуть свой собственный скрипт в собственный тег javascript, а не внутри тега jqueryimport

0 голосов
/ 29 декабря 2011

Я рекомендую вам удалить все z-индексы из вашего css. Затем создайте класс с именем '.veryHighZ-Index, например, и добавьте этот класс в изображение, по которому щелкнули, и удалите класс из ранее нажатого изображения ...

Я немного изменил ваш код, но этот код здесь должен работать. 

<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
    <script>
$(document).ready(function () {


        // #pictures div catches all divs inside the #pictures
    $('#pictures div').click(function () {
            $('.veryhighz-index').removeClass('veryhighz-index');
            $(this).addClass('veryhighz-index');
    });
});
</script>
<style type="text/css">
#pictures {
    width: 650px;
    height: 300px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 20px;
    margin-bottom: 50px;
        background: lime;
    position: relative;
        overflow: hidden;
}

#top {
    top: 0;
    left: 0;
    position: absolute; 
}

#center {
    top: 60px; 
    left: 200px;
    position: absolute; 
}

#bottom {
    top: 150px; 
    left: 400px; 
    position: absolute; 
}

    .top, .center, .bottom {
    width: 300px;
    height: 300px;
    border: 2px solid red;
    }
    .top {background: red;}
    .center {background: yellow;}
    .bottom {background: blue;}


    .veryhighz-index {
        z-index: 999999;
    }



</style>
</head>
<body>


    <div id="pictures">
        <div id="top" class="top"></div>
        <div id="center" class="center"></div>
        <div id="bottom" class="bottom"></div>
    </div>

</body>
</html>

Короче говоря, добавьте следующий код к вашей CSS 

   .veryhighz-index {
    z-index: 999999;
    }

и этот код для функций JavaScript 

   // #pictures img catches all images inside the #pictures
    $('#pictures img').click(function () {
        $('.veryhighz-index').removeClass('veryhighz-index');
        $(this).addClass('veryhighz-index');
    });
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...