類內的定位元素

因此，我在此處使用此演示插件http://tympanus.net/Tutorials/PrettySimpleContentSlider/，並試圖讓右側的動畫選項卡（ul id =「rotmenu」）能夠自由浮動並在外部自由地提取它的主要div類「旋轉器」，並且仍然保持其功能並在旋轉器中發揮作用。我試着在div和classes的屬性上做一些簡單的改變，但他們只是或多或少地搞砸了一些東西。有任何想法嗎？類內的定位元素

好這裏是使用jquery_easing.1.3 JS和jquery.min.js庫

<script type="text/javascript"> 
     $(function() { 
      var current = 1; 

      var iterate  = function(){ 
       var i = parseInt(current+1); 
       var lis = $('#rotmenu').children('li').size(); 

      } 
      display($('#rotmenu li:first')); 
      var slidetime = setInterval(iterate,3000); 

      $('#rotmenu li').bind('click',function(e){ 
       clearTimeout(slidetime); 
       display($(this)); 
       e.preventDefault(); 
      }); 

      function display(elem){ 
       var $this = elem; 
       var repeat = false; 
       if(current == parseInt($this.index() + 1)) 
        repeat = true; 

       if(!repeat) 
        $this.parent().find('li:nth-child('+current+') a').stop(true,true).animate({'marginRight':'-20px'},300,function(){ 
         $(this).animate({'opacity':'0.7'},700); 
        }); 

       current = parseInt($this.index() + 1); 

       var elem = $('a',$this); 

        elem.stop(true,true).animate({'marginRight':'0px','opacity':'1.0'},300); 

       var info_elem = elem.next(); 
       $('#rot1 .heading').animate({'left':'-420px'}, 500,'easeOutCirc',function(){ 
        $('h1',$(this)).html(info_elem.find('.info_heading').html()); 
        $(this).animate({'left':'0px'},400,'easeInOutQuad'); 
       }); 

       $('#rot1 .description').animate({'bottom':'-270px'},500,'easeOutCirc',function(){ 
        $('p',$(this)).html(info_elem.find('.info_description').html()); 
        $(this).animate({'bottom':'0px'},400,'easeInOutQuad'); 
       }) 
       $('#rot1').prepend(
       $('<img/>',{ 
        style : 'opacity:0', 
        className : 'bg' 
       }).load(
       function(){ 
        $(this).animate({'opacity':'1'},600); 
        $('#rot1 img:first').next().animate({'opacity':'0'},700,function(){ 
         $(this).remove(); 
        }); 
       } 
      ).attr('src','images/'+info_elem.find('.info_image').html()).attr('width','800').attr('height','300') 
      ); 
      } 
     }); 
    </script>

其中應用了jQuery

<body> 
    <div id="content"> 
     <a class="back" href=""></a> 

     <div class="rotator"> 
      <ul id="rotmenu"> 
       <li> 
        <a href="rot1">Portfolio</a> 
        <div style="display:none;"> 
         <div class="info_image">1.jpg</div> 
         <div class="info_heading">Our Works</div> 
         <div class="info_description"> 

          <a href="#" class="more">Read more</a> 
         </div> 
        </div> 
       </li> 
       <li> 
        <a href="rot2">Services</a> 
        <div style="display:none;"> 
         <div class="info_image">2.jpg</div> 
         <div class="info_heading">We serve</div> 
         <div class="info_description"> 

          <a href="#" class="more">Read more</a> 
         </div> 
        </div> 
       </li> 
       <li> 
        <a href="rot3">Contact</a> 
        <div style="display:none;"> 
         <div class="info_image">3.jpg</div> 
         <div class="info_heading">Get in touch</div> 
         <div class="info_description"> 

          <a href="#" class="more">Read more</a> 
         </div> 
        </div> 
       </li> 
       <li> 
        <a href="rot4">Experiments</a> 
        <div style="display:none;"> 
         <div class="info_image">4.jpg</div> 
         <div class="info_heading">We do crazy stuff</div> 
         <div class="info_description"> 

          <a href="#" class="more">Read more</a> 
         </div> 
        </div> 
       </li> 
       <li> 
        <a href="rot5">Applications</a> 
        <div style="display:none;"> 
         <div class="info_image">5.jpg</div> 
         <div class="info_heading">Working things</div> 
         <div class="info_description"> 

          <a href="#" class="more">Read more</a> 
         </div> 
        </div> 
       </li> 
      </ul> 
      <div id="rot1"> 
       <img src="" width="800" height="300" class="bg" alt=""/> 
       <div class="heading"> 
        <h1></h1> 
       </div> 
       <div class="description"> 
        <p></p> 

       </div>  
      </div> 
     </div> 
    </div>

來源

2013-02-09 user1325578

不能告訴你的問題是什麼，沒有看到你的代碼。在jsfiddle.net中的演示也可以幫助 – charlietfl 2013-02-09 00:20:54

好。包括jqurey。 – user1325578 2013-02-09 00:30:28

如果您希望它在父級以外可見（.rotator），則需要將父級的CSS更改爲overflow: visible。然後，您可以將#rotmenu放在任何你想要的位置。

#rotmenu { 
    position: absolute; 
    top: 300px; 
    left: 100px; 
    z-index: 10; 
}  
.rotator { 
    ... 
    overflow:visible; 
    ... 
}

此外，爲了繼續掩蓋動畫組件，您需要設置#rot1溢出：隱藏，使其具有相同的尺寸爲共同的父（.rotator）。

#rot1 { 
    position: absolute; 
    overflow: hidden; 
    height: 100%; 
    width: 100%; 
}

最後，只是爲了防止中斷的圖像從在DOM收集（這發生在該示例中，因爲我們不包括源圖像），我添加了一個錯誤處理程序的圖像插入代碼以除去圖片。

$('#rot1').prepend(
$('<img/>', { 
    style: 'opacity:0', 
    className: 'bg' 
}).error(function() { 
    $(this).remove(); 
}).load(function() { 
    $(this).animate({ 
     'opacity': '1' 
    }, 600); 
    $('#rot1 img:first').next().animate({ 
     'opacity': '0' 
    }, 700, function() { 
     $(this).remove(); 
    }); 
}).attr('src', 'images/' + info_elem.find('.info_image').html()).attr('width', '800').attr('height', '300'));

jsfiddle

來源

2013-02-09 00:35:22

我早些時候嘗試了這個想法，但現在每當我點擊其中一個選項卡時，它會在y軸方向上添加空間並允許滾動到虛無。 – user1325578 2013-02-09 00:40:22

@ user1325578我更新了我的答案和示例，以防止您看到的問題並隱藏其他動畫元素，使其在內容區域外可見。 – 2013-02-09 02:04:57

首先它的聲音，我想您所想因爲rotmenu是旋轉類的一部分，所以你需要在旋轉類之外。那不是班級的工作方式。如果你想讓rotmenu成爲那個班的一部分的話。如果情況並非如此，則忽略這部分消息。

它的結構是你的無序列表被一些不可見的div包裹着。我不知道你的意思是搞亂了什麼。但它可能與該包裝div的一些CSS元素有關，因爲它的類。

來源

2013-02-09 00:31:03 Jeff

類內的定位元素

回答

相關問題