js實現網頁全屏切換（平滑過渡），滑鼠滾動切換

阿新 • • 發佈：2019-01-21

實現效果為頁面平滑過渡全屏切換，點選導航和滑鼠滾動都可以切換。

效果圖：

程式碼：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <meta http-equiv="X-UA-COMPATIBLE" content="IE-edge,chrome=1"><!--告訴ie使用新的渲染方式，防止低版本的ie不能使用css3-->
<meta name="viewport"  
content="width=device-width,initial-scale=1">
    <link href="http://fonts.googleapis.com/css?family=Josefin+Slab:400,700" rel="stylesheet" type="text/css"/>
    <link href="css/css.css" rel="stylesheet"/>
</head>
<body>
<div class="container">
    <div class="nav">
        <input  
type="radio" name="radio-set" checked id="nav1">
        <a href="#panel1">導航1</a>
        <input type="radio" name="radio-set" id="nav2">
        <a href="#panel2">導航2</a>
        <input type="radio" name="radio-set" id="nav3">
        <a href="#panel3">導航 
3</a>
        <input type="radio" name="radio-set" id="nav4">
        <a href="#panel4">導航4</a>
        <input type="radio" name="radio-set" id="nav5">
        <a href="#panel5">導航5</a>
    <div class="scroll">
        <section class="panel" id="panel1">
            <div class="icon" data-icon="a"></div>
            <h1>Serendipity1</h1>
            <p>you are my sunshine</p>
        </section>
        <section class="panel panelColor" id="panel2">
            <div class="icon" data-icon="b"></div>
            <h1>Serendipity2</h1>
            <p>you are my sunshine</p>
        </section>
        <section class="panel" id="panel3">
            <div class="icon" data-icon="c"></div>
            <h1>Serendipity3</h1>
            <p>you are my sunshine</p>
        </section>
        <section class="panel panelColor" id="panel4">
            <div class="icon" data-icon="d"></div>
            <h1>Serendipity4</h1>
            <p>you are my sunshine</p>
        </section>
        <section class="panel" id="panel5">
            <div class="icon" data-icon="e"></div>
            <h1>Serendipity5</h1>
            <p>you are my sunshine</p>
        </section>

    </div>
    </div>
</div>
<script>
    window.onload= function () {
var scroll=document.getElementsByClassName("scroll")[0];//ie不相容，換成id會成功
var panel=document.getElementsByClassName("panel");//ie不相容，換成id會成功var clientH=window.innerHeight;
scroll.style.height=clientH+"px";
for(var i=0;i<panel.length;i++){
panel[i].style.height=clientH+"px";
        }
/*下面是關於滑鼠滾動*/
var inputC=document.getElementsByTagName("input");
var wheel= function (event) {
var delta=0;
if(!event)//for ie
event=window.event;
if(event.wheelDelta){//ie,opera
delta=event.wheelDelta/120;
            }else if(event.detail){
delta=-event.detail/3;
            }
if(delta){
handle(delta,inputC);
            }
if(event.preventDefault)
event.preventDefault();
event.returnValue=false;
        };
if(window.addEventListener){
window.addEventListener('DOMMouseScroll',wheel,false);
        }
window.onmousewheel=wheel;
    };
function handle(delta,arr) {
var num;
for(var i=0;i<arr.length;i++){//得到當前checked元素的下標
if(arr[i].checked){
num=i;
            }
        }
if(delta>0 && num>0){//向上滾動
num--;
arr[num].checked=true;
        }else if(delta<0 && num<4){//向下滾動
num++;
arr[num].checked=true;
        }
    }
</script>
</body>
</html>

CSS程式碼：

