HTML5动态分页效果代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5分页</title>
<style>body {
background: #33ab83;
}
button {
-webkit-appearance: none;
background: transparent;
border: ;
}
.paginate {
position: relative;
margin: 10px;
width: 50px;
height: 50px;
cursor: pointer;
transform: translate3d(, , );
position: absolute;
top: %;
margin-top: -20px;
-webkit-filter: drop-shadow( 2px 0px rgba(, , , 0.2));
}
.paginate i {
position: absolute;
top: %;
left: ;
width: 50px;
height: 5px;
border-radius: .5px;
background: #fff;
transition: all .15s ease;
}
.paginate.left {
right: %;
}
.paginate.left i {
transform-origin: % %;
}
.paginate.left i:first-child {
transform: translate(, -1px) rotate(40deg);
}
.paginate.left i:last-child {
transform: translate(, 1px) rotate(-40deg);
}
.paginate.left:hover i:first-child {
transform: translate(, -1px) rotate(30deg);
}
.paginate.left:hover i:last-child {
transform: translate(, 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, ) rotate(0deg);
}
.paginate.left[data-state=disabled] i:last-child {
transform: translate(-5px, ) rotate(0deg);
}
.paginate.left[data-state=disabled]:hover i:first-child {
transform: translate(-5px, ) rotate(0deg);
}
.paginate.left[data-state=disabled]:hover i:last-child {
transform: translate(-5px, ) rotate(0deg);
}
.paginate.right {
left: %;
}
.paginate.right i {
transform-origin: % %;
}
.paginate.right i:first-child {
transform: translate(, 1px) rotate(40deg);
}
.paginate.right i:last-child {
transform: translate(, -1px) rotate(-40deg);
}
.paginate.right:hover i:first-child {
transform: translate(, 1px) rotate(30deg);
}
.paginate.right:hover i:last-child {
transform: translate(, -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, ) rotate(0deg);
}
.paginate.right[data-state=disabled] i:last-child {
transform: translate(5px, ) rotate(0deg);
}
.paginate.right[data-state=disabled]:hover i:first-child {
transform: translate(5px, ) rotate(0deg);
}
.paginate.right[data-state=disabled]:hover i:last-child {
transform: translate(5px, ) rotate(0deg);
}
.paginate[data-state=disabled] {
opacity: 0.3;
cursor: default;
}
.counter {
text-align: center;
position: absolute;
width: %;
top: %;
margin-top: -15px;
font-size: 30px;
font-family: Helvetica, sans-serif;
text-shadow: 0px 2px 0px rgba(, , , 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]{,}:/.exec(base) || [''])[],
base_domain = (/^[a-z]{,}:\/\/[^\/]+/.exec(base) || [''])[],
base_query = /^([^?]*)\??/.exec(url)[],
parent = link.parentNode,
xhr = new XMLHttpRequest(),
process;
xhr.onreadystatechange = function() {
if(xhr.readyState === ) {
process();
}
};
process = function() {
var css = xhr.responseText;
if(css && link.parentNode && (!xhr.status || xhr.status < || xhr.status > )) {
css = self.fix(css, true, link);
if(base) {
css = css.replace(/url\(\s*?((?:"|')?)(.+?)\1\s*?\)/gi, function($0, quote, url) {
if(/^([a-z]{,}:|#)/i.test(url)) { // Absolute & or hash-relative
return $;
}
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, , fixer);
},
fix: function(css, raw, element) {
for(var i=; 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($, $) { return $.toUpperCase(); }).replace('-','');
},
deCamelCase: function(str) {
return str.replace(/[A-Z]/g, function($) { return '-' + $.toLowerCase() });
}
};
(function(){
setTimeout(function(){
$('link[rel="stylesheet"]').forEach(StyleFix.link);
}, );
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') > -) {
css = css.replace(/(\s|:|,)(repeating-)?linear-gradient\(\s*(-?\d*\.?\d*)deg/ig, function ($, delim, repeating, deg) {
return delim + (repeating || '') + 'linear-gradient(' + (-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($) {
return $.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(/^:{,}/, function($) { return $ + 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() === '-') {
properties.push(property);
var parts = property.split('-'),
prefix = parts[];
prefixes[prefix] = ++prefixes[prefix] || ;
while(parts.length > ) {
parts.pop();
var shorthand = parts.join('-');
if(supported(shorthand) && properties.indexOf(shorthand) === -) {
properties.push(shorthand);
}
}
}
},
supported = function(property) {
return StyleFix.camelCase(property) in dummy;
}
if(style.length > ) {
for(var i=; i<style.length; i++) {
iterate(style[i])
}
}
else {
for(var property in style) {
iterate(StyleFix.deCamelCase(property));
}
}
var highest = {uses:};
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=; i<properties.length; i++) {
var property = properties[i];
if(property.indexOf(self.prefix) === ) { // 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, - );
pl.onclick = slide.bind( this, );
var index = , total = ;
function slide(offset) {
index = Math.min( Math.max( index + offset, ), total - );
document.querySelector( '.counter' ).innerHTML = ( index + ) + ' / ' + total;
pr.setAttribute( 'data-state', index === ? 'disabled' : '' );
pl.setAttribute( 'data-state', index === total - ? 'disabled' : '' );
}
slide();
</script>
</body>
</html>
HTML5动态分页效果代码的更多相关文章
- 非常不错的一个JS分页效果代码
这里分享一个不错的js分页代码. 代码中cpage是页面计数,应为全局变量,可以随处调用它: totalpage是总页数. 与asp分页代码很类似,也是先取得记录总数,然后实现分页,基本的分页思路与原 ...
- Java 之MVC动态分页完美实现
一个分页小技术有时也是让人挠头,在这里完全前端实现方式与Java的实现方式,我们提供给你完全的编码参考,希望能够帮到你哦(:) 内容导读 1.程序结构 2.JSP页面设计 3.分页主要编码 4.运行效 ...
- html5 canvas首屏自适应背景动画循环效果代码
模板描述:html5 canvas首屏自适应背景动画循环效果代码 由于动态图太大,怕以后服务器受不了,所以现在都改为静态图了,大家点击演示地址一样的,希望大家喜欢,你们的支持就是小海的动力!! 欢迎大 ...
- 分享5种风格的 jQuery 分页效果【附代码】
jPaginate 是一款非常精致的分页插件,提供了五种不同风格的分页效果,支持鼠标悬停翻页,快速分页功能.这款插件还提供了丰富的配置选项,你可以根据需要进行设置. 效果演示 源码下载 各个 ...
- php分页类代码带分页样式效果(转)
php分页类代码,有漂亮的分页样式风格 时间:2016-03-16 09:16:03来源:网络 导读:不错的php分页类代码,将类文件与分页样式嵌入,实现php查询结果的精美分页,对研究php分页原理 ...
- 5种风格的 jQuery 分页效果【附代码】
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xht ...
- [JS,NodeJs]个人网站效果代码集合
上次发的个人网站效果代码集合: 代码集合: 1.彩色文字墙[鼠标涟漪痕迹] 2.彩色旋转圆环 [模仿http://www.moma.org/interactives/exhibitions/2012/ ...
- jquery动态分页
最近一直研究jquery的分页效果,刚刚弄好了一个,拿出来与大家分享.分页效果与时光网的差不多. 网址:http://www.mtime.com/movie/news/all/ 先在aspx页面放置一 ...
- jquery自定义插件实现分页效果
这节介绍如何自定义jquery插件,实现分页效果,话不多说,先看看实现的效果: 分页插件 实现的代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTM ...
随机推荐
- Hdu 1404 Digital Deletions
Problem地址:http://acm.hdu.edu.cn/showproblem.php?pid=1404 刚开始想采取找规律的方法解题,可以没有发现规律.无奈,只好采用求PN点的方法. 我们假 ...
- sass玩转颜色总结笔记
变量: $color:#f00; 1.变浅和加深颜色,sass使用HSL标准来变浅或加深颜色 lighten($color,10%); darken($color,30%); ...
- 【转】增强 scite 编辑器的代码提示功能
在 windows 下写 Lua, 我能找到的最好的编辑器就是 luaForWindows 项目里带的 scite. npp (即 notepad++ ) 也将就着能用, 不过只有代码高亮和简单的单词 ...
- RPC通信框架——RCF介绍（替换COM）
阅读目录 RPC通信框架 为什么选择RCF 简单的性能测试 参考资料 总结 现有的软件中用了大量的COM接口,导致无法跨平台,当然由于与Windows结合的太紧密,还有很多无法跨平台的地方.那么为了实 ...
- Spring Web MVC中的页面缓存支持 ——跟我学SpringMVC系列
Spring Web MVC中的页面缓存支持 ——跟我学SpringMVC系列
- [置顶] Android4.0中修改挂断键（ENDCALL）的默认行为
文件: frameworks/base/core/java/android/provider/Setings.java public static final String END_BUTTON_BE ...
- 基于visual Studio2013解决C语言竞赛题之0708字符串查找
题目
- 重设mysql数据库root用户密码
原文:http://blog.sina.com.cn/s/blog_a3695da601010mrs.html 1, 启用任务管理器,结束mysql进程 2,进入命令行,进入mysql的bi ...
- Struts2+Spring+Hibernate step by step 03 整合Spring之中的一个（在DAO层验证username和password）
注:该系列文章部分内容来自王健老师编写SSH整合开发教程 目的:通过Spring创建数据库的连接,并通过Spring进行事务管理. 第一步:将Spring的包拷贝至当前项目的lib文件夹下,例如以下图 ...
- 【C/C++多线程编程之四】终止pthread线程
多线程编程之终止pthread线程 Pthread是 POSIX threads 的简称,是POSIX的线程标准. 终止线程似乎是多线程编程的最后一步,但绝不是本系列教 ...