jQuery和css3側邊欄滑出式圖片介紹外掛

listjjjclove發表於2024-12-09
jQueryCSSS3

這是一款非常實用的 jQuery和css3側邊欄滑出式圖片介紹外掛。它利用隱藏側邊欄來製作圖片的詳細資訊介紹，大大的節約了空間，而且使用者不必多次重新整理頁面。

線上預覽 下載

HTML結構

外掛section #cd-team作為wrapper：

<section id="cd-team" class="cd-section">
<div class="cd-container">
<h2>Our team</h2>
<ul>
<li>
<a href="#0" data-type="member-1">
<figure><!-- .... --></figure>
<div class="cd-member-info"><!-- .... --></div>
</a>
</li>
<li><!-- member 2 --></li>
<li><!-- .... --></li>
</ul>
</div>
</section>

對於每一張圖片的介紹，我們建立div .cd-member-bio，並將它們放在body標籤結束之前。

<div class="cd-member-bio member-1">
<div class="cd-member-bio-pict">
<img src="img/member-bio-img-1.jpg" alt="">
</div> <!-- cd-member-bio-pict -->
<div class="cd-bio-content">
<h1>Meet John Smith</h1>
<p>......</p>
</div> <!-- cd-bio-content -->
</div> <!-- cd-member-bio -->

CSS樣式

開始時圖片介紹透過設定position:fixed;和right: 0;以及一個等於寬度的 translateX來將它放置在螢幕之外。

.cd-member-bio {
position: fixed;
top: 0;
right: 0;
width: 270px;
height: 100%;
overflow-y: auto;
/* smooth scrolling on mobile phones and tablets */
-webkit-overflow-scrolling: touch;
/* this how we move the author bio section off the canvas */
transform: translateX(270px);
transition-property: transform;
transition-duration: 0.3s;
}

當使用者點選了其中一張圖片，我們使用jQuery為div.cd-member-bio新增class .slide-in。這個class修改translateX的值為0。-webkit-overflow-scrolling: touch用於在webkit核心的瀏覽器中使滾動更加平滑。當你使用overflow 屬性時，推薦你新增這個屬性。

我們給body一個overflow-x: hidden;是為了在IE瀏覽器中阻止水平捲軸的出現。

JAVASCRIPT

我們給每一張圖片都新增了data-type屬性，當使用者點選了一張圖片，等於該data-type的class將被顯示：

jQuery(document).ready(function($){
var is_firefox = navigator.userAgent.indexOf('Firefox') > -1;
//open team-member bio
$('#cd-team').find('ul a').on('click', function(event){
event.preventDefault();
var selected_member = $(this).data('type');
$('.cd-member-bio.'+selected_member+'').addClass('slide-in');
$('.cd-member-bio-close').addClass('is-visible');
// firefox transitions break when parent overflow is changed, so we need to wait for the end of the trasition to give the body an overflow hidden
if( is_firefox ) {
$('main').addClass('slide-out').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(){
$('body').addClass('overflow-hidden');
});
} else {
$('main').addClass('slide-out');
$('body').addClass('overflow-hidden');
}
});
//close team-member bio
$(document).on('click', '.cd-overlay, .cd-member-bio-close', function(event){
event.preventDefault();
$('.cd-member-bio').removeClass('slide-in');
$('.cd-member-bio-close').removeClass('is-visible');
if( is_firefox ) {
$('main').removeClass('slide-out').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(){
$('body').removeClass('overflow-hidden');
});
} else {
$('main').removeClass('slide-out');
$('body').removeClass('overflow-hidden');
}
});
});

相關文章