*{
    margin:0;
    padding:0;
}
body{
    font-family:Georia,serif;
    background:#ddd;
    font-weight:bold;
    font-size:15px;
    color:#333;
    overflow: hidden;
    -webkit-font-smoothing:antialiased;
}
a{
    text-decoration:none;
    color:#555;
}
.clr{
    width:0;
    height:0;
    overflow: hidden;
    clear:both;
    padding:0;
    margin:0;
}
.nav{
    width:100%;
    position:absolute;
    left:0;
    bottom:0;
    font-family:"Josefin Slab","Myriad pro" ,serif;
}
.nav input,.nav a{
    width:20%;
    height:34px;
    line-height:34px;
    position:fixed;
    bottom:0;
    cursor:pointer;
}
.nav input{
    opacity:0;
    z-index:1000;
}
.nav a{
    z-index:10;
    font-weight:700;
    font-size:16px;
    background:#e23a6e;
    color:#fff;
    text-align:center;
    text-shadow: 1px 1px 1px rgba(151,24,64,0.2);
}
#nav1,#nav1 + a{
    left:0%;
}
#nav2,#nav2 + a{
    left:20%;
}
#nav3,#nav3 + a{
    left:40%;
}
#nav4,#nav4 + a{
    left:60%;
}
#nav5,#nav5 + a{
    left:80%;
}
.nav input:checked + a,
.nav input:checked:hover +a{
    background:#821134;
}
.nav input:checked + a:after{
    content:"";
    width:0;
    height:0;
    overflow:hidden;
    border:20px solid transparent;
    border-bottom-color:#821134;
    position:absolute;
    bottom:100%;
    left:50%;
    margin-left:-20px;
}
.nav input:hover + a{
    background:#AD244f;
}
.scroll,.panel{
    width:100%;
    height:100%;
    position:relative;
    text-align:center;
    padding-top:250px;
}
.scroll{
    left:0;
    top:0;
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transition: all 0.6s ease-in-out;
    -moz-transition: all 0.6s ease-in-out;
    -o-transition: all 0.6s ease-in-out;
    transition: all 0.6s ease-in-out;
    color:#e23a6e;
    font-weight:bold;
}
.panel{
    background:#fff;
    overflow: hidden;
}
/*動畫*/
#nav1:checked ~ .scroll #panel1 h1{
    -webkit-animation: moveDown 0.6s ease-in-out 0.2s backwards;
    -o-animation: moveDown 0.6s ease-in-out 0.2s backwards;
    animation: moveDown 0.6s ease-in-out 0.2s backwards;
}
#nav2:checked ~ .scroll #panel2 h1{
    -webkit-animation: moveDown 0.6s ease-in-out 0.2s backwards;
    -o-animation: moveDown 0.6s ease-in-out 0.2s backwards;
    animation: moveDown 0.6s ease-in-out 0.2s backwards;
}
#nav3:checked ~ .scroll #panel3 h1{
    -webkit-animation: moveDown 0.6s ease-in-out 0.2s backwards;
    -o-animation: moveDown 0.6s ease-in-out 0.2s backwards;
    animation: moveDown 0.6s ease-in-out 0.2s backwards;
}
#nav4:checked ~ .scroll #panel4 h1{
    -webkit-animation: moveDown 0.6s ease-in-out 0.2s backwards;
    -o-animation: moveDown 0.6s ease-in-out 0.2s backwards;
    animation: moveDown 0.6s ease-in-out 0.2s backwards;
}
#nav5:checked ~ .scroll #panel5 h1{
    -webkit-animation: moveDown 0.6s ease-in-out 0.2s backwards;
    -o-animation: moveDown 0.6s ease-in-out 0.2s backwards;
    animation: moveDown 0.6s ease-in-out 0.2s backwards;
}
@keyframes moveDown {
    0%{
        -webkit-transform: translateY(-40px);
        -moz-transform: translateY(-40px);
        -ms-transform: translateY(-40px);
        -o-transform: translateY(-40px);
        transform: translateY(-40px);
        opacity:0;
    }
    100%{
        -webkit-transform: translateY(0);
        -moz-transform: translateY(0);
        -ms-transform: translateY(0);
        -o-transform: translateY(0);
        transform: translateY(0);
        opacity:1;
    }
}
.panel p{
    color:#000;
    margin-top:20px;
}
#nav1:checked ~ .scroll{
     -webkit-transform: translateY(0%);
     -moz-transform: translateY(0%);
     -ms-transform: translateY(0%);
     -o-transform: translateY(0%);
     transform: translateY(0%);
 }
