使用js制作全屏滚动

常州web前端开发招聘|腾讯前端开发招聘|前端与移动开发基础班

代码片段 1

<!Doctype html>

<html>

<head>

<title>JavaScript 全屏滚动</title>

<!–鼠标滚轮mousewheel插件，我直接将插件代码直接粘这里了，要不没地方单独放这个文件–>

!function (a) { “function” == typeof define && define.amd ? define([“jquery”], a) : “object” == typeof exports ? module.exports = a : a(jquery) }(function (a) { function b(b) { var g = b || window.event, h = i.call(arguments, 1), j = 0, l = 0, m = 0, n = 0, o = 0, p = 0; if (b = a.event.fix(g), b.type = “mousewheel”, “detail” in g && (m = -1 * g.detail), “wheelDelta” in g && (m = g.wheelDelta), “wheelDeltaY” in g && (m = g.wheelDeltaY), “wheelDeltaX” in g && (l = -1 * g.wheelDeltaX), “axis” in g && g.axis === g.HORIZONTAL_AXIS && (l = -1 * m, m = 0), j = 0 === m ? l : m, “deltaY” in g && (m = -1 * g.deltaY, j = m), “deltaX” in g && (l = g.deltaX, 0 === m && (j = -1 * l)), 0 !== m || 0 !== l) { if (1 === g.deltaMode) { var q = a.data(this, “mousewheel-line-height”); j *= q, m *= q, l *= q } else if (2 === g.deltaMode) { var r = a.data(this, “mousewheel-page-height”); j *= r, m *= r, l *= r } if (n = Math.max(Math.abs(m), Math.abs(l)), (!f || f > n) && (f = n, d(g, n) && (f /= 40)), d(g, n) && (j /= 40, l /= 40, m /= 40), j = Math[j >= 1 ? “floor” : “ceil”](j / f), l = Math[l >= 1 ? “floor” : “ceil”](l / f), m = Math[m >= 1 ? “floor” : “ceil”](m / f), k.settings.normalizeOffset && this.getBoundingClientRect) { var s = this.getBoundingClientRect(); o = b.clientX – s.left, p = b.clientY – s.top } return b.deltaX = l, b.deltaY = m, b.deltaFactor = f, b.offsetX = o, b.offsetY = p, b.deltaMode = 0, h.unshift(b, j, l, m), e && clearTimeout(e), e = setTimeout(c, 200), (a.event.dispatch || a.event.handle).apply(this, h) } } function c() { f = null } function d(a, b) { return k.settings.adjustOldDeltas && “mousewheel” === a.type && b % 120 === 0 } var e, f, g = [“wheel”, “mousewheel”, “DOMMouseScroll”, “MozMousePixelScroll”], h = “onwheel” in document || document.documentMode >= 9 ? [“wheel”] : [“mousewheel”, “DomMouseScroll”, “MozMousePixelScroll”], i = Array.prototype.slice; if (a.event.fixHooks) for (var j = g.length; j;)a.event.fixHooks[g[–j]] = a.event.mouseHooks; var k = a.event.special.mousewheel = { version: “3.1.12”, setup: function () { if (this.addEventListener) for (var c = h.length; c;)this.addEventListener(h[–c], b, !1); else this.onmousewheel = b; a.data(this, “mousewheel-line-height”, k.getLineHeight(this)), a.data(this, “mousewheel-page-height”, k.getPageHeight(this)) }, teardown: function () { if (this.removeEventListener) for (var c = h.length; c;)this.removeEventListener(h[–c], b, !1); else this.onmousewheel = null; a.removeData(this, “mousewheel-line-height”), a.removeData(this, “mousewheel-page-height”) }, getLineHeight: function (b) { var c = a(b), d = c[“offsetParent” in a.fn ? “offsetParent” : “parent”](); return d.length || (d = a(“body”)), parseInt(d.css(“fontSize”), 10) || parseInt(c.css(“fontSize”), 10) || 16 }, getPageHeight: function (b) { return a(b).height() }, settings: { adjustOldDeltas: !0, normalizeOffset: !0 } }; a.fn.extend({ mousewheel: function (a) { return a ? this.bind(“mousewheel”, a) : this.trigger(“mousewheel”) }, unmousewheel: function (a) { return this.unbind(“mousewheel”, a) } }) });

</script>

<!–mousewheel插件 end–>

/*===reset===*/

body {

color: #222;

-webkit-text-size-adjust: none;

}

body,

h1,

h2,

h3,

h4,

h5,

h6,

hr,

blockquote,

dl,

dt,

dd,

ul,

ol,

li,

pre,

form,

fieldset,

legend,

button,

input,

textarea,

th,

td,

iframe {

margin: 0;

padding: 0;

}

h1,

h2,

h3,

h4,

h5,

h6 {

font-size: 100%;

}

body,

button,

input,

select,

textarea {

font-family: Tahoma, Arial, Roboto, ”Droid Sans”, ”Helvetica Neue”, ”Droid Sans Fallback”, ”Heiti SC”, sans-self;

font-size: 62.5%;

line-height: 1.5;

}

h1,

h2,

h3,

h4,

h5,

h6 {

font-size: 100%;

font-weight: normal;

}

fieldset,

img {

border: 0;

display: inline-block;

}

address,

caption,

cite,

dfn,

em,

th,

var {

font-style: normal;

font-weight: normal;

}

article,

aside,

details,

figcaption,

figure,

footer,

header,

hgroup,

menu,

nav,

section,

summary,

time,

mark,

audio,

video {

display: block;

margin: 0;

padding: 0;

}

/* HTML5 */

code,

kbd,

pre,

samp {

font-family: courier new, courier, monospace

}

ol,

ul {

list-style: none;

}

a {

text-decoration: none;

color: #222;

}

a:hover {

color: #000;

text-decoration: none;

zoom: 1

}

a:active {

color: #666;

}

sup {

vertical-align: text-top;

}

sub {

vertical-align: text-bottom;

}

input,

select,

button {

vertical-align: baseline;

*vertical-align: middle;

font-family: tahoma, b8bf53, arial;

font-size: 100%;

}

input[type=checkbox],

input[type=radio] {

vertical-align: middle;

margin: 0 5px;

}

input[type=”text”],

input[type=”password”],

textarea {

outline-style: none;

-webkit-appearance: none;

}

textarea {

resize: none;

}

textarea {

overflow: auto;

font: 100% tahoma, b8bf53, arial;

}

table {

border-collapse: collapse;

border-spacing: 0;

}

/*===reset end===*/

html,

body {

width: 100%;

height: 100%;

overflow: hidden;

}

.section-wrap {

width: 100%;

height: 100%;

overflow: visible;

transition: transform 1s cubic-bezier(0.86, 0, 0.03, 1);

-webkit-transition: -webkit-transform 1s cubic-bezier(0.86, 0, 0.03, 1);

-ms-transition: -ms-transform 1s cubic-bezier(0.86, 0, 0.03, 1);

-moz-transition: -moz-transform 1s cubic-bezier(0.86, 0, 0.03, 1);

-o-transition: -o-transform 1s cubic-bezier(0.86, 0, 0.03, 1);

}

.section-wrap .section {

position: relative;

width: 100%;

height: 100%;

background-position: center center;

background-repeat: no-repeat;

}

.section-wrap .section .title {

padding: 150px 0 0 50px;

color: #fff;

font-size: 40px;

text-align: center;

font-family: “Microsoft YaHei”;

}

.section-wrap .section .title p {

opacity: 0

}

.section-wrap .section .title .p-2 {

color: #ccc;

font-size: 20px;

}

.section-wrap .section .title.active .p-1 {

opacity: 1;

transform: translateY(-25px);

-webkit-transform: translateY(-25px);

-ms-transform: translateY(-25px);

-moz-transform: translateY(-25px);

-o-transform: translateY(-25px);

transition: all 2s cubic-bezier(0.86, 0, 0.8, 1);

-webkit-transition: all 2s cubic-bezier(0.86, 0, 0.8, 1);

-ms-transition: all 2s cubic-bezier(0.86, 0, 0.8, 1);

-moz-transition: all 2s cubic-bezier(0.86, 0, 0.8, 1);

-o-transition: all 2s cubic-bezier(0.86, 0, 0.8, 1);

}

.section-wrap .section .title.active .p-2 {

opacity: 1;

transform: translateY(-25px);

-webkit-transform: translateY(-25px);

-ms-transform: translateY(-25px);

-moz-transform: translateY(-25px);

-o-transform: translateY(-25px);

transition: all 2s cubic-bezier(0.5, 0, 0.9, 1);

-webkit-transition: all 2s cubic-bezier(0.5, 0, 0.9, 1);

-ms-transition: all 2s cubic-bezier(0.5, 0, 0.9, 1);

-moz-transition: all 2s cubic-bezier(0.5, 0, 0.9, 1);

-o-transition: all 2s cubic-bezier(0.5, 0, 0.9, 1);

}

.section-wrap .section-1 {

background-color: #0066a5

}

.section-wrap .section-2 {

background-color: #065E69

}

.section-wrap .section-3 {

background-color: #0D2C7C

}

.section-wrap .section-4 {

background-color: #0C6242

}

.section-wrap .section-5 {

background-color: #413004

}

.put-section-0 {

transform: translateY(0);

-webkit-transform: translateY(0);

-ms-transform: translateY(0);

-moz-transform: translateY(0);

-o-transform: translateY(0);

}

.put-section-1 {

transform: translateY(-100%);

-webkit-transform: translateY(-100%);

-ms-transform: translateY(-100%);

-moz-transform: translateY(-100%);

-o-transform: translateY(-100%);

}

.put-section-2 {

transform: translateY(-200%);

-webkit-transform: translateY(-200%);

-ms-transform: translateY(-200%);

-moz-transform: translateY(-200%);

-o-transform: translateY(-200%);

}

.put-section-3 {

transform: translateY(-300%);

-webkit-transform: translateY(-300%);

-ms-transform: translateY(-300%);

-moz-transform: translateY(-300%);

-o-transform: translateY(-300%);

}

.put-section-4 {

transform: translateY(-400%);

-webkit-transform: translateY(-400%);

-ms-transform: translateY(-400%);

-moz-transform: translateY(-400%);

-o-transform: translateY(-400%);

}

.section-btn {

position: fixed;

right: 40px;

top: 50%;

width: 14px;

}

.section-btn li {

margin-bottom: 15px;

background: #069052;

text-align: center;

color: #fff;

cursor: pointer;

}

.section-btn li.cur {

background: #0CEA87

}

.go-btn {

opacity: 1;

webkit-animation: go-btn 3s cubic-bezier(0.5, 0, 0.1, 1)infinite;

-webkit-animation: go-btn 3s cubic-bezier(0.5, 0, 0.1, 1)infinite;

-ms-animation: go-btn 3s cubic-bezier(0.5, 0, 0.1, 1)infinite;

-moz-animation: go-btn 3s cubic-bezier(0.5, 0, 0.1, 1)infinite;

-o-animation: go-btn 3s cubic-bezier(0.5, 0, 0.1, 1)infinite;

transform: rotate(-90deg);

-webkit-transform: rotate(-90deg);

-ms-transform: rotate(-90deg);

-moz-transform: rotate(-90deg);

-o-transform: rotate(-90deg);

position: absolute;

bottom: 10px;

left: 48%;

width: 60px;

height: 60px;

border-radius: 100%;

line-height: 60px;

text-align: center;

font-size: 20px;

color: #fff;

border: 1px solid #fff;

cursor: pointer;

overflow: hidden

}

.go-btn:hover {

animation-play-state: paused;

-webkit-animation-play-state: paused;

-ms-animation-play-state: paused;

-moz-animation-play-state: paused;

-o-animation-play-state: paused;

}

@keyframes go-btn {

%0,

%100 {

bottom: 10px;

opacity: 1;

}

50% {

bottom: 50px;

opacity: .5

}

@-webkit-keyframes go-btn {

%0,

%100 {

bottom: 10px;

opacity: 1;

}

50% {

bottom: 50px;

opacity: .5

}

@-ms-keyframes go-btn {

%0,

%100 {

bottom: 10px;

opacity: 1;

}

50% {

bottom: 50px;

opacity: .5

}

@-moz-keyframes go-btn {

%0,

%100 {

bottom: 10px;

opacity: 1;

}

50% {

bottom: 50px;

opacity: .5

}

@-o-keyframes go-btn {

%0,

%100 {

bottom: 10px;

opacity: 1;

}

50% {

bottom: 50px;

opacity: .5

}

</style>

<!–[if lte IE 8]>

html,body{width:100%; height:100%; overflow:scroll}

.section-btn{display:none;}

</style>

<![endif]–>

</head>

<body>

<p class=”p-1″>点右边的按钮,底部的按钮，滚动鼠标滚轮,按下键盘方向上下键查看效果</p>

</div>

<p class=”p-1″>无论我们距离有多远，我都永远by your side!</p>

<p class=”p-2″>I am just kidding!</p>

</div>

<p class=”p-1″>I will never say never</p>

<p class=”p-2″>From justin bieber</p>

</div>

<p class=”p-1″>you are just like the angle</p>

<p class=”p-2″>I tell you seriously</p>

</div>

<p class=”p-1″>life sucks sometime somehow</p>

</div>

</ul>

</body>

$(function () {

var btn_index = 0;

/*右边按钮点击*/

$(‘.section-btn li’).each(function (index) {

$(this).click(function () {

btn_index = index;

scroller();

})

});

/*翻页按钮点击*/

$(‘.go-btn’).one(‘click’, btn_go);

function btn_go() {

go_up(); scroller();

setTimeout(function () { $(‘.go-btn’).one(‘click’, btn_go) }, 1000)

};

/*响应鼠标*/

$(‘.section-wrap’).one(‘mousewheel’, mouse_);

function mouse_(event) {

if (event.deltaY < 0) { go_up() }

else { go_down() }

scroller();

setTimeout(function () { $(‘.section-wrap’).one(‘mousewheel’, mouse_) }, 1000)

};

/*当前页面赋值*/

function go_up() { btn_index++; if (btn_index == $(‘.section-btn li’).length) { btn_index = $(‘.section-btn li’).length – 1 }; }

function go_down() { btn_index–; if (btn_index < 0) { btn_index = 0 }; }

/*页面滑动*/

function scroller() {

$(‘.section-btn li’).eq(btn_index).addClass(‘cur’).siblings().removeClass(‘cur’);

$(‘.section-wrap’).attr(“class”, “section-wrap”).addClass(function () {

return “put-section-” + btn_index;

}).find(‘.section’).eq(btn_index).find(‘.title’).addClass(‘active’);

};

/*响应键盘上下键*/

$(document).one(‘keydown’, keyaction);

function keyaction(event) {

var e = event || window.event;

var key = e.keyCode || e.which || e.charCode;

switch (key) {

case 38: go_down(); scroller();

break;

case 40: go_up(); scroller();

break;

};

setTimeout(function () { $(document).one(‘keydown’, keyaction) }, 1000)

}

})

</script>

</html>

宁夏前端开发招聘|太原前端开发招聘信息|web前端开发招聘

使用js制作全屏滚动

前端开发者

相关推荐

评论抢沙发

评论前必须登录！

最新评论

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

最新评论

评论抢沙发