HTML5动态分页效果代码

最新推荐文章于 2023-08-24 01:10:22 发布
最新推荐文章于 2023-08-24 01:10:22 发布
阅读量1k 收藏 3
点赞数
文章标签： php 
<!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,"\\$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>

 

weixin_33919950
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
html动态分页代码实例,Bootstrap jquery.twbsPagination.js动态页码分页实例代码
weixin_42347629的博客
06-09 599
Bootstrap风格的分页控件自适应的：1.风格样式：2.首先引入js文件jQuery.twbsPagination.js3.html页面4.初始化// 初始化加载信息数据function initUserlogData() {//重置分页组件否则保留上次查询的，一般来说很多问题出现与这三行代码有关如：虽然数据正确但是页码不对仍然为上一次查询出的一致$('#pagination-log').em...
js html动态分页
03-20
NULL 博文链接：https://cailin.iteye.com/blog/783376
HTML动态分页函数
smzyydwwb的博客
11-15 1508
HTML动态分页函数 public class PageBarHelper{ /// &lt;summary&gt; /// 动态分页函数 /// &lt;/summary&gt; /// &lt;param name="pageIndex"&gt;总页数&lt;/param&gt; /// &lt;param nam...
js、html5 动态分页
fang5211的博客
07-06 617
js、html5 前端分页，根据总页数判断是否需要隐藏中间分页，如果当前页为1，上一页和首页不可点击，如果当前页为最后一页，下一页和尾页不可点击
html5分页插件制作手机端和网页分页列表代码
11-08
HTML5分页插件的制作通常会结合CSS3（层叠样式表）和JavaScript（或jQuery）来实现动态效果和响应式布局。 首先，我们需要创建基础的HTML结构，包含页码元素。这些元素通常是一组链接，每个链接代表一个分页项。...
html5分页导航按钮样式动画特效
06-24
总的来说，"html5分页导航按钮样式动画特效"是一个深入探讨HTML5在网页交互设计中应用的话题，涵盖了多种技术，旨在通过动态效果提升网页的用户体验和美观性。对于希望提升网页设计技能的开发者来说，这是一个值得...
html5分页导航按钮样式动画特效特效代码
03-20
HTML5是一种先进的网页标记语言，它在Web...总的来说，通过学习和应用这些HTML5分页导航按钮的样式和动画特效，开发者可以提升其网站或应用程序的视觉效果和用户体验，同时掌握更多关于HTML5、CSS3和JavaScript的知识。
js+ajax动态分页.rar
05-29
这个压缩包提供的示例应该包含了实现这些步骤的代码，小白可以通过阅读和理解代码来学习如何使用JavaScript和AJAX进行动态分页。代码中的注释将帮助理解每个部分的功能，对于快速上手这一技术非常有益。在实际项目中...
html5分页导航按钮样式动画代码.zip
最新发布
09-27
这个“html5分页导航按钮样式动画代码.zip”文件包含了一个实现分页导航功能的示例，其核心是利用HTML5的新特性、CSS3的样式和JavaScript的动态效果。 首先，HTML5提供了更丰富的语义化标签，如`<nav>`用于定义导航...
h5页面模版源码，很不多的例子
07-28
h5页面模版源码 ，非常酷炫的html5模板 ，可以直接使用，也可以参考学习
html滚动分页
qq_45351792的博客
02-13 440
【代码】html滚动分页。
前端动态分页一条龙（JQuery +css +html）
芋头一号的博客
05-09 504
1、html代码 <div class="center"> <div class="page_num"> 每页显示条数：<input type="text" id="page_size" value="15">（最大条数不超过100） </div> <ul class="pagination"> </ul> </div> 2、css代码 ul.pagination {
html jq页面跳转页面,jQuery实现页码跳转式动态数据分页
weixin_39562327的博客
06-03 675
我们这次给大家带来的是用jQuery实现页码跳转式动态数据分页这个效果，这个效果最明显的就是没有数据加载和刷新页面这个过程，再做小型数据的加载也多级网页加载的时候很有效。我们先来看下实际效果：下面我们给出全部效果代码：HTML全部代码：jQuery实现页码跳转式动态数据分页-脚本之家//前台分页的样子$('#histroyBox').CJJTable({'title':["装点","卸点","运输...
html js实现分页代码,JS实现前端动态分页码代码实例
weixin_31119637的博客
06-09 673
思路分析：有3种情况第一种情况，当前页面curPage < 4第二种情况，当前页面curPage == 4第三种情况，当前页面curPage>4此外，还要考虑，当前页码 curPage < pageTotal(总页码)-2，才显示 ...首先，先是前端的布局样式/*首先，在body中添加div id="pagination" */其次，是css代码*{margin: 0;padd...
html 分页原理,html表格分页
weixin_31090341的博客
06-03 682
最近要用TPageProducer替换模版，同时还须实现html分页，所见即所得，网上找了半天没发现，于是自己琢磨写了一个。代码用delphi6写，由于实际需要，所以写例子的时候缩小了实际模型，供大家分享。这里写的例子表格，如果一整行的话肯定很容易控制TDContent=classTDtxt : String;Htmltxt : String;Height : Integer;NextHeight...
html分页功能实现原理无美化，代码中有详细的注释
wlb1012768230的博客
08-24 920
【代码】html分页功能实现原理无美化，代码中有详细的注释。
生成页码（page）
qq_41988113的博客
03-15 883
描述 请补全JavaScript代码，要求根据参数动态生成"li"标签页码并插入"ul"标签下。要求如下： 1. "allItem"为总数据项个数，"pageItem"为每页的数据项个数 2. "li"标签内容为当前页码数，页码从1开始 示例1 输入： _createPage(13,2) 复制输出： "li"长度为7，"li"内容依次为"1","2","3","4","5","6","7" <!DOCTYPE html> <html> <head
HTML简单页面页码的设计
Linzsong的博客
12-18 8708
HTML简单页面页码的设计 &amp;lt;!DOCTYPE HTML&amp;gt; &amp;lt;html&amp;gt; &amp;lt;head&amp;gt; &amp;lt;title&amp;gt;HTML页码设置&amp;lt;/title&amp;gt; &amp;lt;meta http-equiv=&quot;Content-Type&quot; content=&a
html分页代码
06-01
HTML 没有原生的分页功能，但可以通过 JavaScript 或 CSS 来实现分页效果。以下是一个简单的 CSS 分页代码示例： HTML 代码： ```html 第一页 第二页 第三页 第四页 第五页 ``` CSS 代码： ```css .page ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值