全屏切換效果
使背景圖始終位於屏幕中心javascript
#section1,
#section2,
#section3,
#section4{
background-color: #000;
background-size: cover;
background-position: 50% 50%;
text-align: center;
color: white;
}
jquery插件的開發方式css
-
類級別組件開發html
即給jquery命名空間添加新的全局函數，也稱靜態方法java
jQuery.myPlugin = function () {
//do something
}
例如 $.Ajax()、$.extend()jquery
-
對象級別組件開發web
即 掛在jQuery原型下的方法，這樣經過選擇器獲取的jquery對象實例也能共享該方法，也稱動態方法瀏覽器
$.fn.myPlugin = function () {
//do something
};
//這裏$.fn === $.prototype
例如: addClass() 、 attr() 等,須要建立實例來調用app
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>頁面切換</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
body{
font-family: Arial,"Microsoft YaHei",sans-serif;
}
html,body{
height: 100%;
overflow: hidden;
}
#container,.sections,.section{
height: 100%;
position: relative;
}
#section0,
#section1,
#section2,
#section3{
background-color: #000;
background-size: cover;
background-position: 50% 50%;
}
#section0{
background-image: url(images/1.jpg);
color: #fff;
text-shadow:1px 1px 1px #333;
}
#section1{
color: #fff;
text-shadow:1px 1px 1px #333;
background-image: url(images/2.jpg);
}
#section2{
background-image: url(images/3.jpg);
color: #fff;
text-shadow:1px 1px 1px #666;
}
#section3{
color: #008283;
background-image: url(images/4.jpg);
text-shadow:1px 1px 1px #fff;
}
#section0 p{
color: #F1FF00;
}
#section3 p{
color: #00A3AF;
}
.left{
float: left;
}
h1{
font-size: 6em;
font-weight: normal;
}
p{
font-size: 2em;
margin:0.5em 0 2em 0;
}
.intro{
position: absolute;
top: 50%;
width: 100%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
text-align: center;
}
.pages{
position:fixed;
list-style: none;
}
.vertical.pages{
right: 10px;
top: 50%;
}
.horizontal.pages{
left: 50%;
bottom: 10px;
}
.pages li{
width: 8px;
height: 8px;
border-radius: 50%;
background: #fff;
margin: 10px 5px;
cursor: pointer;
}
.horizontal.pages li{
display: inline-block;
vertical-align: middle;
}
.pages li.active{
width: 14px;
height: 14px;
border: 2px solid #FFFE00;
background: none;
margin-left: 0;
}
#section0 .title{
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
-webkit-animation: sectitle0 1s ease-in-out 100ms forwards;
animation: sectitle0 1s ease-in-out 100ms forwards;
}
#section0 p{
-webkit-transform: translateX(100%);
transform: translateX(100%);
-webkit-animation: sec0 1s ease-in-out 100ms forwards;
animation: sec0 1s ease-in-out 100ms forwards;
}
@-webkit-keyframes sectitle0{
0%{
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
}
100%{
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
@keyframes sectitle0{
0%{
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
}
100%{
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
@-webkit-keyframes sec0{
0%{
-webkit-transform: translateX(100%);
transform: translateX(100%);
}
100%{
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
@keyframes sec0{
0%{
-webkit-transform: translateX(100%);
transform: translateX(100%);
}
100%{
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
</style>
</head>
<body>
<div id="container" data-PageSwitch>
<div class="sections">
<div class="section active" id="section0">
<div class="intro">
<h1 class="title">switchPage</h1>
<p>Create Beautiful Fullscreen Scrolling Websites</p>
</div>
</div>
<div class="section" id="section1">
<div class="intro">
<h1 class="title">Example</h1>
<p>HTML markup example to define 4 sections</p>
<img src="images/example.png"/>
</div>
</div>
<div class="section" id="section2">
<div class="intro">
<h1 class="title">Example</h1>
<p>The plug-in configuration parameters</p>
<img src="images/example2.png"/>
</div>
</div>
<div class="section" id="section3">
<div class="intro">
<h1 class="title">THE END</h1>
<p>Everything will be okay in the end. If it's not okay, it's not the end.</p>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="pageswitch.js"></script>
<!--<script type="text/javascript">
$("#container").PageSwitch({
direction : "horizontal"
});
</script>-->
</body>
</html>
(function($){
"use strict";
/*說明:獲取瀏覽器前綴*/
/*實現：判斷某個元素的css樣式中是否存在transition屬性*/
/*參數：dom元素*/
/*返回值：boolean，有則返回瀏覽器樣式前綴，不然返回false*/
var _prefix = (function(temp){
var aPrefix = ["webkit", "Moz", "o", "ms"],
props = "";
for(var i in aPrefix){
props = aPrefix[i] + "Transition";
if(temp.style[ props ] !== undefined){
return "-"+aPrefix[i].toLowerCase()+"-";
}
}
return false;
})(document.createElement(PageSwitch));
var PageSwitch = (function(){
function PageSwitch(element, options){
this.settings = $.extend(true, $.fn.PageSwitch.defaults, options||{});
this.element = element;
this.init();
}
PageSwitch.prototype = {
/*說明：初始化插件*/
/*實現：初始化dom結構，佈局，分頁及綁定事件*/
init : function(){
var me = this;
me.selectors = me.settings.selectors;
me.sections = me.element.find(me.selectors.sections);
me.section = me.sections.find(me.selectors.section);
me.direction = me.settings.direction == "vertical" ? true : false;
me.pagesCount = me.pagesCount();
me.index = (me.settings.index >= 0 && me.settings.index < me.pagesCount) ? me.settings.index : 0;
me.canscroll = true;
if(!me.direction || me.index){
me._initLayout();
}
if(me.settings.pagination){
me._initPaging();
}
me._initEvent();
},
/*說明：獲取滑動頁面數量*/
pagesCount : function(){
return this.section.length;
},
/*說明：獲取滑動的寬度（橫屏滑動）或高度（豎屏滑動）*/
switchLength : function(){
return this.direction == 1 ? this.element.height() : this.element.width();
},
/*說明：向前滑動即上一頁*/
prve : function(){
var me = this;
if(me.index > 0){
me.index --;
}else if(me.settings.loop){
me.index = me.pagesCount - 1;
}
me._scrollPage();
},
/*說明：向後滑動即下一頁*/
next : function(){
var me = this;
if(me.index < me.pagesCount){
me.index ++;
}else if(me.settings.loop){
me.index = 0;
}
me._scrollPage();
},
/*說明：主要針對橫屏狀況進行頁面佈局*/
_initLayout : function(){
var me = this;
if(!me.direction){
var width = (me.pagesCount * 100) + "%",
cellWidth = (100 / me.pagesCount).toFixed(2) + "%";
me.sections.width(width);
me.section.width(cellWidth).css("float", "left");
}
if(me.index){
me._scrollPage(true);
}
},
/*說明：主要針對橫屏狀況進行頁面佈局*/
_initPaging : function(){
var me = this,
pagesClass = me.selectors.page.substring(1);
me.activeClass = me.selectors.active.substring(1);
var pageHtml = "<ul class="+pagesClass+">";
for(var i = 0 ; i < me.pagesCount; i++){
pageHtml += "<li></li>";
}
me.element.append(pageHtml);
var pages = me.element.find(me.selectors.page);
me.pageItem = pages.find("li");
me.pageItem.eq(me.index).addClass(me.activeClass);
if(me.direction){
pages.addClass("vertical");
}else{
pages.addClass("horizontal");
}
},
/*說明：初始化插件事件*/
_initEvent : function(){
var me = this;
/*綁定鼠標滾輪事件*/
me.element.on("mousewheel DOMMouseScroll", function(e){
e.preventDefault();
var delta = e.originalEvent.wheelDelta || -e.originalEvent.detail;
if(me.canscroll){
if(delta > 0 && (me.index && !me.settings.loop || me.settings.loop)){
me.prve();
}else if(delta < 0 && (me.index < (me.pagesCount-1) && !me.settings.loop || me.settings.loop)){
me.next();
}
}
});
/*綁定分頁click事件*/
me.element.on("click", me.selectors.page + " li", function(){
me.index = $(this).index();
me._scrollPage();
});
if(me.settings.keyboard){
$(window).keydown(function(e){
var keyCode = e.keyCode;
if(keyCode == 37 || keyCode == 38){
me.prve();
}else if(keyCode == 39 || keyCode == 40){
me.next();
}
});
}
/*綁定窗口改變事件*/
/*爲了避免頻繁調用resize的回調方法，作了延遲*/
var resizeId;
$(window).resize(function(){
clearTimeout(resizeId);
resizeId = setTimeout(function(){
var currentLength = me.switchLength();
var offset = me.settings.direction ? me.section.eq(me.index).offset().top : me.section.eq(me.index).offset().left;
if(Math.abs(offset) > currentLength/2 && me.index < (me.pagesCount - 1)){
me.index ++;
}
if(me.index){
me._scrollPage();
}
},500);
});
/*支持CSS3動畫的瀏覽器，綁定transitionend事件(即在動畫結束後調用起回調函數)*/
if(_prefix){
me.sections.on("transitionend webkitTransitionEnd oTransitionEnd otransitionend", function(){
me.canscroll = true;
if(me.settings.callback && $.type(me.settings.callback) === "function"){
me.settings.callback();
}
})
}
},
/*滑動動畫*/
_scrollPage : function(init){
var me = this;
var dest = me.section.eq(me.index).position();
if(!dest) return;
me.canscroll = false;
if(_prefix){
var translate = me.direction ? "translateY(-"+dest.top+"px)" : "translateX(-"+dest.left+"px)";
me.sections.css(_prefix+"transition", "all " + me.settings.duration + "ms " + me.settings.easing);
me.sections.css(_prefix+"transform" , translate);
}else{
var animateCss = me.direction ? {top : -dest.top} : {left : -dest.left};
me.sections.animate(animateCss, me.settings.duration, function(){
me.canscroll = true;
if(me.settings.callback){
me.settings.callback();
}
});
}
if(me.settings.pagination && !init){
me.pageItem.eq(me.index).addClass(me.activeClass).siblings("li").removeClass(me.activeClass);
}
}
};
return PageSwitch;
})();
$.fn.PageSwitch = function(options){
return this.each(function(){
var me = $(this),
instance = me.data("PageSwitch");
if(!instance){
me.data("PageSwitch", (instance = new PageSwitch(me, options)));
}
if($.type(options) === "string") return instance[options]();
});
};
$.fn.PageSwitch.defaults = {
selectors : {
sections : ".sections",
section : ".section",
page : ".pages",
active : ".active",
},
index : 0, //頁面開始的索引
easing : "ease", //動畫效果
duration : 500, //動畫執行時間
loop : false, //是否循環切換
pagination : true, //是否進行分頁
keyboard : true, //是否觸發鍵盤事件
direction : "vertical", //滑動方向vertical,horizontal
callback : "" //回調函數
};
$(function(){
$('[data-PageSwitch]').PageSwitch();
});
})(jQuery);
參考:dom
相關文章
- 1. Html 全屏切換效果
- 2. Android Ireader的全屏與非全屏的切換效果實現
- 3. Unity切換成左右屏效果
- 4. 全屏效果
- 5. Activity 切換效果
- 6. activity 切換效果
- 7. swiper.js-全屏動畫切換效果實現
- 8. vue頁面切換效果（slide效果切換）
- 9. 圖片切換效果
- 10. ios 卡片切換效果
- 更多相關文章...
- • SVG 模糊效果 - SVG 教程
- • ionic 切換開關操作 - ionic 教程
- • Tomcat學習筆記（史上最全tomcat學習筆記）
- • Docker容器實戰(七) - 容器眼光下的文件系統
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. Html 全屏切換效果
- 2. Android Ireader的全屏與非全屏的切換效果實現
- 3. Unity切換成左右屏效果
- 4. 全屏效果
- 5. Activity 切換效果
- 6. activity 切換效果
- 7. swiper.js-全屏動畫切換效果實現
- 8. vue頁面切換效果（slide效果切換）
- 9. 圖片切換效果
- 10. ios 卡片切換效果