#nav2:checked ~ .scroll{
    -webkit-transform: translateY(-100%);
    -moz-transform: translateY(-100%);
    -ms-transform: translateY(-100%);
    -o-transform: translateY(-100%);
    transform: translateY(-100%);
}
#nav3:checked ~ .scroll{
    -webkit-transform: translateY(-200%);
    -moz-transform: translateY(-200%);
    -ms-transform: translateY(-200%);
    -o-transform: translateY(-200%);
    transform: translateY(-200%);
}
#nav4:checked ~ .scroll{
    -webkit-transform: translateY(-300%);
    -moz-transform: translateY(-300%);
    -ms-transform: translateY(-300%);
    -o-transform: translateY(-300%);
    transform: translateY(-300%);
}
#nav5:checked ~ .scroll{
    -webkit-transform: translateY(-400%);
    -moz-transform: translateY(-400%);
    -ms-transform: translateY(-400%);
    -o-transform: translateY(-400%);
    transform: translateY(-400%);
}
.icon{
    width:200px;
    height:200px;
    background:#fa96b5;
    -webkit-transform:translateY(-50%) rotate(45deg);
    -moz-transform:translateY(-50%) rotate(45deg);
    -ms-transform:translateY(-50%) rotate(45deg);
    -o-transform:translateY(-50%) rotate(45deg);
    transform:translateY(-50%) rotate(45deg);
    position:absolute;
    left:50%;
    top:0;
    margin-left:-100px;
}
[data-icon]:after{
    content:attr(data-icon);
    width:200px;
    height:200px;
    color:#fff;
    font-size:90px;
    text-align:center;
    line-height:200px;
    position:absolute;
    left:18%;
    top:18%;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
}
.panelColor{
    background:#fa96b5;
    color:#fff;
}
.panelColor .icon{
    background:#fff;
    color:#fa96b5;
}
.panelColor .icon:after{
    color:#fa96b5;
}
.scroll .panel h1{
    font-size:60px;
}
@media screen and (max-device-width: 520px){

}

Firefox和chrome測試沒問題，IE就算了吧_(:зゝ∠)_，我恨IE

js實現網頁全屏切換（平滑過渡），滑鼠滾動切換

實現效果為頁面平滑過渡全屏切換，點選導航和滑鼠滾動都可以切換。效果圖：程式碼： <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8">

JS實現網頁全屏與退出全屏

