一款jquery实现的整屏切换特效
今天要为大家带来一款由jquery实现的整屏切换特效，在右侧有圆型小标，每点一个切换一屏。当然，你也可以滚动鼠标来切换页面。效果非常好。我们看下效果吧
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:;
padding:;
} .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:;
left:;
width: 100%;
height: 100%;
-webkit-transition: -webkit-transform 1.5s;
transition: transform 1.5s;
-webkit-perspective:;
perspective:;
-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:;
-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:;
-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:;
-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:;
}
.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:;
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
注：本文爱编程原创文章，转载请注明原文地址：http://www.w2bc.com/Article/6673
一款jquery实现的整屏切换特效的更多相关文章
- 一款仿PBA官网首页jQuery焦点图的切换特效
一款仿PBA官网首页jQuery焦点图的切换特效,非常的简单大方, 在对浏览器兼容性的方面做了不少的功夫.IE6也勉强能过去. 还是一款全屏的焦点图切换特效.大气而清新.很适合简介大方的网站. 下图还 ...
- jquery叠加页片自动切换特效
查看效果:http://keleyi.com/keleyi/phtml/jqtexiao/34.htm 下面是HTML代码: <!DOCTYPE html> <html xmlns= ...
- 20款jquery下拉导航菜单特效代码分享
20款jquery下拉导航菜单特效代码分享 jquery仿京东商城左侧分类导航下拉菜单代码 jQuery企业网站下拉导航菜单代码 jQuery css3黑色的多级导航菜单下拉列表代码 jquery响应 ...
- jQuery实现TAB选项卡切换特效简单演示
本文实例为大家分享jQuery实现TAB选项卡切换特效,供大家参考,具体内容如下 1.tab切换 on ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 1 ...
- Web 开发最有用的50款 jQuery 插件集锦——《图片特效篇》
<Web 开发最有用的50款 jQuery 插件集锦>系列文章向大家分享最具创新的50款 jQuery 插件,这些插件分成以下类别:网页布局插件,导航插件,表格插件,滑块和转盘插件,图表插 ...
- JQuery淡入淡出 banner切换特效
附件中提供另一种实现方式 基本类似 主要的实现方法如下: var ShowAD=function(i){ showImg.eq(i).animate({opacity:1},settings.sp ...
- 12款jQuery幻灯片插件和幻灯片特效教程
jQuery 使用简单灵活,同时还有许多成熟的插件可供选择,它可以帮助你在项目中加入一些非常好的效果.滑块和幻灯片效果是常用的内容展示方式之一,这是一种在有限的网页空间内展示系列项目时非常好的方法.今 ...
- 基于html5整屏切换IDO智能手表页面滚动代码
之前为大大家介绍了一款jquery实现的整屏切换特效.今天分享一款IDO智能手表页面滚动html5代码.这是一款基于jQuery+HTML5实现的页面滚动效果代码.效果图如下: 在线预览 源码下载 ...
- 10款基于jquery的web前端动画特效
1.jQuery横向手风琴图片切换动画 之前我们为大家分享过很多款基于jQuery和CSS3的手风琴菜单和手风琴焦点图插件,比如CSS3响应式垂直手风琴菜单和jQuery横向手风琴图片展示插件.今天要 ...
随机推荐
- spring cloud单点登录
概述 基于springcloud的单点登录服务及基于zuul的网关服务(解决了通过zuul转发到认证服务之后session丢失问题) 详细 代码下载:http://www.demodashi.com/ ...
- 【云栖大会】阿里巴巴集团CTO张建锋:用计算和数据去改变整个世界
摘要: 当浩瀚的数字化信息能够联网在线,在万物互联网的新世界中,所有东西都可能有感知.变智能,想象一下电表.冰箱.心电图监测仪等设备的信息都能数字化并联网,从城市管理到个人生活,都会迎来翻天覆地的变化 ...
- Ajax Control Toolkit 34个服务器端控件的使用
摘自:http://blog.csdn.net/yaoshuyun/article/details/2218633 1. Accordion[功能概述] Accordion可以让你设计多个panel ...
- 使用 Eclipse 远程调试 Java 应用程序
Eclipse 中的远程调试特性 Eclipse 是一个图形化 Java 调试器前端.JDI 在 org.eclipse.jdt.debug 包中实现.本文不详细讨论 JDI 实现.参见 参考资料 获 ...
- std::copy 和 std::back_inserter
#define print_vector(v1) \ for(auto iter = v1.begin();iter != v1.end();iter++) \ cout<<*iter&l ...
- C plus plus 控制格式
使用这些格式需要声明包含<iomainip> long flags( ) const 返回当前的格式标志.long flays(long newflag) 设置格式标志为newflag,返 ...
- hduoj------确定比赛名次
拓扑排序结合代码的完整理解 确定比赛名次 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Oth ...
- ios NSURLSession使用说明及后台工作流程分析
NSURLSession是iOS7中新的网络接口,它与咱们熟悉的NSURLConnection是并列的.在程序在前台时,NSURLSession与NSURLConnection可以互为替代工作.注意, ...
- scrapy 的一个例子
1.目标: scrapy 是一个爬虫构架,现用一个简单的例子来讲解,scrapy 的使用步骤 2.创建一个scrapy的项目: 创建一个叫firstSpider的项目,命令如下: scrapy sta ...
- unity5 静态和动态cubmap
一,静态cubemap: asserts窗口 右键->Create->Legacy->Cubemap,新建一个cubemap,命名为cubeMap,然后为其各面指定贴图,如图: 需要 ...