一款由jquery實(shí)現(xiàn)的整屏切換特效
更新時(shí)間：2014年09月15日 09:18:15 投稿：whsnow
一款jquery實(shí)現(xiàn)的整屏切換特效，在右側(cè)有圓型小標(biāo)，每點(diǎn)一個(gè)切換一屏。當(dāng)然，你也可以滾動(dòng)鼠標(biāo)來(lái)切換頁(yè)面
今天要為大家?guī)?lái)一款由jquery實(shí)現(xiàn)的整屏切換特效，在右側(cè)有圓型小標(biāo)，每點(diǎn)一個(gè)切換一屏。當(dāng)然，你也可以滾動(dòng)鼠標(biāo)來(lái)切換頁(yè)面。效果非常好。我們看下效果吧
html代碼：
<div class="wrapper active-page4"> <div class="page page1"> <h2> First page</h2> </div> <div class="page page2"> <h2> Second page</h2> </div> <div class="page page3"> <h2> Third page</h2> </div> <div class="page page4"> <h2> Fourth page</h2> </div> </div> <div class="nav-panel"> <div class="scroll-btn up"> </div> <div class="scroll-btn down"> </div> <nav> <ul> <li data-target="1" class="nav-btn nav-page1"></li> <li data-target="2" class="nav-btn nav-page2"></li> <li data-target="3" class="nav-btn nav-page3"></li> <li data-target="4" class="nav-btn nav-page4 active"></li> </ul> </nav> </div>
css代碼：
*, *:before, *:after
{
-moz-box-sizing: border-box;
box-sizing: border-box;
margin: 0;
padding: 0;
}
.inner, .nav-panel ul .nav-btn:after
{
content: "";
position: absolute;
top: 50%;
left: 50%;
}
html, body
{
width: 100%;
height: 100%;
overflow: hidden;
}
@media (max-width: 767px)
{
body
{
font-size: 70%;
}
}
.wrapper
{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
-webkit-transition: -webkit-transform 1.5s;
transition: transform 1.5s;
-webkit-perspective: 3000;
perspective: 3000;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.wrapper .page
{
position: relative;
width: 100%;
height: 100%;
-webkit-transform: rotateX(180deg) scale(0.3);
transform: rotateX(180deg) scale(0.3);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transition: -webkit-transform 1s ease-in-out;
transition: transform 1s ease-in-out;
will-change: transform;
}
.wrapper .page h2
{
color: #fff;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
text-transform: uppercase;
font-size: 3em;
}
.wrapper .page.page1
{
background-color: #66a6b8;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(20%, #66a6b8), color-stop(80%, #5471B9));
background-image: -webkit-linear-gradient(-280deg, #66a6b8 20%, #5471B9 80%);
background-image: -webkit-linear-gradient(80deg, #66a6b8 20%, #5471B9 80%);
background-image: linear-gradient(10deg,#66a6b8 20%, #5471B9 80%);
}
.wrapper .page.page2
{
background-color: #f29c54;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f29c54), color-stop(100%, #DB4367));
background-image: -webkit-linear-gradient(-315deg, #f29c54 0%, #DB4367 100%);
background-image: -webkit-linear-gradient(45deg, #f29c54 0%, #DB4367 100%);
background-image: linear-gradient(45deg,#f29c54 0%, #DB4367 100%);
}
.wrapper .page.page3
{
background-color: #23af56;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #23af56), color-stop(100%, #67A79A));
background-image: -webkit-linear-gradient(-405deg, #23af56 0%, #67A79A 100%);
background-image: -webkit-linear-gradient(315deg, #23af56 0%, #67A79A 100%);
background-image: linear-gradient(135deg,#23af56 0%, #67A79A 100%);
}
.wrapper .page.page4
{
background-color: #412F2F;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(15%, #412F2F), color-stop(85%, #6B2686));
background-image: -webkit-linear-gradient(-430deg, #412F2F 15%, #6B2686 85%);
background-image: -webkit-linear-gradient(290deg, #412F2F 15%, #6B2686 85%);
background-image: linear-gradient(160deg,#412F2F 15%, #6B2686 85%);
}
.wrapper.active-page1
{
-webkit-transform: translateY(0%);
-ms-transform: translateY(0%);
transform: translateY(0%);
}
.wrapper.active-page1 .page.page1
{
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
.wrapper.active-page2
{
-webkit-transform: translateY(-100%);
-ms-transform: translateY(-100%);
transform: translateY(-100%);
}
.wrapper.active-page2 .page.page2
{
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
.wrapper.active-page3
{
-webkit-transform: translateY(-200%);
-ms-transform: translateY(-200%);
transform: translateY(-200%);
}
.wrapper.active-page3 .page.page3
{
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
.wrapper.active-page4
{
-webkit-transform: translateY(-300%);
-ms-transform: translateY(-300%);
transform: translateY(-300%);
}
.wrapper.active-page4 .page.page4
{
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
.wrapper.active-page5
{
-webkit-transform: translateY(-400%);
-ms-transform: translateY(-400%);
transform: translateY(-400%);
}
.wrapper.active-page5 .page.page5
{
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
.wrapper.active-page6
{
-webkit-transform: translateY(-500%);
-ms-transform: translateY(-500%);
transform: translateY(-500%);
}
.wrapper.active-page6 .page.page6
{
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
.wrapper.active-page7
{
-webkit-transform: translateY(-600%);
-ms-transform: translateY(-600%);
transform: translateY(-600%);
}
.wrapper.active-page7 .page.page7
{
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
.wrapper.active-page8
{
-webkit-transform: translateY(-700%);
-ms-transform: translateY(-700%);
transform: translateY(-700%);
}
.wrapper.active-page8 .page.page8
{
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
.wrapper.active-page9
{
-webkit-transform: translateY(-800%);
-ms-transform: translateY(-800%);
transform: translateY(-800%);
}
.wrapper.active-page9 .page.page9
{
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
.wrapper.active-page10
{
-webkit-transform: translateY(-900%);
-ms-transform: translateY(-900%);
transform: translateY(-900%);
}
.wrapper.active-page10 .page.page10
{
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
.nav-panel
{
position: fixed;
top: 50%;
right: 1em;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
z-index: 1000;
-webkit-transition: opacity 0.5s, -webkit-transform 0.5s cubic-bezier(0.57, 1.2, 0.68, 2.6);
transition: opacity 0.5s, transform 0.5s cubic-bezier(0.57, 1.2, 0.68, 2.6);
will-change: transform, opacity;
}
.nav-panel.invisible
{
opacity: 0;
-webkit-transform: translateY(-50%) scale(0.5);
-ms-transform: translateY(-50%) scale(0.5);
transform: translateY(-50%) scale(0.5);
}
.nav-panel ul
{
list-style-type: none;
}
.nav-panel ul .nav-btn
{
position: relative;
overflow: hidden;
width: 1em;
height: 1em;
margin-bottom: 0.5em;
border: 0.12em solid #fff;
border-radius: 50%;
cursor: pointer;
-webkit-transition: border-color, -webkit-transform 0.3s;
transition: border-color, transform 0.3s;
will-change: border-color, transform;
}
.nav-panel ul .nav-btn:after
{
width: 100%;
height: 100%;
border-radius: 50%;
-webkit-transform: translateX(-50%) translateY(-50%) scale(0.3);
-ms-transform: translateX(-50%) translateY(-50%) scale(0.3);
transform: translateX(-50%) translateY(-50%) scale(0.3);
background-color: #fff;
opacity: 0;
-webkit-transition: -webkit-transform, opacity 0.3s;
transition: transform, opacity 0.3s;
will-change: transform, opacity;
}
.nav-panel ul .nav-btn.active:after, .nav-panel ul .nav-btn:hover:after
{
-webkit-transform: translateX(-50%) translateY(-50%) scale(0.7);
-ms-transform: translateX(-50%) translateY(-50%) scale(0.7);
transform: translateX(-50%) translateY(-50%) scale(0.7);
opacity: 1;
}
.nav-panel ul .nav-btn:hover
{
border-color: yellow;
-webkit-transform: scale(1.2);
-ms-transform: scale(1.2);
transform: scale(1.2);
}
.nav-panel ul .nav-btn:hover:after
{
background-color: yellow;
}
.nav-panel .scroll-btn
{
position: absolute;
left: 0;
width: 1em;
height: 1em;
border: 0.2em solid #fff;
border-left: none;
border-bottom: none;
cursor: pointer;
-webkit-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
transform-origin: 50% 50%;
-webkit-transition: border-color 0.3s;
transition: border-color 0.3s;
}
.nav-panel .scroll-btn.up
{
top: -1.6em;
-webkit-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.nav-panel .scroll-btn.down
{
bottom: -1.2em;
-webkit-transform: rotate(135deg);
-ms-transform: rotate(135deg);
transform: rotate(135deg);
}
.nav-panel .scroll-btn:hover
{
border-color: yellow;
}
js代碼：
'use strict';
$(document).ready(function () {
var $wrap = $(".wrapper"),
pages = $(".page").length,
scrolling = false,
currentPage = 1,
$navPanel = $(".nav-panel"),
$scrollBtn = $(".scroll-btn"),
$navBtn = $(".nav-btn");
/*****************************
***** NAVIGATE FUNCTIONS *****
*****************************/
function manageClasses() {
$wrap.removeClass(function (index, css) {
return (css.match(/(^|\s)active-page\S+/g) || []).join(' ');
});
$wrap.addClass("active-page" + currentPage);
$navBtn.removeClass("active");
$(".nav-btn.nav-page" + currentPage).addClass("active");
$navPanel.addClass("invisible");
scrolling = true;
setTimeout(function () {
$navPanel.removeClass("invisible");
scrolling = false;
}, 1000);
}
function navigateUp() {
if (currentPage > 1) {
currentPage--;
if (Modernizr.csstransforms) {
manageClasses();
} else {
$wrap.animate({ "top": "-" + ((currentPage - 1) * 100) + "%" }, 1000);
}
}
}
function navigateDown() {
if (currentPage < pages) {
currentPage++;
if (Modernizr.csstransforms) {
manageClasses();
} else {
$wrap.animate({ "top": "-" + ((currentPage - 1) * 100) + "%" }, 1000);
}
}
}
/*********************
***** MOUSEWHEEL *****
*********************/
$(document).on("mousewheel DOMMouseScroll", function (e) {
if (!scrolling) {
if (e.originalEvent.wheelDelta > 0 || e.originalEvent.detail < 0) {
navigateUp();
} else {
navigateDown();
}
}
});
/**************************
***** RIGHT NAVIGATION ****
**************************/
/* NAV UP/DOWN BTN PAGE NAVIGATION */
$(document).on("click", ".scroll-btn", function () {
if ($(this).hasClass("up")) {
navigateUp();
} else {
navigateDown();
}
});
/* NAV CIRCLE DIRECT PAGE BTN */
$(document).on("click", ".nav-btn", function () {
if (!scrolling) {
var target = $(this).attr("data-target");
if (Modernizr.csstransforms) {
$wrap.removeClass(function (index, css) {
return (css.match(/(^|\s)active-page\S+/g) || []).join(' ');
});
$wrap.addClass("active-page" + target);
$navBtn.removeClass("active");
$(this).addClass("active");
$navPanel.addClass("invisible");
currentPage = target;
scrolling = true;
setTimeout(function () {
$navPanel.removeClass("invisible");
scrolling = false;
}, 1000);
} else {
$wrap.animate({ "top": "-" + ((target - 1) * 100) + "%" }, 1000);
}
}
});
}); //@ sourceURL=pen.js
您可能感興趣的文章:
- JQuery 動(dòng)畫(huà)卷頁(yè) 返回頂部 動(dòng)畫(huà)特效(兼容Chrome)
- 基于jQuery的彈出隱藏層的窗口特效
- 分享精心挑選的23款美輪美奐的jQuery 圖片特效插件
- 基于jQuery實(shí)現(xiàn)下拉收縮(展開(kāi)與折疊)特效
- 使用jquery實(shí)現(xiàn)圖文切換效果另加特效
- jquery顯示和隱藏div特效實(shí)例
- jquery實(shí)現(xiàn)圖片左右間隔滾動(dòng)特效(可自動(dòng)播放)
- jquery之超簡(jiǎn)單的div顯示和隱藏特效demo(分享)
- jQuery焦點(diǎn)圖切換特效插件封裝實(shí)例
- 點(diǎn)擊彈出層外區(qū)域關(guān)閉彈出層jquery特效示例
- jquery購(gòu)物車(chē)實(shí)時(shí)結(jié)算特效實(shí)現(xiàn)思路
- jquery定時(shí)滑出可最小化的底部提示層特效代碼
- JQuery插件iScroll實(shí)現(xiàn)下拉刷新，滾動(dòng)翻頁(yè)特效
- 推薦9款炫酷的基于jquery的頁(yè)面特效
- web前端設(shè)計(jì)師們常用的jQuery特效插件匯總
- jQuery+easyui中的combobox實(shí)現(xiàn)下拉框特效
- jQuery實(shí)現(xiàn)精美的多級(jí)下拉菜單特效
- jQuery+jRange實(shí)現(xiàn)滑動(dòng)選取數(shù)值范圍特效
- 基于Jquery實(shí)現(xiàn)萬(wàn)圣節(jié)快樂(lè)特效
相關(guān)文章
jquery動(dòng)畫(huà)4.升級(jí)版遮罩效果的圖片走廊--帶自動(dòng)運(yùn)行效果
我將上一章中了插件做了個(gè)小小的升級(jí)，實(shí)現(xiàn)了自動(dòng)運(yùn)行效果，完整代碼大家見(jiàn)demo2012-08-08
本文為大家介紹下html偽彈出框的實(shí)現(xiàn)，感興趣的朋友可以了解下2013-09-09
這篇文章主要介紹了jQuery的one()方法用法,實(shí)例分析了one()方法的功能、定義及為匹配元素的特定事件綁定一個(gè)一次性的事件處理方法使用技巧,需要的朋友可以參考下2015-01-01
jQuery根據(jù)ID、CLASS、等獲取對(duì)象的實(shí)例
下面小編就為大家?guī)?lái)一篇jQuery根據(jù)ID、CLASS、等獲取對(duì)象的實(shí)例。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-12-12
使用jQuery獲取radio/checkbox組的值的代碼收集
很久沒(méi)有寫(xiě)JQuery的文章了。今天來(lái)看下JQ對(duì)天Checkbox復(fù)選框的操作?？聪旅娴囊粋€(gè)小例子。在這個(gè)例子中包括了以下幾個(gè)功能2009-12-12
jQuery禁用鍵盤(pán)后退屏蔽F5刷新及禁用右鍵單擊
這篇文章主要介紹了jQuery禁用鍵盤(pán)后退、屏蔽F5刷新、禁用右鍵單擊功能等快捷方法，感興趣的小伙伴們可以參考一下2016-01-01
jQuery實(shí)現(xiàn)動(dòng)態(tài)加載(按需加載)javascript文件的方法分析
這篇文章主要介紹了jQuery實(shí)現(xiàn)動(dòng)態(tài)加載(按需加載)javascript文件的方法,結(jié)合實(shí)例形式分析了jQuery根據(jù)調(diào)用函數(shù)按需動(dòng)態(tài)加載javascript文件相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2019-05-05
jQuery實(shí)現(xiàn)切換頁(yè)面過(guò)渡動(dòng)畫(huà)效果
這是一款效果非常酷的jQuery和CSS3通過(guò)AJAX調(diào)用切換頁(yè)面過(guò)渡動(dòng)畫(huà)特效插件。該頁(yè)面切換特效使用AJAX來(lái)動(dòng)態(tài)加載鏈接內(nèi)容，在頁(yè)面加載的時(shí)候，使用CSS3來(lái)制作非?？岬捻?yè)面過(guò)渡動(dòng)畫(huà)效果。插件中使用pushState方法來(lái)管理瀏覽器的瀏覽歷史，需要的朋友可以參考下2015-10-10
巧用jquery解決下拉菜單被Div遮擋的相關(guān)問(wèn)題
本篇文章主要是對(duì)巧用jquery解決下拉菜單被Div遮擋的相關(guān)問(wèn)題進(jìn)行了介紹，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助2014-02-02
jQuery實(shí)現(xiàn)復(fù)選框批量選擇與反選的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)復(fù)選框批量選擇與反選的方法,主要通過(guò)jQuery的attr與removeAttr方法實(shí)現(xiàn)選擇與反選的功能,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-06-06