类内的定位元素

因此，我在此处使用此演示插件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

类内的定位元素

回答

相关问题