$('#alarm-fullscreen-toggler').on('click', function(e) { var element = document.documentElement; if (!$('body').hasClass("full-screen")) { $('body'

html5 js 實現瀏覽器全屏效果（F11）

最近專案中需要瀏覽器全屏的效果、我查了很多資料、終於、找到了一段程式碼、說是能相容google chrome 15 +, safri5.1+,firfox10+,IE11支援、我只試驗了火狐可以、360、以及IE8是沒有成功滴、下面給大家發下程式碼

Java實現網頁截屏功能（基於phantomJs）

ole ml2 red script phantom 功能 IV 測量 java代碼公司最近有個需求：把用戶第一次的測量身體信息和最近一次測量信息進行對比，並且需要把對比的數據截成圖片可以發給用戶（需要在不打開網頁的情況下實時對網頁進行截圖然後保存到服務器上

js實現視窗全屏示例

前言該 demo 包含全屏事件、退出全屏事件以及螢幕狀態改變的鉤子函式的封裝以下是一個完整示例，只需整體拷貝下來執行即可(注意引入了 jquery) 請在這裡檢視示例☞ fullscreen示例示例 <!DOCTYPE html> <html

js 控制網頁全屏及退出全屏

網上找了好多資料，基本大同小異，實際效果會出現IE不相容的現象（全屏和退出全屏都失效），後來解決了，記錄如下：function requestFullScreen(element) { var

用html5 js實現瀏覽器全屏

專案中需要將後臺瀏覽器的視窗全屏，也就是我們點選一個按鈕要實現按F11全屏的效果。在HTML5中,W3C制定了關於全屏的API，就可以實現全螢幕的效果，也可以讓頁面中的圖片，視訊等全屏目前只有google chrome 15 +, safri5.1+,firfox10+,IE11支援全屏 1

JS控制網頁全屏

在谷歌，IE等瀏覽器中，點選F11按鍵會進入網頁全屏模式，如同看電影的劇場模式，這個在程式碼中可以通過JS來實現，簡單說下在實現這個需求後的個人總結：底層網頁是已經載入完畢的，這時我們需要的全屏其實

JS 控制網頁全屏或退出全屏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w

JS實現瀏覽器全屏和退出全屏

測試環境：【作業系統】： win7 64位【IE】：IE9 【FireFox】： FireFox 29 【Chrome】： Chrome 34 眾所周知，IE是個奇葩的瀏覽器，但是由於使用者量很大，開發者還是不得不為IE考慮

js實現網頁的過濾列印（去掉你不想出現的內容）

首先，我們理解列印的過程，控制頁面列印有很多種方法，這裡我只講最簡單的一種。列印分三步：列印前，列印和列印後。過濾的原理其實很簡單，就是列印前將不該顯示的元素全部display = none 然後列印後，再將頁面修改回來。廢話不多說： ① 我們首先要註冊兩個

原生JS實現的DOM操作筆記（草稿整理）

!= arc move arch div clas java href add 原生JS實現的DOM一系列操作參考：原生JavaScript封裝DOM庫 siblings: 原生JS-查找相鄰的元素-siblings方法的實現 addClass,removeCl

C# 實現Winform全屏後不遮擋工作列，顯示工作列

最近在忙中抽閒，看我的桌面太過死了，不生動，不可愛=。=。。然後默默的想寫一個動態桌面的一個小東西活潑一下。。。隨後拿起來了N久不碰的C#（本人C#渣，不，應該說什麼都渣。。。）結果在winform全屏化的時候，遮擋了下面的工作列；這樣的話體驗性就不

用python3實現網頁版raspberry pi（樹莓派）小車控制

目錄關於樹莓派四驅小車的運動方向控制、攝像頭方向控制已經在前面的兩篇博文中介紹過。有需要的可以參考。本文也是基於上述兩個python檔案就緒的情況進行的。本文主要講述我是如何實現通過網頁實現小車控制的。當前的實現方式比較簡陋，只能支援控制網頁和樹莓派在

JS實現簡單的登入介面（不連線資料庫，把使用者名稱密碼寫死）

今天做專案的時候碰到這個問題，看上去很簡單寫個js函式就行了，實際好像沒那麼好操作，用window.location.href=""行不通呀，得用window.document.f.action="user3.jsp";window.document.f.submi

怎麽樣實現遠程訪問交換機（2層），路由

2給2臺服務器配置IP，掩碼，網關打開交換機，進入全局模式，分別給每臺交換機配置VLAN；設置VTY遠程訪問密碼；（交換機的默認IP ip default-gateway (192.168.1.254(這是根據你自己說設的VLAN決定的），每臺機都有自己的默認IP（所連交換機的VLAN））。怎麽樣實現遠程訪問

收藏 | 雲端計算領域最全常用術語（中英文對照），你知道多少個？

“雲”發展得如此火熱，“雲”術語層出不窮。為了緊跟上科技潮流，做雲端計算領域的知識達人，小編整理了45個雲端計算領域常用的術語（含中英文對照）及其解釋，以供愛學習的你們參考，一起讓科技知識儲備量上升一個level~ 本文內容主要包含： •關於虛擬化 •關於雲端計算技術 •關於雲

非常漂亮的純css3實現多彩側邊導航（非常流暢），附效果演示

<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>CSS3隱藏懸浮網站左側標籤式導航欄程式碼 </title> <style type="text/css"

JS調用命令實現F11全屏

return ima logs key f11全屏嘗試 ges div 500px <body onload =‘autoSetFull()‘> <button id=‘btn‘>全屏按鈕</button> <div

截圖的各種實現（全屏or長截圖）

全屏截圖： /** * 傳入的activity是要截圖的activity */ public static Bitmap getViewBitmap(Activity activity) {

js實現網頁全屏切換（平滑過渡），滑鼠滾動切換

相關推薦