2 qqbnb889 qqbnb889 于 2016.09.11 20:23 提问

div fixed定位之后,加animation,被父元素遮盖,如何取消,内详

下面有完整代码,一个网上摘得轮播插件,文字跟图片同时出现,以文字加到图片子元素中,但是位置不同,所以用fixed解决,但是后续中我给文字加animation后,文字被图片遮盖,只能在动画播放完才能出现,求大大们解决~
下面有代码。。和图片事宜,图片画质有点渣
图片说明完整代码。。

 <!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>an</title>
<script src="../web/js/jquery-3.1.0.js"></script>
  <script>
   $(document).ready(function() { 
  var length, 
   currentIndex = 0, 
   interval, 
   hasStarted = false, //是否已经开始轮播 
   t = 3000; //轮播时间间隔 
  length = $('.slider-panel').length; 
  //将除了第一张图片隐藏 
  $('.slider-panel:not(:first)').hide(); 
  //将第一个slider-item设为激活状态 
  $('.slider-item:first').addClass('slider-item-selected'); 
  //鼠标上悬时显示向前、向后翻按钮,停止滑动,鼠标离开时隐藏向前、向后翻按钮,开始滑动 
  $('.slider-panel').hover(function() { 
   stop(); 
   $('.slider-page').show(); 
  }, function() { 
   $('.slider-page').hide(); 
   start(); 
  }); 
  $('.slider-item').hover(function(e) { 
   stop(); 
   var preIndex = $(".slider-item").filter(".slider-item-selected").index(); 
   currentIndex = $(this).index(); 
   play(preIndex, currentIndex); 
  }, function() { 
   start(); 
  }); 
  $('.slider-pre').unbind('click'); 
  $('.slider-pre').bind('click', function() { 
   pre(); 
  }); 
  $('.slider-next').unbind('click'); 
  $('.slider-next').bind('click', function() { 
   next(); 
  }); 
  /** 
   * 向前翻页 
   */
  function pre() { 
   var preIndex = currentIndex; 
   currentIndex = (--currentIndex + length) % length; 
   play(preIndex, currentIndex); 
  } 
  /** 
   * 向后翻页 
   */
  function next() { 
   var preIndex = currentIndex; 
   currentIndex = ++currentIndex % length; 
   play(preIndex, currentIndex); 
  } 
  /** 
   * 从preIndex页翻到currentIndex页 
   * preIndex 整数,翻页的起始页 
   * currentIndex 整数,翻到的那页 
   */
  function play(preIndex, currentIndex) { 
   $('.slider-panel').eq(preIndex).fadeOut(500) 
    .parent().children().eq(currentIndex).fadeIn(1000); 
   $('.slider-item').removeClass('slider-item-selected'); 
   $('.slider-item').eq(currentIndex).addClass('slider-item-selected'); 
  } 
  /** 
   * 开始轮播 
   */
  function start() { 
   if(!hasStarted) { 
    hasStarted = true; 
    interval = setInterval(next, t); 
   } 
  } 
  /** 
   * 停止轮播 
   */
  function stop() { 
   clearInterval(interval); 
   hasStarted = false; 
  } 
  //开始轮播 
  start(); 
 }); 
  </script>
  <style>
   @keyframes myfirst{
    0%   {margin-left:0px;opacity: 1;}
    50%{margin-left:-60px;opacity: 0;}
    100% {margin-left:0%;opacity: 1;}
    }
@-moz-keyframes myfirst{
    0%   {margin-left:0px;opacity: 1;}
    50%{margin-left:-60px;opacity: 0;}
    100% {margin-left:0%;opacity: 1;}
    }
@-webkit-keyframes myfirst{
    0%   {margin-left:0px;opacity: 1;}
    50%{margin-left:-60px;opacity: 0;}
    100% {margin-left:0%;opacity: 1;}
    }
  * {
            margin: 0;
            padding: 0;
            height:100%;
            box-sizing: border-box;
            overflow: hidden;
        }
a{
    text-decoration:none
    }
    .slider { 
 position:fixed;
    top:7.77%;
    left:58.3333%;
    width:33.3333%;
    height:88%;
    z-index:1;
 } 
  .img1{
    max-width:100%;
    max-height:100%;
    background-image:url(http://img2.imgtn.bdimg.com/it/u=3224860512,2623772592&fm=206&gp=0.jpg);
    background-position:center;
    background-repeat:no-repeat;
    background-size:cover;
    margin:0 auto;

    }
.img2{
    max-width:100%;
    max-height:100%;
    background-image:url(http://img5.imgtn.bdimg.com/it/u=4106917366,2081124773&fm=206&gp=0.jpg);
    background-position:center;
    background-repeat:no-repeat;
    background-size:cover;
    margin:0 auto;  

    }
.word{
     position:fixed;
    color:#333;
    margin-left:10px;
    font:92px/100px Futura;
    letter-spacing:8px;
    top:33%;
    left:24.5%;
    height:200px;
    animation:myfirst 2s;
    } 
  </style>
</head>

<body>
 <div class="slider"> 
  <ul class="slider-main"> 
   <li class="slider-panel img1"> 
    <a href="h#"><span class="word">WORD ANIMATE</span></a> 
   </li> 
   <li class="slider-panel img2"> 
    <a href="h#"><span class="word">DO<br />DESGIN</span></a> 
   </li> 
  </ul>
  </div> 
  <div id="chose"> 
   <ul class="slider-nav"> 
    <li class="slider-item"></li>
    <li class="slider-item"></li> 
   </ul>    
  </div> 
</body>
</html>

3个回答

qqbnb889
qqbnb889   2016.09.12 00:36
已采纳

我给overflow: hidden;样式去掉,确实不隐藏了,但是会出现侧边下滑条,影响我的布局,这是怎么回事

zuoyifeng1993
zuoyifeng1993 代码可以分开,你的字体的盒子在外面才可以,你在ul上overflow: hidden;控制你的布局
大约一年之前 回复
showbo
showbo   Ds   Rxr 2016.09.11 21:12

去掉下面这个样式的 overflow: hidden;,被隐藏了


        * {
            margin: 0;
            padding: 0;
            height: 100%;
            box-sizing: border-box;
            overflow: hidden;
        }
showbo
showbo 回复qqbnb889: 不要全部设置所有元素,就是不要使用*选择器。要针对性的对某些需要隐藏的元素才使用。全部overflow:hidden到时出问题了有得你找的
大约一年之前 回复
qqbnb889
qqbnb889 overflow问题解决了
大约一年之前 回复
qqbnb889
qqbnb889 我给overflow: hidden;样式去掉,确实不隐藏了,但是会出现侧边下滑条,影响我的布局,这是怎么回事
大约一年之前 回复
qqbnb889
qqbnb889 感谢回答,再问下为什么这个css3动画移动结束的时候会卡顿一下。。有解决方法吗
大约一年之前 回复
zuoyifeng1993
zuoyifeng1993   2016.09.12 09:33

106行
{
margin: 0;
padding: 0;
height:100%;
box-sizing: border-box;
/*overflow: hidden;*/
}
又想要限制高度,你的字体的盒子在外面才可以,你在ul上overflow: hidden;控制你的布局

Csdn user default icon
上传中...
上传图片
插入图片