经验分享程序开发文档资料数据资源其它资源

jQuery分页图片切换插件jPages特效代码

版权：原创 更新时间：1年以上
[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery分页图片切换插件jPages特效代码 的示例演示效果:

当前平台(PC电脑)
  • 平台:
整屏预览

部分效果截图:

jQuery分页图片切换插件jPages特效代码

HTML代码(index.html):

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <title>jQuery分页图片切换插件jPages</title>
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <link rel="stylesheet" href="css/style.css">
  <link rel="stylesheet" href="css/animate.min.css">
  <style type="text/css">
   div#container {
  	width: 730px;
  	margin: 100px auto;
  }
  body {
  	background: #333;
  	color: #eee;
	font-family:microsoft yahei;
  }
  .holder {
    margin: 15px 0;
	text-align:center;
  }
  .holder a {
    font-size: 12px;
    cursor: pointer;
    margin: 0 5px;
    color: #fff;
	padding:2px 5px;
  }
  .holder a:hover {
    background-color: #eee;
    color: #FF4242;
  }
  .holder a.jp-previous { margin-right: 15px; }
  .holder a.jp-next { margin-left: 15px; }
  .holder a.jp-current, a.jp-current:hover {
    color: #FF4242;
    font-weight: bold;
  }
  .holder a.jp-disabled, a.jp-disabled:hover {
    color: #eee;
  }
  .holder a.jp-current, a.jp-current:hover,
  .holder a.jp-disabled, a.jp-disabled:hover {
    cursor: default;
    background: none;
  }
  .holder span { margin: 0 5px; }
  div#content {
  	width: 700px;
  }
  </style>  
  <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
  <script src="js/jPages.js"></script>
  <script>
  $(function() {
    $("div.holder").jPages({
      containerID: "itemContainer",
	  previous: "←左",
      next: "右→",
      perPage: 5
    });
  });
  </script>
</head>
<body>
  <div id="container" class="clearfix">
    <!--! end of #sidebar -->
    <div id="content" class="defaults">
    	<!-- navigation holder -->
      <div class="holder">
      </div>
      <!-- item container -->
      <ul id="itemContainer">
        <li><img src="images/img (1).jpg" alt="image"></li>
        <li><img src="images/img (2).jpg" alt="image"></li>
        <li><img src="images/img (3).jpg" alt="image"></li>
        <li><img src="images/img (4).jpg" alt="image"></li>
        <li><img src="images/img (5).jpg" alt="image"></li>
        <li><img src="images/img (6).jpg" alt="image"></li>
        <li><img src="images/img (7).jpg" alt="image"></li>
        <li><img src="images/img (8).jpg" alt="image"></li>
        <li><img src="images/img (9).jpg" alt="image"></li>
        <li><img src="images/img (10).jpg" alt="image"></li>

		<li><img src="images/img (1).jpg" alt="image"></li>
        <li><img src="images/img (2).jpg" alt="image"></li>
        <li><img src="images/img (3).jpg" alt="image"></li>
        <li><img src="images/img (4).jpg" alt="image"></li>
        <li><img src="images/img (5).jpg" alt="image"></li>
        <li><img src="images/img (6).jpg" alt="image"></li>
        <li><img src="images/img (7).jpg" alt="image"></li>
        <li><img src="images/img (8).jpg" alt="image"></li>
        <li><img src="images/img (9).jpg" alt="image"></li>
        <li><img src="images/img (10).jpg" alt="image"></li>

        <li><img src="images/img (1).jpg" alt="image"></li>
        <li><img src="images/img (2).jpg" alt="image"></li>
        <li><img src="images/img (3).jpg" alt="image"></li>
        <li><img src="images/img (4).jpg" alt="image"></li>
        <li><img src="images/img (5).jpg" alt="image"></li>
        <li><img src="images/img (6).jpg" alt="image"></li>
        <li><img src="images/img (7).jpg" alt="image"></li>
        <li><img src="images/img (8).jpg" alt="image"></li>
        <li><img src="images/img (9).jpg" alt="image"></li>
        <li><img src="images/img (10).jpg" alt="image"></li>        
        
        <li><img src="images/img (1).jpg" alt="image"></li>
        <li><img src="images/img (2).jpg" alt="image"></li>
        <li><img src="images/img (3).jpg" alt="image"></li>
        <li><img src="images/img (4).jpg" alt="image"></li>
        <li><img src="images/img (5).jpg" alt="image"></li>
        <li><img src="images/img (6).jpg" alt="image"></li>
        <li><img src="images/img (7).jpg" alt="image"></li>
        <li><img src="images/img (8).jpg" alt="image"></li>
        <li><img src="images/img (9).jpg" alt="image"></li>
        <li><img src="images/img (10).jpg" alt="image"></li>

        <li><img src="images/img (1).jpg" alt="image"></li>
        <li><img src="images/img (2).jpg" alt="image"></li>
        <li><img src="images/img (3).jpg" alt="image"></li>
        <li><img src="images/img (4).jpg" alt="image"></li>
        <li><img src="images/img (5).jpg" alt="image"></li>
        <li><img src="images/img (6).jpg" alt="image"></li>
        <li><img src="images/img (7).jpg" alt="image"></li>
        <li><img src="images/img (8).jpg" alt="image"></li>
        <li><img src="images/img (9).jpg" alt="image"></li>
        <li><img src="images/img (10).jpg" alt="image"></li>
      </ul>
      <!-- navigation holder -->
      <div class="holder">
      </div>
    </div>
    <!--! end of #content -->
  </div>
