今天看到某网站上的全屏滚动附加背景效果非常炫酷，于是乎有了一个想模仿的冲动，在学习中不断模仿再加入自己的见解和思路才可以很快的提高，接下来来给大家讲解一下我写的全屏滚动附加背景效果的简单实用插件，文章最后会把所有的代码贴出来，有兴趣的可以拷贝下来看看效果，大家可以根据文章讲解去理解代码的具体实现，对大家的动手能力会有很大的提高。。。
在网页文本中一般文档高度过长都会出现滚动条，但是滚动条的出现占据了一定的位置，使得我们想要的效果大打折扣，正是因为想解决这个问题我才会去写这个插件。
首先我们来屡一下我的设计思路，讲解一下实现原理，上面讲到滚动条使得我们的效果大打折扣，这时会有很多人想到去使用别人的插件解决这个问题，可以是可以，但是别人的插件必须要看懂，不然遇到问题就很难解决，同时我们就缺少提升自己能力的机会，所有我今天来讲讲我是怎么解决的。滚动条不想使用，经过查找资料我找到了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(), $(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); }