Как добавить обертку и привязку к определенному элементу

Я имею 2 проблемы с моим кодом:Как добавить обертку и привязку к определенному элементу

Я хочу, чтобы ограничить влияние сценария на DIV <div id="photo">
Как я могу сделать подслой к сценарию, чтобы все элементы на странице не меняли позиции при срабатывании анимации.

Это мой код, который вы можете помочь.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    <html xmlns="http://www.w3.org/1999/xhtml"> 
     <head> 
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
      <title>Untitled Document</title> 
      <style type="text/css"> 
       .selected { border-style:solid; border-width:10px; border-color:#C00; margin:auto; z-index:2;} 
       #cret { 
        position:relative; 
        z-index:3; 
        border-style:solid; border-width:5px; border-color:#000000; 
        padding: 10px 10px 10px 10px; 
        margin:auto; 
        width:620px; 
        height:420px; 
       } 
       img { 
        position:static; 
        z-index:1; 
       } 
      </style> 
      <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"/></script> 
     </head> 

     <body> 
      <script type="text/javascript"/> 
       $(document).ready(function() { 
        $('img').width('10%').height('10%'); 

        $('img').on("click", function() { 
         $(this).wrap('<div id="cret"/>'); 
         $(this).animate({width:'600px', height:'400px'}).addClass("selected"); 
        }); 

        $(document).on("click", function(){ 
         $("img").unwrap(); 
        }); 

        $('img').click(function(){ return false; });  

        $('#cret').click(function(){ return false; }); 

        $(document).on("click", function(){ 
         $('img').animate({width:'10%', height:'10%'}).removeClass("selected"); 
        }); 

        $('img').click(function(){ return false; }); 

        $('#cret').click(function(){ return false; }); 
       }); 
      </script> 

      <div id="photo"> 
       <img src="image source"/> 
       <img src="image source"/> 
      </div> 
    </body> 
</html>

источник

2012-01-10 John the horn

Вы reeally должны отступу этого коду лучше. – techfoobar

Невероятный беспорядок. Масса событий, которые конфликтуют друг с другом. Почему вам нужно динамически обертывать изображение, если единственное, что вы делаете, - это масштабирование изображения? Почему вы используете все, что 'return false?'? И почему вы определяете правила CSS для img, если они являются такими же, как и по умолчанию? – YuS

@Yuri Я пытался сделать изображение, которое неактивно от пары, чтобы оставаться в его положении. Я использую все, которые возвращают false, чтобы код запускался только один раз за клик на изображение, потому что если вы нажмете второй раз на увеличенное изображение, это создаст новый div-cret в существовании div, который уже существует. И огромный беспорядок - это потому, что я небе: D –

Чтобы ограничить область селектора, вы можете указать более точное селектор JQuery вместо $ ('IMG') $ ('# фотография IMG'); это затронет только img, присутствующий в div id.

вы должны просмотреть свой селектор, и анимировать будет более эффективно использовать в правильном ... , как поставить свой анимировать только на img.selected.

Надеется, что это помогает http://api.jquery.com/category/selectors/

источник

2012-01-10 13:17:38 Kidi

Ok @ Kidi butt, который не является полным ответом, я думаю, что вы можете сделать больше –

Как добавить обертку и привязку к определенному элементу

ответ

Смежные вопросы