</body>
</html>

JS代码(jPages.js):

 /** * jQuery jPages v0.7 */
;
	(function($,window,document,undefined){
	var name = "jPages",instance = null,defaults ={
	containerID:"",first:false,previous:"← previous",next:"next →",last:false,links:"numeric",// blank || title startPage:1,perPage:10,midRange:5,startRange:1,endRange:1,keyBrowse:true,scrollBrowse:true,pause:0,clickStop:true,delay:50,direction:"forward",// backwards || auto || random || animation:"",// 需要引入animate.css fallback:400,minHeight:true,callback:undefined // function( pages,items ){
}
}
;
	function Plugin(element,options){
	this.options = $.extend({
}
,defaults,options);
	this._container = $("#" + this.options.containerID);
	if (!this._container.length) return;
	this.jQwindow = $(window);
	this.jQdocument = $(document);
	this._holder = $(element);
	this._nav ={
}
;
	this._first = $(this.options.first);
	this._previous = $(this.options.previous);
	this._next = $(this.options.next);
	this._last = $(this.options.last);
	/* only visible items! */
 this._items = this._container.children(":visible");
	this._itemsShowing = $([]);
	this._itemsHiding = $([]);
	this._numPages = Math.ceil(this._items.length / this.options.perPage);
	this._currentPageNum = this.options.startPage;
	this._clicked = false;
	this._cssAnimSupport = this.getCSSAnimationSupport();
	this.init();
}
Plugin.prototype ={
	constructor:Plugin,getCSSAnimationSupport:function(){
	var animation = false,animationstring = 'animation',keyframeprefix = '',domPrefixes = 'Webkit Moz O ms Khtml'.split(' '),pfx = '',elm = this._container.get(0);
	if (elm.style.animationName) animation = true;
	if (animation === false){
	for (var i = 0;
	i < domPrefixes.length;
	i++){
	if (elm.style[domPrefixes[i] + 'AnimationName'] !== undefined){
	pfx = domPrefixes[i];
	animationstring = pfx + 'Animation';
	keyframeprefix = '-' + pfx.toLowerCase() + '-';
	animation = true;
	break;
}
}
}
return animation;
}
,init:function(){
	this.setStyles();
	this.setNav();
	this.paginate(this._currentPageNum);
	this.setMinHeight();
}
,setStyles:function(){
	var requiredStyles = "<style>" + ".jp-invisible{
	visibility:hidden !important;
}
" + ".jp-hidden{
	display:none !important;
}
" + "</style>";
	$(requiredStyles).appendTo("head");
	if (this._cssAnimSupport && this.options.animation.length) this._items.addClass("animated jp-hidden");
	else this._items.hide();
}
,setNav:function(){
	var navhtml = this.writeNav();
	this._holder.each(this.bind(function(index,element){
	var holder = $(element);
	holder.html(navhtml);
	this.cacheNavElements(holder,index);
	this.bindNavHandlers(index);
	this.disableNavSelection(element);
}
,this));
	if (this.options.keyBrowse) this.bindNavKeyBrowse();
	if (this.options.scrollBrowse) this.bindNavScrollBrowse();
}
,writeNav:function(){
	var i = 1,navhtml;
	navhtml = this.writeBtn("first") + this.writeBtn("previous");
	for (;
	i <= this._numPages;
	i++){
	if (i === 1 && this.options.startRange === 0) navhtml += "<span>...</span>";
	if (i > this.options.startRange && i <= this._numPages - this.options.endRange) navhtml += "<a href='#' class='jp-hidden'>";
	else navhtml += "<a>";
	switch (this.options.links){
	case "numeric":navhtml += i;
	break;
	case "blank":break;
	case "title":var title = this._items.eq(i - 1).attr("data-title");
	navhtml += title !== undefined ? title:"";
	break;
}
navhtml += "</a>";
	if (i === this.options.startRange || i === this._numPages - this.options.endRange) navhtml += "<span>...</span>";
}
navhtml += this.writeBtn("next") + this.writeBtn("last") + "</div>";
	return navhtml;
}
,writeBtn:function(which){
	return this.options[which] !== false && !$(this["_" + which]).length ? "<a class='jp-" + which + "'>" + this.options[which] + "</a>":"";
}
,cacheNavElements:function(holder,index){
	this._nav[index] ={
}
;
	this._nav[index].holder = holder;
	this._nav[index].first = this._first.length ? this._first:this._nav[index].holder.find("a.jp-first");
	this._nav[index].previous = this._previous.length ? this._previous:this._nav[index].holder.find("a.jp-previous");
	this._nav[index].next = this._next.length ? this._next:this._nav[index].holder.find("a.jp-next");
	this._nav[index].last = this._last.length ? this._last:this._nav[index].holder.find("a.jp-last");
	this._nav[index].fstBreak = this._nav[index].holder.find("span:first");
	this._nav[index].lstBreak = this._nav[index].holder.find("span:last");
	this._nav[index].pages = this._nav[index].holder.find("a").not(".jp-first,.jp-previous,.jp-next,.jp-last");
	this._nav[index].permPages = this._nav[index].pages.slice(0,this.options.startRange) .add(this._nav[index].pages.slice(this._numPages - this.options.endRange,this._numPages));
	this._nav[index].pagesShowing = $([]);
	this._nav[index].currentPage = $([]);
}
,bindNavHandlers:function(index){
	var nav = this._nav[index];
	// default nav nav.holder.bind("click.jPages",this.bind(function(evt){
	var newPage = this.getNewPage(nav,$(evt.target));
	if (this.validNewPage(newPage)){
	this._clicked = true;
	this.paginate(newPage);
}
evt.preventDefault();
}
,this));
	// custom first if (this._first.length){
	this._first.bind("click.jPages",this.bind(function(){
	if (this.validNewPage(1)){
	this._clicked = true;
	this.paginate(1);
}
}
,this));
}
// custom previous if (this._previous.length){
	this._previous.bind("click.jPages",this.bind(function(){
	var newPage = this._currentPageNum - 1;
	if (this.validNewPage(newPage)){
	this._clicked = true;
	this.paginate(newPage);
}
}
,this));
}
// custom next if (this._next.length){
	this._next.bind("click.jPages",this.bind(function(){
	var newPage = this._currentPageNum + 1;
	if (this.validNewPage(newPage)){
	this._clicked = true;
	this.paginate(newPage);
}
}
,this));
}
// custom last if (this._last.length){
	this._last.bind("click.jPages",this.bind(function(){
	if (this.validNewPage(this._numPages)){
	this._clicked = true;
	this.paginate(this._numPages);
}
}
,this));
}
}
,disableNavSelection:function(element){
	if (typeof element.onselectstart != "undefined") element.onselectstart = function(){
	return false;
}
;
	else if (typeof element.style.MozUserSelect != "undefined") element.style.MozUserSelect = "none";
	else element.onmousedown = function(){
	return false;
}
;
}
,bindNavKeyBrowse:function(){
	this.jQdocument.bind("keydown.jPages",this.bind(function(evt){
	var target = evt.target.nodeName.toLowerCase();
	if (this.elemScrolledIntoView() && target !== "input" && target != "textarea"){
	var newPage = this._currentPageNum;
	if (evt.which == 37) newPage = this._currentPageNum - 1;
	if (evt.which == 39) newPage = this._currentPageNum + 1;
	if (this.validNewPage(newPage)){
	this._clicked = true;
	this.paginate(newPage);
}
}
}
,this));
}
,elemScrolledIntoView:function(){
	var docViewTop,docViewBottom,elemTop,elemBottom;
	docViewTop = this.jQwindow.scrollTop();
	docViewBottom = docViewTop + this.jQwindow.height();
	elemTop = this._container.offset().top;
	elemBottom = elemTop + this._container.height();
	return ((elemBottom >= docViewTop) && (elemTop <= docViewBottom));
	// comment above and uncomment below if you want keyBrowse to happen // only when container is completely visible in the page /*return ((elemBottom >= docViewTop) && (elemTop <= docViewBottom) && (elemBottom <= docViewBottom) && (elemTop >= docViewTop) );
	*/
}
,bindNavScrollBrowse:function(){
	this._container.bind("mousewheel.jPages DOMMouseScroll.jPages",this.bind(function(evt){
	var newPage = (evt.originalEvent.wheelDelta || -evt.originalEvent.detail) > 0 ? (this._currentPageNum - 1):(this._currentPageNum + 1);
	if (this.validNewPage(newPage)){
	this._clicked = true;
	this.paginate(newPage);
}
evt.preventDefault();
	return false;
}
,this));
}
,getNewPage:function(nav,target){
	if (target.is(nav.currentPage)) return this._currentPageNum;
	if (target.is(nav.pages)) return nav.pages.index(target) + 1;
	if (target.is(nav.first)) return 1;
	if (target.is(nav.last)) return this._numPages;
	if (target.is(nav.previous)) return nav.pages.index(nav.currentPage);
	if (target.is(nav.next)) return nav.pages.index(nav.currentPage) + 2;
}
,validNewPage:function(newPage){
	return newPage !== this._currentPageNum && newPage > 0 && newPage <= this._numPages;
}
,paginate:function(page){
	var itemRange,pageInterval;
	itemRange = this.updateItems(page);
	pageInterval = this.updatePages(page);
	this._currentPageNum = page;
	if ($.isFunction(this.options.callback)) this.callback(page,itemRange,pageInterval);
	this.updatePause();
}
,updateItems:function(page){
	var range = this.getItemRange(page);
	this._itemsHiding = this._itemsShowing;
	this._itemsShowing = this._items.slice(range.start,range.end);
	if (this._cssAnimSupport && this.options.animation.length) this.cssAnimations(page);
	else this.jQAnimations(page);
	return range;
}
,getItemRange:function(page){
	var range ={
}
;
	range.start = (page - 1) * this.options.perPage;
	range.end = range.start + this.options.perPage;
	if (range.end > this._items.length) range.end = this._items.length;
	return range;
}
,cssAnimations:function(page){
	clearInterval(this._delay);
	this._itemsHiding .removeClass(this.options.animation + " jp-invisible") .addClass("jp-hidden");
	this._itemsShowing .removeClass("jp-hidden") .addClass("jp-invisible");
	this._itemsOriented = this.getDirectedItems(page);
	this._index = 0;
	this._delay = setInterval(this.bind(function(){
	if (this._index === this._itemsOriented.length) clearInterval(this._delay);
	else{
	this._itemsOriented .eq(this._index) .removeClass("jp-invisible") .addClass(this.options.animation);
}
this._index = this._index + 1;
}
,this),this.options.delay);
}
,jQAnimations:function(page){
	clearInterval(this._delay);
	this._itemsHiding.addClass("jp-hidden");
	this._itemsShowing.fadeTo(0,0).removeClass("jp-hidden");
	this._itemsOriented = this.getDirectedItems(page);
	this._index = 0;
	this._delay = setInterval(this.bind(function(){
	if (this._index === this._itemsOriented.length) clearInterval(this._delay);
	else{
	this._itemsOriented .eq(this._index) .fadeTo(this.options.fallback,1);
}
this._index = this._index + 1;
}
,this),this.options.delay);
}
,getDirectedItems:function(page){
	var itemsToShow;
	switch (this.options.direction){
	case "backwards":itemsToShow = $(this._itemsShowing.get().reverse());
	break;
	case "random":itemsToShow = $(this._itemsShowing.get().sort(function(){
	return (Math.round(Math.random()) - 0.5);
}
));
	break;
	case "auto":itemsToShow = page >= this._currentPageNum ? this._itemsShowing:$(this._itemsShowing.get().reverse());
	break;
	default:itemsToShow = this._itemsShowing;
}
return itemsToShow;
}
,updatePages:function(page){
	var interval,index,nav;
	interval = this.getInterval(page);
	for (index in this._nav){
	if (this._nav.hasOwnProperty(index)){
	nav = this._nav[index];
	this.updateBtns(nav,page);
	this.updateCurrentPage(nav,page);
	this.updatePagesShowing(nav,interval);
	this.updateBreaks(nav,interval);
}
}
return interval;
}
,getInterval:function(page){
	var neHalf,upperLimit,start,end;
	neHalf = Math.ceil(this.options.midRange / 2);
	upperLimit = this._numPages - this.options.midRange;
	start = page > neHalf ? Math.max(Math.min(page - neHalf,upperLimit),0):0;
	end = page > neHalf ? Math.min(page + neHalf - (this.options.midRange % 2 > 0 ? 1:0),this._numPages):Math.min(this.options.midRange,this._numPages);
	return{
	start:start,end:end}
;
}
,updateBtns:function(nav,page){
	if (page === 1){
	nav.first.addClass("jp-disabled");
	nav.previous.addClass("jp-disabled");
}
if (page === this._numPages){
	nav.next.addClass("jp-disabled");
	nav.last.addClass("jp-disabled");
}
if (this._currentPageNum === 1 && page > 1){
	nav.first.removeClass("jp-disabled");
	nav.previous.removeClass("jp-disabled");
}
if (this._currentPageNum === this._numPages && page < this._numPages){
	nav.next.removeClass("jp-disabled");
	nav.last.removeClass("jp-disabled");
}
}
,updateCurrentPage:function(nav,page){
	nav.currentPage.removeClass("jp-current");
	nav.currentPage = nav.pages.eq(page - 1).addClass("jp-current");
}
,updatePagesShowing:function(nav,interval){
	var newRange = nav.pages.slice(interval.start,interval.end).not(nav.permPages);
	nav.pagesShowing.not(newRange).addClass("jp-hidden");
	newRange.not(nav.pagesShowing).removeClass("jp-hidden");
	nav.pagesShowing = newRange;
}
,updateBreaks:function(nav,interval){
	if ( interval.start > this.options.startRange || (this.options.startRange === 0 && interval.start > 0) ) nav.fstBreak.removeClass("jp-hidden");
	else nav.fstBreak.addClass("jp-hidden");
	if (interval.end < this._numPages - this.options.endRange) nav.lstBreak.removeClass("jp-hidden");
	else nav.lstBreak.addClass("jp-hidden");
}
,callback:function(page,itemRange,pageInterval){
	var pages ={
	current:page,interval:pageInterval,count:this._numPages}
,items ={
	showing:this._itemsShowing,oncoming:this._items.slice(itemRange.start + this.options.perPage,itemRange.end + this.options.perPage),range:itemRange,count:this._items.length}
;
	pages.interval.start = pages.interval.start + 1;
	items.range.start = items.range.start + 1;
	this.options.callback(pages,items);
}
,updatePause:function(){
	if (this.options.pause && this._numPages > 1){
	clearTimeout(this._pause);
	if (this.options.clickStop && this._clicked) return;
	else{
	this._pause = setTimeout(this.bind(function(){
	this.paginate(this._currentPageNum !== this._numPages ? this._currentPageNum + 1:1);
}
,this),this.options.pause);
}
}
}
,setMinHeight:function(){
	if (this.options.minHeight && !this._container.is("table,tbody")){
	setTimeout(this.bind(function(){
	this._container.css({
	"min-height":this._container.css("height")}
);
}
,this),1000);
}
}
,bind:function(fn,me){
	return function(){
	return fn.apply(me,arguments);
}
;
}
,destroy:function(){
	this.jQdocument.unbind("keydown.jPages");
	this._container.unbind("mousewheel.jPages DOMMouseScroll.jPages");
	if (this.options.minHeight) this._container.css("min-height","");
	if (this._cssAnimSupport && this.options.animation.length) this._items.removeClass("animated jp-hidden jp-invisible " + this.options.animation);
	else this._items.removeClass("jp-hidden").fadeTo(0,1);
	this._holder.unbind("click.jPages").empty();
}
}
;
	$.fn[name] = function(arg){
	var type = $.type(arg);
	if (type === "object"){
	if (this.length && !$.data(this,name)){
	instance = new Plugin(this,arg);
	this.each(function(){
	$.data(this,name,instance);
}
);
}
return this;
}
if (type === "string" && arg === "destroy"){
	instance.destroy();
	this.each(function(){
	$.removeData(this,name);
}
);
	return this;
}
if (type === 'number' && arg % 1 === 0){
	if (instance.validNewPage(arg)) instance.paginate(arg);
	return this;
}
return this;
}
;
}
)(jQuery,window,document);

CSS代码(style.css):

/* * HTML5 Boilerplate * * What follows is the result of much research on cross-browser styling. * Credit left inline and big thanks to Nicolas Gallagher,Jonathan Neal,* Kroc Camen,and the H5BP dev community and team. */
/* ============================================================================= HTML5 element display ========================================================================== */
article,aside,details,figcaption,figure,footer,header,hgroup,nav,section{display:block;}
audio[controls],canvas,video{display:inline-block;*display:inline;*zoom:1;}
/* ============================================================================= Base ========================================================================== */
/* * 1. Correct text resizing oddly in IE6/7 when body font-size is set using em units * http://clagnut.com/blog/348/#c790 * 2. Force vertical scrollbar in non-IE * 3. Remove Android and iOS tap highlight color to prevent entire container being highlighted * www.yuiblog.com/blog/2010/10/01/quick-tip-customizing-the-mobile-safari-tap-highlight-color/ * 4. Prevent iOS text size adjust on device orientation change,without disabling user zoom * www.456bereastreet.com/archive/201012/controlling_text_size_in_safari_for_ios_without_disabling_user_zoom/ */
html{font-size:100%;overflow-y:scroll;-webkit-overflow-scrolling:touch;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;}
body{margin:0;font-size:13px;line-height:1.231;}
body,button,input,select,textarea{font-family:sans-serif;color:#222;}
/* * These selection declarations have to be separate * No text-shadow:twitter.com/miketaylr/status/12228805301 * Also:hot pink! */
::-moz-selection{background:#2C1B13;color:white;text-shadow:none;}
::selection{background:#2C1B13;color:white;text-shadow:none;}
/* ============================================================================= Links ========================================================================== */
a{color:#222;text-decoration:none;}
a:visited{color:#222;}
a:focus{outline:thin dotted;}
/* Improve readability when focused and hovered in all browsers:people.opera.com/patrickl/experiments/keyboard/test */
a:hover,a:active{outline:0;}
/* ============================================================================= Typography ========================================================================== */
abbr[title]{border-bottom:1px dotted;}
b,strong{font-weight:bold;}
blockquote{margin:1em 40px;}
dfn{font-style:italic;}
hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0;}
ins{background:#ff9;color:#000;text-decoration:none;}
mark{background:#ff0;color:#000;font-style:italic;font-weight:bold;}
/* Redeclare monospace font family:en.wikipedia.org/wiki/User:Davidgothberg/Test59 */
pre,code,kbd,samp{font-family:monospace,monospace;_font-family:'courier new',monospace;font-size:1em;}
/* Improve readability of pre-formatted text in all browsers */
pre{white-space:pre;white-space:pre-wrap;word-wrap:break-word;}
q{quotes:none;}
q:before,q:after{content:"";content:none;}
small{font-size:85%;}
/* Position subscript and superscript content without affecting line-height:gist.github.com/413930 */
sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;}
sup{top:-0.5em;}
sub{bottom:-0.25em;}
/* ============================================================================= Lists ========================================================================== */
ul,ol{margin:1em 0;padding:0 0 0 40px;}
dd{margin:0 0 0 40px;}
nav ul,nav ol{list-style:none;margin:0;padding:0;}
/* ============================================================================= Embedded content ========================================================================== */
/* * Improve image quality when scaled in IE7 * code.flickr.com/blog/2008/11/12/on-ui-quality-the-little-things-client-side-image-resizing/ */
img{border:0;-ms-interpolation-mode:bicubic;}
/* * Correct overflow displayed oddly in IE9 */
svg:not(:root){overflow:hidden;}
/* ============================================================================= Figures ========================================================================== */
figure{margin:0;}
/* ============================================================================= Forms ========================================================================== */
form{margin:0;}
fieldset{border:0;margin:0;padding:0;}
/* * 1. Correct color not inheriting in IE6/7/8/9 * 2. Correct alignment displayed oddly in IE6/7 */
legend{border:0;*margin-left:-7px;padding:0;}
/* Indicate that 'label' will shift focus to the associated form element */
label{cursor:pointer;}
/* * 1. Correct font-size not inheriting in all browsers * 2. Remove margins in FF3/4 S5 Chrome * 3. Define consistent vertical alignment display in all browsers */
button,input,select,textarea{font-size:100%;margin:0;vertical-align:baseline;*vertical-align:middle;}
/* * 1. Define line-height as normal to match FF3/4 (set using !important in the UA stylesheet) * 2. Correct inner spacing displayed oddly in IE6/7 */
button,input{line-height:normal;*overflow:visible;}
/* * 1. Display hand cursor for clickable form elements * 2. Allow styling of clickable form elements in iOS */
button,input[type="button"],input[type="reset"],input[type="submit"]{cursor:pointer;-webkit-appearance:button;}
/* * Consistent box sizing and appearance */
input[type="checkbox"],input[type="radio"]{box-sizing:border-box;}
input[type="search"]{-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box;}
/* * Remove inner padding and border in FF3/4 * www.sitepen.com/blog/2008/05/14/the-devils-in-the-details-fixing-dojos-toolbar-buttons/ */
button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0;}
/* Remove default vertical scrollbar in IE6/7/8/9 */
textarea{overflow:auto;vertical-align:top;}
/* Colors for form validity */
input:valid,textarea:valid{}
input:invalid,textarea:invalid{background-color:#f0dddd;}
/* ============================================================================= Tables ========================================================================== */
table{border-collapse:collapse;border-spacing:0;}
/* ============================================================================= Primary styles Author:========================================================================== */
body{font:12px 'Helvetica Neue',Helvetica,Arial,Sans-Serif;padding:0 0 200px 0;}
h1,h2,h3,h4,h5{margin:0;padding:0;font:italic bold 14px Georgia,serif;color:#2C1B13;}
p{margin:0 0 5px 0;}
/* Container */
div#container{width:900px;}
/* Filtrify link*/
div#author{background:#F0F2EB;margin-bottom:20px;padding:10px 20px;font-style:italic;font-size:13px;color:gray;text-shadow:0 1px white;}
div#author a{font-weight:bold;margin:0 3px;}
/* Header */
div#container header{margin-bottom:50px;}
div#container header h1{font-size:34px;color:#FF4242;letter-spacing:-3px;text-shadow:0 1px 0 #E53B3B;}
div#container header h1:before{content:"this.is( ";}
div#container header h1:after{content:" );";}
div#container header h1:before,div#container header h1:after{font:normal 12px "Courier New",Courier,monospace;color:#4B4647;text-shadow:none;letter-spacing:normal;}
/* Sidebar */
div#sidebar{float:left;width:200px;font-size:12px;line-height:18px;margin-left:20px;}
div#sidebar h1{font-size:21px;color:#FF4242;margin-bottom:30px;text-shadow:0 1px 0 #ddd;}
div#sidebar h2{margin:15px 0 5px 0px;font-size:12px;}
div#sidebar ul{list-style:none;margin:0;padding:0;}
div#sidebar ul li a{color:gray;line-height:1.8;}
div#sidebar ul li a:hover{background-color:#222;color:white;}
div#sidebar ul li.selected a{color:#FF4242;font-weight:bold;}
div#sidebar ul li.selected a:hover{background:none;color:#FF4242;}
div#sidebar div.share{margin-top:20px;}
/* Content */
div#content{float:left;width:680px;}
div#content h2{font-size:21px;margin-bottom:30px;}
div#content h3{margin:50px 0px 10px 0px;}
div#content p{line-height:1.5;}
div#content p a{color:white;background:#D4EE5E;font-weight:bold;}
div#content p a:hover{background:black;}
div#content p + div{margin-top:50px;}
div#content h3 span{background-color:#F4FAD2;color:#5C826D;padding:2px 3px;margin-left:10px;font-weight:normal;}
/* Content -> Code */
div#content div.codeBlocks{margin:20px 0 35px;}
div#content pre{float:left;margin-right:10px;cursor:pointer;}
div#content pre:before{content:attr(class);padding:2px 3px;color:white;}
div#content pre.html{background:#F0F2EB;border-bottom:1px solid #D7D9D3;}
div#content pre.html:before{background:#D7D9D3;}
div#content pre.javascript{background:#F4FAD2;border-bottom:1px solid #DBE0BC;}
div#content pre.javascript:before{background:#DBE0BC;}
div#content pre.css{background:#E1EDB9;border-bottom:1px solid #CAD5A6;}
div#content pre.css:before{background:#CAD5A6;}
div#content pre.collapse{position:relative;padding:2% 3%;width:94%;}
div#content pre.collapse:before{position:absolute;right:0;top:0;}
div#content pre code{display:none;background:none;font:11px/16px "Courier New",Courier,monospace;}
div#content pre.collapse code{display:block;}
/* Content -> Unordered Lists */
div#content ul#itemContainer{list-style:none;padding:0;margin:20px 0;}
div#content ul#itemContainer li{display:inline-block;margin:5px;zoom:1;*display:inline;}
div#content ul#itemContainer ll li img{vertical-align:bottom;width:125px;height:125px;}
/* Content -> index */
div#content.index pre{float:none;cursor:default;}
div#content.index pre code{display:block;}
div#content.index h2{margin-top:55px;}
div#content.index dl dt,div#content.index dl dd{float:left;margin-top:10px;}
div#content.index dl dt{clear:left;width:70px;font-style:italic;}
div#content.index dl dd{width:450px;}
div#content.index i + p{margin-top:5px;}
/* Content -> documentation */
div#content.documentation h2{margin-top:55px;}
div#content.documentation dl dt,div#content.documentation dl dd{float:left;margin-top:10px;}
div#content.documentation dl dt{clear:left;width:70px;font-style:italic;}
div#content.documentation dl dd{width:450px;}
div#content.documentation i + p{margin-top:5px;}
/* Content -> author */
div#content.author img{margin-bottom:50px;}
div#content.author img + p:before{content:'“';font-size:65px;font-family:Georgia;position:absolute;top:-55px;color:#ccc;}
div#content.author p{width:590px;position:relative;}
/* ============================================================================= Non-semantic helper classes Please define your styles before this section. ========================================================================== */
/* For image replacement */
.ir{display:block;text-indent:-999em;overflow:hidden;background-repeat:no-repeat;text-align:left;direction:ltr;}
.ir br{display:none;}
/* Hide for both screenreaders and browsers:css-discuss.incutio.com/wiki/Screenreader_Visibility */
.hidden{display:none;visibility:hidden;}
/* Hide only visually,but have it available for screenreaders:by Jon Neal. www.webaim.org/techniques/css/invisiblecontent/ & j.mp/visuallyhidden */
.visuallyhidden{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;}
/* Extends the .visuallyhidden class to allow the element to be focusable when navigated to via the keyboard:drupal.org/node/897638 */
.visuallyhidden.focusable:active,.visuallyhidden.focusable:focus{clip:auto;height:auto;margin:0;overflow:visible;position:static;width:auto;}
/* Hide visually and from screenreaders,but maintain layout */
.invisible{visibility:hidden;}
/* Contain floats:nicolasgallagher.com/micro-clearfix-hack/ */
.clearfix:before,.clearfix:after{content:"";display:table;}
.clearfix:after{clear:both;}
.clearfix{zoom:1;}
/* ============================================================================= PLACEHOLDER Media Queries for Responsive Design. These override the primary ('mobile first') styles Modify as content requires. ========================================================================== */
@media only screen and (min-width:480px){/* Style adjustments for viewports 480px and over go here */
}
@media only screen and (min-width:768px){/* Style adjustments for viewports 768px and over go here */
}
/* ============================================================================= Print styles. Inlined to avoid required HTTP connection:www.phpied.com/delay-loading-your-print-css/ ========================================================================== */
@media print{*{background:transparent !important;color:black !important;text-shadow:none !important;filter:none !important;-ms-filter:none !important;}
/* Black prints faster:sanbeiji.com/archives/953 */
 a,a:visited{color:#444 !important;text-decoration:underline;}
a[href]:after{content:" (" attr(href) ")";}
abbr[title]:after{content:" (" attr(title) ")";}
.ir a:after,a[href^="javascript:"]:after,a[href^="#"]:after{content:"";}
/* Don't show links for images,or javascript/internal links */
 pre,blockquote{border:1px solid #999;page-break-inside:avoid;}
thead{display:table-header-group;}
/* css-discuss.incutio.com/wiki/Printing_Tables */
 tr,img{page-break-inside:avoid;}
img{max-width:100% !important;}
@page{margin:0.5cm;}
p,h2,h3{orphans:3;widows:3;}
h2,h3{page-break-after:avoid;}
}
附件:下载该文件资源,减少时间成本(增值服务)
File Source
.rar
115.49 KB
立即下载(CNY 2.9￥)
打赏 收藏
分享
分享到QQ 分享到微博 微信扫一扫
留言
该资源可下载
File Source
.rar
115.49 KB
立即下载
凌霄芳
了解
打赏作者 鼓励作者
Html Js 图片切换触摸3
最新结算
jquery虚拟键盘中文打字效果js代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
jquery虚拟键盘中文打字效果js代码
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
HTML5实现CSS滤镜图片切换特效代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
jQuery头像裁剪插件cropbox js代码
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
jQuery头像裁剪插件cropbox js代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
jQuery+css3实现信封效果
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
我们力求给您提供有用的文章,再此基础上,会附加营收资源,不做任何广告,让平台可以更好发展 若您发现您的权利被侵害，或使用了您的版权，请发邮件联系 sunlifel@foxmail.com ggbig觉得 : 不提供源码的文章不是好文章
合作伙伴
帮助中心
联系我们
  • QQ：21499807
  • 邮箱：sunlifel@foxmail.com
  • QQ扫一扫加QQ
    QQ扫一扫
Copyright 2023-2024 ggbig.com·皖ICP备2023004211号-1
打赏文章