HTML5動態分頁效果代碼

2024-09-05 12:18:52

字體：大中小

來源：轉載

供稿：網友

一個HTML5動態分頁效果，Flexing pagination arrows 類似網上一些焦點圖切換的形式，左右各有一個大箭頭，分別是前一頁、后一頁，并顯示當前頁數和總頁數，HTML5代碼的加入，讓本效果具有動畫效果，研究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*?((?:"|')?)(.+?)/1/s*?/)/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,"http://$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() {varselectors = {  ':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   id="iwvjtn8m0"   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>

上一篇：Html5 canvas-仿百度貼吧涂鴉畫圖

下一篇：HTML5打飛機網頁游戲