如何包裝和綁定添加一定元素

我想腳本的影響限制到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

你真的需要更好的縮進代碼。 – techfoobar 2012-01-10 13:10:04

令人難以置信的混亂。彼此衝突的大量事件。爲什麼你需要動態地包裝圖像，如果你唯一要做的就是放大圖像？你爲什麼使用'return false;'？爲什麼你爲img指定css規則，如果它們與默認相同？ – YuS 2012-01-10 13:22:17

@Yuri我試圖讓這個圖像不再活躍，只能留在它的位置上。我使用所有返回false來使代碼每個圖像每次點擊只運行一次，因爲如果您在放大的圖像上再次單擊它，會在div cret中創建一個新的div cret，並且已經存在。而巨大的混亂是因爲我是一個neube：D – 2012-01-10 13:31:11

要限制選擇的範圍，你可以指定一個更精確的jQuery選擇而不是$（ 'IMG'）$（ '＃照片IMG'）;它只會影響照片ID div中的img。

你應該檢查你的選擇和動畫會更有效地在正確的使用... 喜歡把你的動畫只能在img.selected。

希望它有幫助http://api.jquery.com/category/selectors/

來源

2012-01-10 13:17:38 Kidi

好@Kidi butt不是一個完整的答案來一個我認爲你可以做更多 – 2012-01-10 13:56:22

如何包裝和綁定添加一定元素

回答

相關問題