ホームページ > ウェブフロントエンド > jsチュートリアル > jQuery+css_jqueryで実装したページ切り替えタブバー効果

jQuery+css_jqueryで実装したページ切り替えタブバー効果

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
リリース: 2016-05-16 15:17:45
オリジナル
1551 人が閲覧しました

この記事の例では、jQuery+css によって実現されるページ変更タブ バー効果について説明します。参考のために皆さんと共有してください。詳細は次のとおりです:

実行中のエフェクトのスクリーンショットは次のとおりです:

具体的なコードは次のとおりです:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

<!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&#63;"":""

      prevPage = currentPage > 1 &#63; currentPage - 1 : 0,

      nextPage = currentPage < allPage &#63; currentPage + 1 : 0

      left = '<a target="'+pageTarget+'" class="page" href="'+url+'1"><<</a><a target="'+pageTarget+'" href="'+(prevPage==0&#63;"javascript:void(0)":url+prevPage)+'" class="page">&lt</a>',

      right = '<a target="'+pageTarget+'" href="'+(nextPage==allPage&#63;"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&#63;"active":"")+'">'+i+'</a>');

     }

     html.push(right);

     html.push('</div>');

     self.html(html.join(''));

    };

   })();

   $(document).ready(function(){

    $('#pageContainer').pageCreate("http://localhost/&#63;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 までご連絡ください。
最新の問題
jQueryファイルをインポートする
から 1970-01-01 08:00:00
0
0
0
jQueryのプロトタイプチェーン
から 1970-01-01 08:00:00
0
0
0
Nuxt.js に jQuery をインストールする手順
から 1970-01-01 08:00:00
0
0
0
php+jqueryの問題
から 1970-01-01 08:00:00
0
0
0
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート