Question

我想知道如何使用规模转换来进行rslides样式转换，就像点击客户端链接后客户端div的更改方式一样，这里是小提琴：

http://jsfiddle.net/vladicorp/ktqfq/1/

HTML CODE：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div id="container">
<div id="sections">
    <div id="slider">
        <div id="index_slider">
                 <ul class="rslides" >
                             <li><img src="http://www.emocool.com/work/slide2.jpg"></li>
                             <li><img src="http://www.emocool.com/work/slide2.jpg"></li>                      
                 </ul></div></div>
<script src="http://www.emocool.com/work/js/responsiveslides.min.js"></script>
<script>
  $(function() {
    $(".rslides").responsiveSlides({
    speed: 1000,
    maxwidth: 1200
      });
  });
</script>

<div id="menu"><a href="#sections">clients</a>  </div>

<div id="clients">gfgd</div>
<div id="services"></div>
<div id="portfolio"></div>
<div id="contacts"></div>
        </div></div>

CSS代码：

body {
    margin-left: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    background:#fff;
}
@media (min-width: 1200px)  {
#container {
    width:1200px;
    height:100%;
    margin: 0 auto;
    z-index:40;
    position:relative;

}}
@media (max-width: 1200px)  {
#container {
    width:100%;
    height:100%;
    margin: 0 auto;
    z-index:40;
    position:relative;
}}

.rslides {
  position: relative;
  list-style: none;
  overflow: hidden;
  width: 100%;
  padding: 0;
  margin: 0;  
  transition:all 1s ease;   


}

.rslides li {
  -webkit-backface-visibility: hidden;
  position: absolute;
  display: none;
  width: 100%;
  left: 0;
  top: 0;
  }

.rslides li:first-child {
  position: relative;
  display: block;
  float: left;
  }

.rslides img {
  display: block;
  height: auto;
  float: left;
  width: 100%;
  border: 0;
  }

#index_slider
{
  width:100%;
  position: relative;
  float: left;  


}
#slider {
margin: 0 auto;


}

a {
    color:#fff;

}

/* menu styles */ 

#menu {
    background:#181818;
    color:#6e7166;
    height:63px;
    width:100%;
    float:left;
    position:relative;

}

/* sections */ 

    #sections {
        transition:all 1s ease; 
    }

    #clients {
        height:44px;
        background:#333;
        position:relative;
        float:left;

    }


    #sections:target #clients {
        height:90px;
        background:#333;
        transition:all 1s ease;
    }

    #sections:target .rslides {
        height:0px;
        transition:all 1s ease;
    }

Answer 1

添加幻灯片的高度固定它：

.rslides {
  position: relative;
  list-style: none;
  overflow: hidden;
  width: 100%;
  padding: 0;
  margin: 0;  
  transition:all 1s ease;
  height:432px;



}

通过缩放转换更改响应滑块高度

1 个答案: