HTML5动态分页效果代码

46 阅读 0 评论 31 点赞
我是靠谱客的博主温婉网络，最近开发中收集的这篇文章主要介绍HTML5动态分页效果代码，觉得挺不错的，现在分享给大家，希望可以做个参考。
概述

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5分页</title>
<style>body {
background: #33ab83;
}
button {
-webkit-appearance: none;
background: transparent;
border: 0;
}
.paginate {
position: relative;
margin: 10px;
width: 50px;
height: 50px;
cursor: pointer;
transform: translate3d(0, 0, 0);
position: absolute;
top: 50%;
margin-top: -20px;
-webkit-filter: drop-shadow(0 2px 0px rgba(0, 0, 0, 0.2));
}
.paginate i {
position: absolute;
top: 40%;
left: 0;
width: 50px;
height: 5px;
border-radius: 2.5px;
background: #fff;
transition: all 0.15s ease;
}
.paginate.left {
right: 58%;
}
.paginate.left i {
transform-origin: 0% 50%;
}
.paginate.left i:first-child {
transform: translate(0, -1px) rotate(40deg);
}
.paginate.left i:last-child {
transform: translate(0, 1px) rotate(-40deg);
}
.paginate.left:hover i:first-child {
transform: translate(0, -1px) rotate(30deg);
}
.paginate.left:hover i:last-child {
transform: translate(0, 1px) rotate(-30deg);
}
.paginate.left:active i:first-child {
transform: translate(1px, -1px) rotate(25deg);
}
.paginate.left:active i:last-child {
transform: translate(1px, 1px) rotate(-25deg);
}
.paginate.left[data-state=disabled] i:first-child {
transform: translate(-5px, 0) rotate(0deg);
}
.paginate.left[data-state=disabled] i:last-child {
transform: translate(-5px, 0) rotate(0deg);
}
.paginate.left[data-state=disabled]:hover i:first-child {
transform: translate(-5px, 0) rotate(0deg);
}
.paginate.left[data-state=disabled]:hover i:last-child {
transform: translate(-5px, 0) rotate(0deg);
}
.paginate.right {
left: 58%;
}
.paginate.right i {
transform-origin: 100% 50%;
}
.paginate.right i:first-child {
transform: translate(0, 1px) rotate(40deg);
}
.paginate.right i:last-child {
transform: translate(0, -1px) rotate(-40deg);
}
.paginate.right:hover i:first-child {
transform: translate(0, 1px) rotate(30deg);
}
.paginate.right:hover i:last-child {
transform: translate(0, -1px) rotate(-30deg);
}
.paginate.right:active i:first-child {
transform: translate(1px, 1px) rotate(25deg);
}
.paginate.right:active i:last-child {
transform: translate(1px, -1px) rotate(-25deg);
}
.paginate.right[data-state=disabled] i:first-child {
transform: translate(5px, 0) rotate(0deg);
}
.paginate.right[data-state=disabled] i:last-child {
transform: translate(5px, 0) rotate(0deg);
}
.paginate.right[data-state=disabled]:hover i:first-child {
transform: translate(5px, 0) rotate(0deg);
}
.paginate.right[data-state=disabled]:hover i:last-child {
transform: translate(5px, 0) rotate(0deg);
}
.paginate[data-state=disabled] {
opacity: 0.3;
cursor: default;
}
.counter {
text-align: center;
position: absolute;
width: 100%;
top: 50%;
margin-top: -15px;
font-size: 30px;
font-family: Helvetica, sans-serif;
text-shadow: 0px 2px 0px rgba(0, 0, 0, 0.2);
color: #fff;
}</style>
<script>
(function(){
if(!window.addEventListener) {
return;
}
var self = window.StyleFix = {
link: function(link) {
try {
if(link.rel !== 'stylesheet' || link.hasAttribute('data-noprefix')) {
return;
}
}
catch(e) {
return;
}
var url = link.href || link.getAttribute('data-href'),
base = url.replace(/[^/]+$/, ''),
base_scheme = (/^[a-z]{3,10}:/.exec(base) || [''])[0],
base_domain = (/^[a-z]{3,10}://[^/]+/.exec(base) || [''])[0],
base_query = /^([^?]*)??/.exec(url)[1],
parent = link.parentNode,
xhr = new XMLHttpRequest(),
process;
xhr.onreadystatechange = function() {
if(xhr.readyState === 4) {
process();
}
};
process = function() {
var css = xhr.responseText;
if(css && link.parentNode && (!xhr.status || xhr.status < 400 || xhr.status > 600)) {
css = self.fix(css, true, link);
if(base) {
css = css.replace(/url(s*?((?:"|')?)(.+?)1s*?)/gi, function($0, quote, url) {
if(/^([a-z]{3,10}:|#)/i.test(url)) { // Absolute & or hash-relative
return $0;
}
else if(/^///.test(url)) { // Scheme-relative
return 'url("' + base_scheme + url + '")';
}
else if(/^//.test(url)) { // Domain-relative
return 'url("' + base_domain + url + '")';
}
else if(/^?/.test(url)) { // Query-relative
return 'url("' + base_query + url + '")';
}
else {
return 'url("' + base + url + '")';
}
});
var escaped_base = base.replace(/([\^$*+[]?{}.=!:(|)])/g,"\$1");
css = css.replace(RegExp('\b(behavior:\s*?url\('?"?)' + escaped_base, 'gi'), '$1');
}
var style = document.createElement('style');
style.textContent = css;
style.media = link.media;
style.disabled = link.disabled;
style.setAttribute('data-href', link.getAttribute('href'));
parent.insertBefore(style, link);
parent.removeChild(link);
style.media = link.media; // Duplicate is intentional. See issue #31

}
};
try {
xhr.open('GET', url);
xhr.send(null);
} catch (e) {
if (typeof XDomainRequest != "undefined") {
xhr = new XDomainRequest();
xhr.onerror = xhr.onprogress = function() {};
xhr.onload = process;
xhr.open("GET", url);
xhr.send(null);
}
}
link.setAttribute('data-inprogress', '');
},
styleElement: function(style) {
if (style.hasAttribute('data-noprefix')) {
return;
}
var disabled = style.disabled;
style.textContent = self.fix(style.textContent, true, style);
style.disabled = disabled;
},
styleAttribute: function(element) {
var css = element.getAttribute('style');
css = self.fix(css, false, element);
element.setAttribute('style', css);
},
process: function() {
$('link[rel="stylesheet"]:not([data-inprogress])').forEach(StyleFix.link);
$('style').forEach(StyleFix.styleElement);
$('[style]').forEach(StyleFix.styleAttribute);
},
register: function(fixer, index) {
(self.fixers = self.fixers || [])
.splice(index === undefined? self.fixers.length : index, 0, fixer);
},
fix: function(css, raw, element) {
for(var i=0; i<self.fixers.length; i++) {
css = self.fixers[i](css, raw, element) || css;
}
return css;
},
camelCase: function(str) {
return str.replace(/-([a-z])/g, function($0, $1) { return $1.toUpperCase(); }).replace('-','');
},
deCamelCase: function(str) {
return str.replace(/[A-Z]/g, function($0) { return '-' + $0.toLowerCase() });
}
};
(function(){
setTimeout(function(){
$('link[rel="stylesheet"]').forEach(StyleFix.link);
}, 10);
document.addEventListener('DOMContentLoaded', StyleFix.process, false);
})();
function $(expr, con) {
return [].slice.call((con || document).querySelectorAll(expr));
}
})();
(function(root){
if(!window.StyleFix || !window.getComputedStyle) {
return;
}
function fix(what, before, after, replacement, css) {
what = self[what];
if(what.length) {
var regex = RegExp(before + '(' + what.join('|') + ')' + after, 'gi');
css = css.replace(regex, replacement);
}
return css;
}
var self = window.PrefixFree = {
prefixCSS: function(css, raw, element) {
var prefix = self.prefix;
if(self.functions.indexOf('linear-gradient') > -1) {
css = css.replace(/(s|:|,)(repeating-)?linear-gradient(s*(-?d*.?d*)deg/ig, function ($0, delim, repeating, deg) {
return delim + (repeating || '') + 'linear-gradient(' + (90-deg) + 'deg';
});
}
css = fix('functions', '(\s|:|,)', '\s*\(', '$1' + prefix + '$2(', css);
css = fix('keywords', '(\s|:)', '(\s|;|\}|$)', '$1' + prefix + '$2$3', css);
css = fix('properties', '(^|\{|\s|;)', '\s*:', '$1' + prefix + '$2:', css);
if (self.properties.length) {
var regex = RegExp('\b(' + self.properties.join('|') + ')(?!:)', 'gi');
css = fix('valueProperties', '\b', ':(.+?);', function($0) {
return $0.replace(regex, prefix + "$1")
}, css);
}
if(raw) {
css = fix('selectors', '', '\b', self.prefixSelector, css);
css = fix('atrules', '@', '\b', '@' + prefix + '$1', css);
}
css = css.replace(RegExp('-' + prefix, 'g'), '-');
css = css.replace(/-*-(?=[a-z]+)/gi, self.prefix);
return css;
},
property: function(property) {
return (self.properties.indexOf(property)? self.prefix : '') + property;
},
value: function(value, property) {
value = fix('functions', '(^|\s|,)', '\s*\(', '$1' + self.prefix + '$2(', value);
value = fix('keywords', '(^|\s)', '(\s|$)', '$1' + self.prefix + '$2$3', value);
return value;
},
prefixSelector: function(selector) {
return selector.replace(/^:{1,2}/, function($0) { return $0 + self.prefix })
},
prefixProperty: function(property, camelCase) {
var prefixed = self.prefix + property;
return camelCase? StyleFix.camelCase(prefixed) : prefixed;
}
};
(function() {
var prefixes = {},
properties = [],
shorthands = {},
style = getComputedStyle(document.documentElement, null),
dummy = document.createElement('div').style;
var iterate = function(property) {
if(property.charAt(0) === '-') {
properties.push(property);
var parts = property.split('-'),
prefix = parts[1];
prefixes[prefix] = ++prefixes[prefix] || 1;
while(parts.length > 3) {
parts.pop();
var shorthand = parts.join('-');
if(supported(shorthand) && properties.indexOf(shorthand) === -1) {
properties.push(shorthand);
}
}
}
},
supported = function(property) {
return StyleFix.camelCase(property) in dummy;
}
if(style.length > 0) {
for(var i=0; i<style.length; i++) {
iterate(style[i])
}
}
else {
for(var property in style) {
iterate(StyleFix.deCamelCase(property));
}
}
var highest = {uses:0};
for(var prefix in prefixes) {
var uses = prefixes[prefix];
if(highest.uses < uses) {
highest = {prefix: prefix, uses: uses};
}
}
self.prefix = '-' + highest.prefix + '-';
self.Prefix = StyleFix.camelCase(self.prefix);
self.properties = [];
for(var i=0; i<properties.length; i++) {
var property = properties[i];
if(property.indexOf(self.prefix) === 0) { // we might have multiple prefixes, like Opera
var unprefixed = property.slice(self.prefix.length);
if(!supported(unprefixed)) {
self.properties.push(unprefixed);
}
}
}
// IE fix
if(self.Prefix == 'Ms'
&& !('transform' in dummy)
&& !('MsTransform' in dummy)
&& ('msTransform' in dummy)) {
self.properties.push('transform', 'transform-origin');
}
self.properties.sort();
})();
(function() {
var functions = {
'linear-gradient': {
property: 'backgroundImage',
params: 'red, teal'
},
'calc': {
property: 'width',
params: '1px + 5%'
},
'element': {
property: 'backgroundImage',
params: '#foo'
},
'cross-fade': {
property: 'backgroundImage',
params: 'url(a.png), url(b.png), 50%'
}
};
functions['repeating-linear-gradient'] =
functions['repeating-radial-gradient'] =
functions['radial-gradient'] =
functions['linear-gradient'];
var keywords = {
'initial': 'color',
'zoom-in': 'cursor',
'zoom-out': 'cursor',
'box': 'display',
'flexbox': 'display',
'inline-flexbox': 'display',
'flex': 'display',
'inline-flex': 'display',
'grid': 'display',
'inline-grid': 'display',
'min-content': 'width'
};
self.functions = [];
self.keywords = [];
var style = document.createElement('div').style;
function supported(value, property) {
style[property] = '';
style[property] = value;
return !!style[property];
}
for (var func in functions) {
var test = functions[func],
property = test.property,
value = func + '(' + test.params + ')';
if (!supported(value, property)
&& supported(self.prefix + value, property)) {
self.functions.push(func);
}
}
for (var keyword in keywords) {
var property = keywords[keyword];
if (!supported(keyword, property)
&& supported(self.prefix + keyword, property)) {
self.keywords.push(keyword);
}
}
})();
(function() {
var
selectors = {
':read-only': null,
':read-write': null,
':any-link': null,
'::selection': null
},
atrules = {
'keyframes': 'name',
'viewport': null,
'document': 'regexp(".")'
};
self.selectors = [];
self.atrules = [];
var style = root.appendChild(document.createElement('style'));
function supported(selector) {
style.textContent = selector + '{}';
// Safari 4 has issues with style.innerHTML
return !!style.sheet.cssRules.length;
}
for(var selector in selectors) {
var test = selector + (selectors[selector]? '(' + selectors[selector] + ')' : '');
if(!supported(test) && supported(self.prefixSelector(test))) {
self.selectors.push(selector);
}
}
for(var atrule in atrules) {
var test = atrule + ' ' + (atrules[atrule] || '');
if(!supported('@' + test) && supported('@' + self.prefix + test)) {
self.atrules.push(atrule);
}
}
root.removeChild(style);
})();
self.valueProperties = [
'transition',
'transition-property'
]
root.className += ' ' + self.prefix;
StyleFix.register(self.prefixCSS);
})(document.documentElement);</script>
</head>
<body>
<div class="counter"></div>
<button class="paginate left"><i></i><i></i></button>
<button class="paginate right"><i></i><i></i></button>
<script>
var pr = document.querySelector( '.paginate.left' );
var pl = document.querySelector( '.paginate.right' );
pr.onclick = slide.bind( this, -1 );
pl.onclick = slide.bind( this, 1 );
var index = 0, total = 150;
function slide(offset) {
index = Math.min( Math.max( index + offset, 0 ), total - 1 );
document.querySelector( '.counter' ).innerHTML = ( index + 1 ) + ' / ' + total;
pr.setAttribute( 'data-state', index === 0 ? 'disabled' : '' );
pl.setAttribute( 'data-state', index === total - 1 ? 'disabled' : '' );
}
slide(0);
</script>
</body>
</html>