這是一款非常有創(chuàng)意的jQuery和CSS3滑動(dòng)覆蓋響應(yīng)式幻燈片特效。該幻燈片特效采用響應(yīng)式設(shè)計(jì)，在幻燈片切換時(shí)使用一個(gè)滑動(dòng)塊狀區(qū)域來進(jìn)行覆蓋，顯示新的幻燈片內(nèi)容，整體效果非常不錯(cuò)。

使用方法

HTML結(jié)構(gòu)

該幻燈片的HTML結(jié)果由兩部分組成：一個(gè)ul.cd-slider用于制作幻燈片，ol.cd-slider-navigation則用于制作幻燈片的導(dǎo)航。它們都被包裹在div.cd-slider-wrapper容器中。

• Slide Number 1

需要注意的是幻燈片的導(dǎo)航元素ol.cd-slider-navigation不是直接插入到DOM中的，而是通過jQuery來動(dòng)態(tài)添加的。

CSS樣式

在小屏幕設(shè)備中(視口小于900px)，幻燈片的結(jié)果非常簡單：.cd-slider元素使用相對(duì)定位，它的所有

子元素都采用絕對(duì)定位，開始時(shí)位于左上角的位置。

所有的列表項(xiàng)都通過translateX(100%)被移動(dòng)到右側(cè)屏幕之外。另外.is-visibleclass類用于將它們移動(dòng)會(huì)屏幕中間(使用translateX(0))。

.cd-slider {

position: relative;

height: 100%;

overflow: hidden;

}

.cd-slider li {

position: absolute;

top: 0;

left: 0;

height: 100%;

width: 100%;

transform: translateX(100%);

transition: transform 0.6s;

}

.cd-slider li.is-visible {

transform: translateX(0);

}

在大屏幕設(shè)備中，列表項(xiàng)通過translateX(0)移動(dòng)會(huì)視口中，而他的兩個(gè)子元素.cd-half-block.content和.cd-half-block.image被移動(dòng)到屏幕的右側(cè)，分別是translateX(200%)和translateX(100%)。

當(dāng)前被選擇的幻燈片項(xiàng)被添加了.is-visible class之后，這兩個(gè).cd-half-block元素會(huì)被使用translateX(0)移動(dòng)會(huì)屏幕中間。

這里的動(dòng)畫都使用了CSS3 Transitions過渡動(dòng)畫效果。對(duì)于.cd-half-block.content元素，設(shè)置了0.6秒的transition-duration和0秒的transition-delay，而.cd-half-block.image元素則設(shè)置了0秒的transition-duration和0.3秒的transition-delay，這樣，當(dāng).cd-half-block.content元素動(dòng)畫過渡進(jìn)行到一半的時(shí)候，.cd-half-block.image元素就會(huì)立刻移動(dòng)回屏幕的中間。可以通過下面的這張GIF圖片來觀察這個(gè)動(dòng)畫過程。

@media only screen and (min-width: 900px) {

.cd-slider li {

transform: translateX(0);

}

.cd-slider .cd-half-block {

height: 100%;

width: 50%;

float: right;

}

.cd-slider .cd-half-block.content {

transform: translateX(200%);

transition: transform 0.6s 0s ease-in-out;

}

.cd-slider .cd-half-block.image {

transform: translateX(100%);

transition: transform 0s 0.3s;

}

.cd-slider li.is-visible .cd-half-block.content,

.cd-slider li.is-visible .cd-half-block.image {

transform: translateX(0%);

}

.cd-slider li.is-visible .cd-half-block.content {

transition: transform 0.6s 0s ease-in-out;

}

}

JavaScript

該幻燈片特效中使用jQuery來動(dòng)態(tài)插入幻燈片的導(dǎo)航按鈕。

// sliderContainer = $('.cd-slider-wrapper')

var sliderPagination = createSliderPagination(sliderContainer);

function createSliderPagination(container){

var wrapper = $('

');

container.children('.cd-slider').find('li').each(function(index){

var dotWrapper = (index == 0) ? $('

')

: $('

'),

dot = $('').appendTo(dotWrapper);

dotWrapper.appendTo(wrapper);

var dotText = ( index+1 < 10 ) ? '0'+ (index+1) : index+1;

dot.text(dotText);

});

wrapper.appendTo(container);

return wrapper.children('li');

}

另外還使用jQuery來實(shí)現(xiàn)了基本的幻燈片功能，包括滑動(dòng)觸摸和幻燈片導(dǎo)航功能。

總結(jié)

以上是生活随笔為你收集整理的html滑动逐渐覆盖效果,创意jQuery和CSS3滑动覆盖响应式幻灯片特效的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。