ホームページ > 記事 > ウェブフロントエンド > jQuery+css_jqueryで実装したページ切り替えタブバー効果
jQuery+css_jqueryで実装したページ切り替えタブバー効果
- WBOYオリジナル
- 2016-05-16 15:17:451475ブラウズ
この記事の例では、jQuery+css によって実現されるページ変更タブ バー効果について説明します。参考のために皆さんと共有してください。詳細は次のとおりです:
実行中のエフェクトのスクリーンショットは次のとおりです:
具体的なコードは次のとおりです:
<!DOCTYPE html>
<html>
<head>
<title>index</title>
<script type="text/javascript" src="jquery.js"></script>
<style type="text/css" >
body {
margin:0; padding:0; font-size:12px; color:gray;
}
.container {
height:200px; background:#F2F2F2; border-radius:6px;
-webkit-border-radius:6px; -moz-border-radius:6px; border:6px solid #D5D5D5;
}
.wrapper {
width:90%; margin:0px auto;
}
.pageContainer {
margin:0 auto; height:30px; position:relative; width:100%;
}
.page {
width:30px; height:30px; background:#494949; border-radius:30px; margin-left:5px;
-webkit-border-radius:30px; -moz-border-radius:30px; line-height:30px; font-size:15px;
display:block; text-align:center; color:#fff; float:left; cursor:pointer; float:left;
margin-top:5px;
}
.page:hover {
background:#42CFFD; font-weight:bolder;
}
.page.active {
background:#0864C0;
}
</style>
<script type="text/javascript" >
(function(){
$.fn.pageCreate = function(url, allPage, currentPage, pageTarget){
if(isNaN(allPage) || allPage < 1 || isNaN(currentPage) || currentPage < 1 || $.trim(url) == "") {
return;
}
var html = [],
self = $(this),
pageTarget = pageTarget?"":""
prevPage = currentPage > 1 ? currentPage - 1 : 0,
nextPage = currentPage < allPage ? currentPage + 1 : 0
left = '<a target="'+pageTarget+'" class="page" href="'+url+'1"><<</a><a target="'+pageTarget+'" href="'+(prevPage==0?"javascript:void(0)":url+prevPage)+'" class="page"><</a>',
right = '<a target="'+pageTarget+'" href="'+(nextPage==allPage?"javascript:void(0)":url+prevPage)+'" class="page">></a><a target="'+pageTarget+'" class="page" href="'+url+allPage+'" >>></a>';
html.push('<div class="pageContainer">');
html.push(left);
for(var i=currentPage; i<=allPage; i++) {
html.push('<a href="'+url+i+'" target="'+pageTarget+'" class="page '+(i==currentPage?"active":"")+'">'+i+'</a>');
}
html.push(right);
html.push('</div>');
self.html(html.join(''));
};
})();
$(document).ready(function(){
$('#pageContainer').pageCreate("http://localhost/?page=", 5, 3, '_blank');
});
</script>
</head>
<body>
<div class="wrapper">
<div class="container" id="pageContainer">
</div>
</div>
</body>
</html>
jQuery 特殊効果に関連するさらなるコンテンツに興味のある読者は、このサイトの特別トピック「jQuery の一般的な古典的な特殊効果の概要」および「jQuery アニメーションの概要」を参照してください。および特殊効果の使用"
この記事が jQuery プログラミングのすべての人に役立つことを願っています。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。