1. 首頁
  2. 問答
  3. 滑塊示出了當窗口尺寸調整

滑塊示出了當窗口尺寸調整

2015-06-25 32 views
0

我已經當窗口尺寸調整滑塊示出了當窗口尺寸調整

  1. 的第一個問題在於，我現在面臨兩個問題分頻器，之間變換的滑塊隱藏要素是該分頻器是隱藏，（不顯示滑塊的內容）在重新調整尺寸時出現。 http://postimg.org/image/pydr005qb/

  2. 滑塊的按鈕沒有適應窗口調整大小，從而沒有跟上他們的位置的滑塊上方時反作用於窗口調整大小。 http://postimg.org/image/pydr005qb/

PS：

  • 滑塊的位置低於所述標誌，以菜單的右側，在開始菜單中的第一個元素的相同的水平。
  • 我提供了上述問題的圖像，因爲故障可能不會出現在jsfiddle結果選項卡中。

的jsfiddle：http://jsfiddle.net/p8wdwa30/

HTML：

<div id="logo" class="logo" ><img src="logo.png"/></div> 

     <div id="menu" class="menu"> 
     <ul class="headlines"> 
       <li id="item1"><button>Aaaaaaaa</button></li> 
      <li id="item2"><button>Bbbbbbb</button></li> 
      <li id="item3"><button>Cccccccc  </button></li> 
      <li id="item4"><button>Ddddddd   </button></li> 
      <li id="item5"><button>Eeeeeeee Eee. </button></li> 
      <li id="item6"><button>Fffffffff  </button></li> 
      <li id="item7"><button>Ggggggggg  </button></li> 
     </ul> 
     </div> 


     <div id="container"> 
      <div id="first" class="inner-container"> 
       <div id="wrapper"> 
    <div id="slider-container"> 
    <div id="nav"> 
     <p id="prev">&lt;</p> 
     <p id="next">&gt;</p> 
    </div> 
    <div class="slider-view-area"> 
    <div id="mask"> 
     <div id="item11" class="item"> <a name="item11"></a> 

      <div class="content"> 
       <a caption="A tableyv" rel="Sold" class="fancybox" data-fancybox-group="thumb1" href="http://fancyapps.com/fancybox/demo/4_b.jpg"><img id="image0" src="http://fancyapps.com/fancybox/demo/4_s.jpg" alt="" /></a> 

<a caption="A table" rel="Sold" class="fancybox hidden" data-fancybox-group="thumb1" href="http://fancyapps.com/fancybox/demo/3_b.jpg"><img id="image1" src="http://fancyapps.com/fancybox/demo/3_s.jpg" alt="" /></a> 
       <img id="image2" src="http://placehold.it/350x150" /> 
       <img id="image3" src="http://placehold.it/350x150" /> 
       <img id="image4" src="http://placehold.it/350x150" /> 
       <img id="image5" src="http://placehold.it/350x150" /> 
       <img id="image6" src="http://placehold.it/350x150" /> 
       <img id="image7" src="http://placehold.it/350x150" /> 
       <img id="image8" src="http://placehold.it/350x150" /> 
       <img id="image9" src="http://placehold.it/350x150" /> 
       <img id="image10" src="http://placehold.it/350x150" /> 
      </div> 
     </div> 
     <div id="item22" class="item"> 
      <div class="content"> 
       <img id="image1" src="http://placehold.it/350x150" alt="slot2" /> 
       <img id="image2" src="http://placehold.it/350x150" /> 
       <img id="image3" src="http://placehold.it/350x150" /> 
       <img id="image4" src="http://placehold.it/350x150" /> 
       <img id="image5" src="http://placehold.it/350x150" /> 
       <img id="image6" src="http://placehold.it/350x150" /> 
       <img id="image7" src="http://placehold.it/350x150" /> 
       <img id="image8" src="http://placehold.it/350x150" /> 
       <img id="image9" src="http://placehold.it/350x150" /> 
       <img id="image10" src="http://placehold.it/350x150" /> 
      </div> 
     </div> 
     <div id="item33" class="item"> 
      <div class="content"> 
       <img id="image1" src="http://placehold.it/350x150" alt="slot2" /> 
       <img id="image2" src="http://placehold.it/350x150" /> 
       <img id="image3" src="http://placehold.it/350x150" /> 
       <img id="image4" src="http://placehold.it/350x150" /> 
       <img id="image5" src="http://placehold.it/350x150" /> 
       <img id="image6" src="http://placehold.it/350x150" /> 
       <img id="image7" src="http://placehold.it/350x150" /> 
       <img id="image8" src="http://placehold.it/350x150" /> 
       <img id="image9" src="http://placehold.it/350x150" /> 
       <img id="image10" src="http://placehold.it/350x150" /> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 
</div>

CSS：

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { 
    margin: 0; 
    padding: 0; 
    border: 0; 
    font-size: 100%; 
    font: inherit; 
    vertical-align: baseline; 
} 
ol, ul { 
    list-style: none; 
} 
html { 
    background-color: #FFFFFF; 
    -webkit-font-smoothing: antialiased; 
} 
body { 
    background-color: #ffffff; 
    font-family:"Helvetica Neue", Helvetica, Arial, sans-serif; 
    font-size: 16px; 
    line-height: 1.5em; 
    color: #545454; 
    background-color: #ffffff; 
    text-align: center; 
} 
h1, h2, h3, h4, h5, h6 { 
    color: #222; 
    font-weight: 600; 
    line-height: 1.3em; 
} 
h2 { 
    margin-top: 1.3em; 
} 
.custom-class { 
    text-align: right; 
    margin-top:-130px; 
    margin-right: 20px; 
} 
a { 
    color: #000000; 
    text-decoration: none; 
} 
b, strong { 
    font-weight: 600; 
} 
samp { 
    display: none; 
} 
img { 
    -webkit-animation: colorize 2s cubic-bezier(0, 0, .78, .36) 1; 
    animation: colorize 2s cubic-bezier(0, 0, .78, .36) 1; 
    background: transparent; 
    border-style:none; 
    border-radius: 4px; 
    display: block; 
    margin: 1.3em auto; 
    max-width: 95%; 
} 
.logo { 
    text-align: center; 
    margin-top:40px; 
} 
li { 
    list-style-type: none; 
    font-size: 1.5em; 
    padding-top: 8px; 
    text-align:center; 
    border-style: none; 
} 
.menu li { 
    position: relative; 
    top: 180px; 
    left: 0px; 
} 
#item7 { 
    transition: opacity .8s, left .8s ease-out; 
    -moz-transition: opacity .8s, left .8s ease-out; 
    -webkit-transition: opacity .8s, left .8s ease-out; 
    -o-transition: opacity .8s, left .8s ease-out; 
    margin-left:105px 
} 
#item6 { 
    transition: opacity 1s, left 1s ease-out; 
    -moz-transition: opacity 1s, left 1s ease-out; 
    -webkit-transition: opacity 1s, left 1s ease-out; 
    -o-transition: opacity 1s, left 1s ease-out; 
    margin-left: 95px; 
} 
#item5 { 
    transition: opacity 1.2s, left 1.2s ease-out; 
    -moz-transition: opacity 1.2s, left 1.2s ease-out; 
    -webkit-transition: opacity 1.2s, left 1.2s ease-out; 
    -o-transition: opacity 1.2s, left 1.2s ease-out; 
    margin-left: 60px; 
} 
#item4 { 
    transition: opacity 1.4s, left 1.4s ease-out; 
    -moz-transition: opacity 1.4s, left 1.4s ease-out; 
    -webkit-transition: opacity 1.4s, left 1.4s ease-out; 
    -o-transition: opacity 1.4s, left 1.4s ease-out; 
    margin-left: 123px; 
} 
#item3 { 
    transition: opacity 1.6s, left 1.6s ease-out; 
    -moz-transition: opacity 1.6s, left 1.6s ease-out; 
    -webkit-transition: opacity 1.6s, left 1.6s ease-out; 
    -o-transition: opacity 1.6s, left 1.6s ease-out; 
    margin-left: 113px; 
} 
#item2 { 
    transition: opacity 1.8s, left 1.8s ease-out; 
    -moz-transition: opacity 1.8s, left 1.8s ease-out; 
    -webkit-transition: opacity 1.8s, left 1.8s ease-out; 
    -o-transition: opacity 1.8s, left 1.8s ease-out; 
    margin-left: 130px; 
} 
#item1 { 
    transition: opacity 2s, left 2s ease-out; 
    -moz-transition: opacity 2s, left 2s ease-out; 
    -webkit-transition: opacity 2s, left 2s ease-out; 
    -o-transition: opacity 2s, left 2s ease-out; 
    margin-left: 117px; 
} 

#item1>button{background:none;border:none;outline:none;cursor:pointer;font-size: 1em;} 
#item2>button{background:none;border:none;outline:none;cursor:pointer;font-size: 1em;} 
#item3>button{background:none;border:none;outline:none;cursor:pointer;font-size: 1em;} 
#item4>button{background:none;border:none;outline:none;cursor:pointer;font-size: 1em;} 
#item5>button{background:none;border:none;outline:none;cursor:pointer;font-size: 1em;} 
#item6>button{background:none;border:none;outline:none;cursor:pointer;font-size: 1em;} 
#item7>button{background:none;border:none;outline:none;cursor:pointer;font-size: 1em;} 

.permahover li { 
    opacity: 1; 
    left: -40%; 
} 
.headlines li { 
    font-size:1.5em; 
    color:#000000; 
    transition: all 0.5s; 
    cursor: pointer; 
} 
#first 
{ display: none; 
    width: 50%; 
    height: 220px; 
    top: 20%; 
    margin: auto; 
    position: relative; 


} 

#first img 
{ 
    height: 100px; 
    width: 17%; 
    float:left; 
    margin-right: 10px; 
    margin-bottom: 10px; 
} 



@-webkit-keyframes colorize { 
    0% { 
     -webkit-filter: grayscale(100%); 
    } 
    100% { 
     -webkit-filter: grayscale(0%); 
    } 
} 

@keyframes colorize { 
    0% { 
     filter: grayscale(100%); 
    } 
    100% { 
     filter: grayscale(0%); 
    } 
} 

} 

<!-- slider css--> 

#wrapper { 
    width: 100%; 
    background-color: white; 
    padding: px 0; 
} 

#slider-container { 
    padding: 20px 50px; 
    height: 300px; 
    top:-18%; 
    left: 50px; 
    width: 700px; 
    background-color: white; 
    overflow: hidden; 
    position: relative; 
} 

.slider-view-area { 
    overflow: hidden; 
    background-color: white; 
} 

#nav p { 
    position: absolute; 
    top: 31px; 
    left: 300px; 
    cursor:pointer; 
    color:grey; 

} 
#prev { 
    left: 40px; 
    margin-left: 300px; 
    font-size: 30px; 
} 
#next { 
    right: 40px; 
    margin-right: -370px; 
    font-size: 30px; 
} 

#mask { 
    width: 50000px; 
    height: 100%; 
    background-color: white; 
} 

.item { 
    width: 1200px; 
    height: 100%; 
    float: left; 
    background-color: white; 
} 
.content img { 
    height: 100px; 
    width: 17%; 
    float:left; 
    margin-right: 10px; 
    margin-bottom: 10px; 
    cursor: pointer; 
} 
.content { 
    width: 50%; 
    height: 220px; 
    top: 30px; 
    left: 
    margin: auto; 
    background-color: white; 
    position: relative; 
} 
.content a { 
    position: relative; 
    top: -17px; 
    left: 170px; 
} 
.selected { 
    background: #fff; 
    font-weight: 700; 
} 
.clear { 
    clear:both; 
} 

.hidden { 
    display: none;

}

JQUERY：

$(".menu").on("click", function() { 
    $(".menu").addClass('permahover'); 
}); 


var $li = $('.headlines li').click(function() { 
    var state = !$(this).hasClass('active'); 
    $(this).parent().toggleClass('active', state); 

    $li.removeClass('active'); 
    $(this).toggleClass('active', state); 
}); 

    $(document).on('click','#item1', function() 
{ 
    $("#container").fadeOut(2000, function(){ 
     $(".inner-container").hide(); 
     $("#first").show(); 
     $("#container").fadeIn(6000); 
    }); 

}); 


$(document).ready(function() { 
    var newItem = 0; 
    var itemCount = $('.item').length; 

    function shift(direction) { 
     var $mask = $('#mask'), 
      $items = $('.item'), 
      currentItem = $mask.data('currentItem'); 

     if (currentItem === undefined) { 
      currentItem = 0; 
     } 

     $mask.data('currentItem', newItem).animate({ 
      marginLeft: -newItem * $items.eq(0).width() 
     }); 
    } 

    $('#prev').click(function() { 
     if (newItem === 0) { 
      newItem = itemCount - 1; 
     } else { 
      newItem--; 
     } 
     return shift(); 
    }); 
    $('#next').click(function() { 
     if (newItem === itemCount - 1) { 
      newItem = 0; 
     } else { 
      newItem++; 
     } 
     return shift(); 
    }); 

    function resizePanel() { 
     width = $(window).width(); 
     height = $(window).height(); 

     $('#wrapper').css({ 
      width: width, 
      height: height 
     }); 

     $('.item').css({ 
      width: width - 100, 
      height: height 
     }); 
    } 

    $(window).resize(function() { 
     resizePanel(); 
    }); 
    resizePanel(); 
});

來源

2015-06-25 mikeb

回答

0

只要看看你的resizePanel（）函數在做什麼，你不只是使用CSS？

例如，

#wrapper{ 
width: 100%; 
height: 100%; 
padding: 50px; // recreate the width - 100 for .item 
} 
.item{ 
width: 100%; 
}

此外，如果可能的話我會充分利用CSS轉換/轉換，因爲這將真正提高了使用保證金左動畫性能。

至於您出現圖像的問題，它似乎並不像隱藏非活動的.item元素。

嘗試設置，

.item{ 
opacity: 0; 
visibility: hidden; 
transition: .2s; 
}

然後，當你表現出.item添加類一樣，

.item-active{ 
opacity: 1 
visibility: visible; 
}

來源

2015-06-25 06:23:54 rssfrncs

+0

@rssfmcs它沒有工作 – mikeb

相關問題

 相關問題