今天看到某網站上的全屏滾動附加背景效果非常炫酷，於是乎有了一個想模仿的沖動，在學習中不斷模仿再加入自己的見解和思路才可以很快的提高，接下來來給大家講解一下我寫的全屏滾動附加背景效果的簡單實用插件，文章最后會把所有的代碼貼出來，有興趣的可以拷貝下來看看效果，大家可以根據文章講解去理解代碼的具體實現，對大家的動手能力會有很大的提高。。。
在網頁文本中一般文檔高度過長都會出現滾動條，但是滾動條的出現占據了一定的位置，使得我們想要的效果大打折扣，正是因為想解決這個問題我才會去寫這個插件。
首先我們來屢一下我的設計思路，講解一下實現原理，上面講到滾動條使得我們的效果大打折扣，這時會有很多人想到去使用別人的插件解決這個問題，可以是可以，但是別人的插件必須要看懂，不然遇到問題就很難解決，同時我們就缺少提升自己能力的機會，所有我今天來講講我是怎么解決的。滾動條不想使用，經過查找資料我找到了js中有對鼠標滾輪進行監聽的事件，於是乎我開始漫長的探索：
//綁定事件
if(document.addEventListener) {
//adding the event listerner for Mozilla
document.addEventListener("DOMMouseScroll ", scrollFunc, false);
$(document).bind("keydown", scrollFunc);
}
//IE/Opera/Chrome
window.onmousewheel = scrollFunc; //document.onmousewheel = scrollFunc
根據上面的綁定方法我們可以將鼠標滾輪滑動事件綁定到頁面上，滾輪每滾動一次都會執行 scrollFunc 方法，在 scrollFunc 方法中去實現頁面的上下切換，那問題來了，如何實現頁面的上下切換呢？？直到我看到了輪播，讓我恍然大悟，只需要根據輪播原理就可以實現頁面上下切換，那輪播的原理是什么呢？其實很簡單，看過輪播插件的人應該都知道了，它只是一個很簡單的絕對定位和相對定位，先定義一個大的盒子box，里面定義多個div用於頁面的切換，每個div的高度都要和盒子box高度相同，然后通過絕對定位中的top去控制要顯示哪一個div，而絕對定位中的top就是由滾輪滾動事件進行控制，這樣基本的實現就可以完成了，但是寫出來之后又會出問題，問題是當滾輪滾動一下下就執行一次滾動事件，可是用戶一滾動滾輪往往會觸發多次滾動事件，使得想要的效果又大打折扣，通過資料查詢終於找到了解決辦法：
/* 使用動畫延時中的回調函數解決連續監聽鼠標滾動事件問題 鼠標滾動事件連續觸發,使用變量控制是否調用相應事件 */ $(".box").animate({ top: -(position - 1) * height }, speed, function() { didscoll = true; });
我們在切換頁面時加入回調函數，回調函數中控制一個變量的值，該值控制是否執行頁面的切換，當頁面正在切換時就不會再執行頁面切換的函數，從而使得多次調用滾輪滑動事件失效，使得可以得到我們想要的效果，下面是具體的代碼,里面有一些背景效果動畫，實現很簡單大家看一下應該就會了：
html：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <link rel="stylesheet" href="index.css" /> </head> <body> <!--模塊--> <div class="box"> <div class="a1 item" ><div style="text-align: center; color: red;"><h1>第一個文本</h1></div></div> <div class="a2 item"><div style="text-align: center; color: red;"><h1>第二個文本</h1></div></div> <div class="a3 item"><div style="text-align: center; color: red;"><h1>第三個文本</h1></div></div> </div> <!--背景--> <div class="bg"> <!--類route1用於控制圓進行統一旋轉，back用於后半部分背景進行統一復制掩藏--> <div class="row1"> <div class="row1-item1 route1"></div> <div class="row1-item2 route1"></div> <div class="row1-item3 route1"></div> <div class="row1-item4 route1"></div> <div class="row1-item5 route1 back"></div> <div class="row1-item6 route1 back"></div> <div class="row1-item7 route1 back"></div> <div class="row1-item8 route1 back"></div> </div> <div class="row2"> <div class="row2-item1 route1"></div> <div class="row2-item2 route1"></div> <div class="row2-item3 route1"></div> <div class="row2-item4 route1 back"></div> <div class="row2-item5 route1 back"></div> <div class="row2-item6 route1 back"></div> </div> <div class="row3"> <div class="row3-item1 route1"></div> <div class="row3-item2 route1"></div> <div class="row3-item3 route1"></div> <div class="row3-item4 route1 back"></div> <div class="row3-item5 route1 back"></div> <div class="row3-item6 route1 back"></div> </div> </div> <div class="right-circle"></div> <script src="jquery-1.11.2.min.js"></script> <script src="index.js"></script> </body> </html>
js:
//仿騰訊頁面效果插件 function tencent(obj) { var height = obj.height; //顯示的高度 var width = obj.width; //顯示的寬度 var position = 1; //默認顯示第一個 var index = obj.index || 7; //總的個數 var didscoll = true; //是否可以執行動畫 var speed = obj.speed || 800; //下滑動畫速度 var bgscorespeed1 = 50; //第一行背景滑動速度 var init1 = 0; // 第一行背景初始滑動距離 var bgscorespeed2 = 30; //第一行背景滑動速度 var init2 = 0; // 第一行背景初始滑動距離 var bgscorespeed3 = 60; //第一行背景滑動速度 var init3 = 0; // 第一行背景初始滑動距離 var bgroute1 = 50; //背景圓旋轉速度 var initroute1 = 0; // 背景初始圓旋轉離角度 var pressedKey = {}; pressedKey[36] = "top"; // home pressedKey[38] = "up"; // upward arrow pressedKey[40] = "down"; // downward arrow pressedKey[33] = "up"; // page up pressedKey[34] = "down"; // page down pressedKey[35] = "bottom"; // end //滑動執行的事件 var scrollFunc = function(e) { if(didscoll) { didscoll = false; e = e || window.event; if(e.wheelDelta) { //IE/Opera/Chrome if(e.wheelDelta == 120) { //向上滾動事件 if(position > 1) { position = position - 1; if(position==1){ gotoone(); } } } else { //向下滾動事件 if(position < index) { position = position + 1; if(position==2){ gototwo(); } } } } else if(e.detail) { //Firefox if(e.detail == -3) { //向上滾動事件<br> if(position > 1) { position = position - 1; if(position==1){ gotoone(); } } } else { //向下滾動事件<br> if(position < index) { position = position + 1; if(position==2){ gototwo(); } } } } else if(e.type == "keydown") { if(pressedKey[e.which]) { e.preventDefault(); if(pressedKey[e.which] == "up") { if(position > 1) { position = position - 1; if(position==1){ gotoone(); } } } else if(pressedKey[e.which] == "down") { if(position < index) { position = position + 1; if(position==2){ gototwo(); } } } } } /* 使用動畫延時中的回調函數解決連續監聽鼠標滾動事件問題 鼠標滾動事件連續觸發,使用變量控制是否調用相應事件 */ $(".box").animate({ top: -(position - 1) * height }, speed, function() { didscoll = true; }); //改變圓點當前位置 circleposition(); } }; //綁定事件 if(document.addEventListener) { //adding the event listerner for Mozilla document.addEventListener("DOMMouseScroll ", scrollFunc, false); $(document).bind("keydown", scrollFunc); } //IE/Opera/Chrome window.onmousewheel = scrollFunc; //document.onmousewheel = scrollFunc //添加右邊圓點 var circle = function() { var divs = ""; for(var i = 0; i < index; i++) { if(i == 0) { divs += "<div class='right-circle-item on'></div>"; } else { divs += "<div class='right-circle-item'></div>"; } } $(".right-circle").html(""); $(".right-circle").append(divs); } circle(); //調用創建右邊右邊圓點 //初始化css var initcss = function() { var rightHeight = $(".right-circle").height(); $(".item").css({ "height": height, "width": width }); $(".box").css({ "height": height * index, "top": -(position - 1) * height }); $(".right-circle").css({ "margin-top": -rightHeight / 2 }); //獲取背景的后半部分 var back = $(".back"); for(var i = 0; i < back.length; i++) { var left = $(back[i]).css("left"); left = parseInt(left.substr(0, left.length - 2)) + width + "px"; $(back[i]).css("left", left); } } initcss(); //調用初始化css //第一行背景滑動和背景圓旋轉 var huadong1 = function() { init1 = init1 + 1; if(init1 == width) { init1 = 0; } $(".row1").css("left", -init1 + "px") initroute1 = initroute1 + 2; if(initroute1 == 360) { initroute1 = 0; } $(".route1").css({ "-ms-transform": "rotate(" + initroute1 + "deg)", "-moz-transform": "rotate(" + initroute1 + "deg)", "-webkit-transform": "rotate(" + initroute1 + "deg)", "-o-transform": "rotate(" + initroute1 + "deg)", "transform": "rotate(" + initroute1 + "deg)" }); } setInterval(huadong1, bgscorespeed1); //第二行背景滑動 var huadong2 = function() { init2 = init2 + 1; if(init2 == width) { init2 = 0; } $(".row2").css("left", -init2 + "px") } setInterval(huadong2, bgscorespeed2); //第三行背景滑動 var huadong3 = function() { init3 = init3 + 1; if(init3 == width) { init3 = 0; } $(".row3").css("left", -init3 + "px") } setInterval(huadong3, bgscorespeed3); //背景划出效果 var gototwo=function(){ $(".bg").css({ "-ms-transform":"translate(-25%)rotate(-45deg)scale(2,2)", "-moz-transform":"translate(-25%)rotate(-45deg)scale(2,2)", "-webkit-transform":"translate(-25%)rotate(-45deg)scale(2,2)", "-o-transform":"translate(-25%)rotate(-45deg)scale(2,2)", "transform":"translate(-25%)rotate(-45deg)scale(2,2)" }); } var gotoone=function(){ $(".bg").css({ "-ms-transform":"translate(0%)rotate(0deg)scale(1,1)", "-moz-transform":"translate(0%)rotate(0deg)scale(1,1)", "-webkit-transform":"translate(0%)rotate(0deg)scale(1,1)", "-o-transform":"translate(0%)rotate(0deg)scale(1,1)", "transform":"translate(0%)rotate(0deg)scale(1,1)" }); } //切換右側圓點當前位置 var circleposition = function() { var circle = $(".right-circle .right-circle-item"); if(circle.hasClass("on")) { circle.removeClass("on"); } $(".right-circle .right-circle-item:nth-child(" + position + ")").addClass('on'); } } $(function() { tencent({ height: $(window).height(), width: $(window).width(), index: 3, //總的個數 }); });
css:
*{ margin: 0; padding: 0; } body { margin: 0; padding: 0; overflow: hidden; } /*大盒子*/ .box { position: absolute; top: 0; z-index: 1; } /*右邊導航圓點*/ .right-circle { position: fixed; right: 10px; top: 50%; z-index: 1000; cursor: pointer; } .right-circle .right-circle-item { width: 10px; height: 10px; margin: 10px 0px; background-color: #EEEEEE; border-radius: 50%; transition: all 0.7s; } .right-circle .on { background-color: #FF7800; } /*背景*/ .bg { position: absolute; height: 1000px; width: 2600px; top: 50%; left: 0; margin-top: -500px; z-index: -1; transition: all 1.5s; } /*第一行背景圓點*/ .row1 { position: absolute; top: 50%; width: 2600px; left: 0; margin-top: -200px; } /*第一行背景圖*/ .row1 .row1-item1 { position: absolute; top:45px; left:114px; width: 70px; height: 70px; border-radius: 50%; background: linear-gradient(to bottom, #ffffff, #dedede); } .row1 .row1-item2 { position: absolute; top:0; left:353px; width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(to left, #ffffff, #dedede); } .row1 .row1-item3 { position: absolute; top:64px; left:983px; width: 90px; height: 90px; border-radius: 50%; background: linear-gradient(to right, #ffffff, #dedede); } .row1 .row1-item4 { position: absolute; top:35px; left:660px; width: 50px; height: 50px; border-radius: 50%; background: linear-gradient(to top, #ffffff, #dedede); } .row1 .row1-item5 { position: absolute; top:45px; left:114px; width: 70px; height: 70px; border-radius: 50%; background: linear-gradient(to bottom, #ffffff, #dedede); } .row1 .row1-item6 { position: absolute; top:0; left:353px; width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(to left, #ffffff, #dedede); } .row1 .row1-item7 { position: absolute; top:64px; left:983px; width: 90px; height: 90px; border-radius: 50%; background: linear-gradient(to right, #ffffff, #dedede); } .row1 .row1-item8 { position: absolute; top:35px; left:660px; width: 50px; height: 50px; border-radius: 50%; background: linear-gradient(to top, #ffffff, #dedede); } /*第二行背景圖 最大 600*/ .row2{ position: absolute; top: 50%; width: 2600px; left: 0; margin-top: -100px; } .row2 .row2-item1 { position: absolute; top:-13px; left:360px; width: 150px; height: 150px; border-radius: 50%; background: linear-gradient(to top, #ffffff, #dedede); } .row2 .row2-item2 { position: absolute; top:115px; left:260px; width: 64px; height: 64px; border-radius: 50%; background: linear-gradient(to right, #ffffff, #dedede); } .row2 .row2-item3 { position: absolute; top:99px; left:757px; width: 90px; height: 90px; border-radius: 50%; background: linear-gradient(to left, #ffffff, #dedede); } .row2 .row2-item4 { position: absolute; top:-13px; left:360px; width: 150px; height: 150px; border-radius: 50%; background: linear-gradient(to top, #ffffff, #dedede); } .row2 .row2-item5 { position: absolute; top:115px; left:260px; width: 64px; height: 64px; border-radius: 50%; background: linear-gradient(to right, #ffffff, #dedede); } .row2 .row2-item6 { position: absolute; top:99px; left:757px; width: 90px; height: 90px; border-radius: 50%; background: linear-gradient(to left, #ffffff, #dedede); } /*第三行背景圖 最大 600*/ .row3{ position: absolute; top: 50%; width: 2600px; left: 0; margin-top: 0px; } .row3 .row3-item1{ position: absolute; top:29px; left:789px; width: 250px; height: 250px; border-radius: 50%; background: linear-gradient(to right, #ffffff, #dedede); } .row3 .row3-item2{ position: absolute; top:50px; left:335px; width: 150px; height: 150px; border-radius: 50%; background: linear-gradient(to right, #ffffff, #dedede); } .row3 .row3-item3{ position: absolute; top:85px; left:633px; width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(to right, #ffffff, #dedede); } .row3 .row3-item4{ position: absolute; top:29px; left:789px; width: 250px; height: 250px; border-radius: 50%; background: linear-gradient(to right, #ffffff, #dedede); } .row3 .row3-item5{ position: absolute; top:50px; left:335px; width: 150px; height: 150px; border-radius: 50%; background: linear-gradient(to right, #ffffff, #dedede); } .row3 .row3-item6{ position: absolute; top:85px; left:633px; width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(to right, #ffffff, #dedede); }