[原创]tab滑动面板效果初探

zoukankan html css js c++ java

[原创]tab滑动面板效果初探

从接触jquery到现在，几乎没怎么去运用，之前一直习惯写js代码，今天想试着用jq实现一些常用的UI功能，滑动面板切换效果

先看效果图，样式比较简单：点击下载【原创】tab切换面板.zip

实例一：

html页面

View Code

1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4     <title></title>
5     <style type="text/css">
6         *
7         {
8             margin: 0px;
9             padding: 0;
10         }
11         #ul_tab
12         {
13             background-color: #ff0;
14             width: 300px;
15             height: 20px;
16             float: left;
17         }
18         #ul_tab li
19         {
20             float: left;
21             list-style: none;
22             height: 20px;
23             width: 100px;
24         }
25         .divCon
26         {
27             clear: none;
28             width: 300px;
29             height: 80px;
30             display: none;
31         }
32     </style>
33     <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
34     <script type="text/javascript" src="js/tab2.js"></script>
35 </head>
36 <body>
37     <div id="content" style="height: 100px;  300px; padding-left: 0; border: 1px solid #000;">
38         <ul id="ul_tab">
39             <li>面板一</li>
40             <li>面板二</li>
41             <li>面板三</li>
42         </ul>
43         <div class="divCon">
44             1</div>
45         <div class="divCon">
46             2</div>
47         <div class="divCon">
48             3</div>
49     </div>
50 </body>
51 </html>

下面看jq代码

View Code

1 $(document).ready(function () {
2     $("#ul_tab li:eq(0)").css("background-color", "#f00");
3     $("#ul_tab").next("div").css("background-color", "#f00").show();
4
5     $("#ul_tab li").each(function (index) {//利用li对应的索引index传递到每个div中去
6         $("#ul_tab li:eq(" + index + ")").mouseover(function () {
7           //对所有的li和对应的div设置为违背触发事件时的样式
8             $("#ul_tab li").css("background-color", "#ff0")
9             $("#content >div").hide();
10          //      //对触发事件的li和div应用相应被选中的样式
11             $(this).css("background-color", "#f00");
12             $("#content >div:eq(" + index + ")").css("background-color", "#f00").show();
13         })
14     })
15 })

实例二：

做完了上面的效果图后，想增加点功能，就是自动轮播，点击时候停止

html代码，跟上面的有些不一样，

View Code

1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4     <title></title>
5       <style type="text/css">
6         *{margin:0px; padding:0;}
7         #ul_tab{background-color:#ff0; width:300px; height:20px; float:left;}
8        #ul_tab li{ float:left; list-style:none;height:20px;width:100px;}
9     </style>
10     <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
11 
13       <script type="text/javascript" src="js/tab1.js">
14     </script>
15 </head>
16 <body>
17 <div id="content" style="height:100px;300px; padding-left:0;border:1px solid #000;">
18       <ul id="ul_tab">
19         <li onmousemove="tabs(this,0)">面板一</li>
20         <li onmousemove="tabs(this,1)">面板二</li>
21         <li onmousemove="tabs(this,2)">面板三</li>
22       </ul>
23       <div style="clear:none;300px; height:80px;">1</div>
24       <div style="clear:none;300px; height:80px; display:none;">2</div>
25       <div style="clear:none;300px; height:80px; display:none;">3</div>
26     </div>
27 </body>
28 </html>

jq代码如下：用到了定时器setInterval和clearInterval

View Code

1 $(document).ready(function () {
2     $("#ul_tab li:eq(0)").css("background-color", "#f00");//页面加载初始化所有的li，和对应的div标签背景颜色
3     $("#ul_tab").next("div").css("background-color", "#f00");
4     var time;
5     auto();
6 })
7 function tabs(oli, i) {//改变对应li和div的样式
8     clearInterval(time);
9     $("#ul_tab >li").css("background-color", "#ff0")
10     $("#content>div").hide();
11     $(oli).css("background-color", "#f00");
12     $("#content>div:eq(" + i + ")").show().css("background-color", "#f00");
13 }
14
15 function autoPlay(i)//当li执行时显示的样式
16 {
17     $("#ul_tab >li").css("background-color", "#ff0")
18     $("#content>div").hide();
19     $("#ul_tab >li:eq("+i+")").css("background-color", "#f00");
20      $("#content>div:eq(" + i + ")").show().css("background-color", "#f00");
21 }
22
23 function auto()//自动播放函数
24 {
25  var i=0;//定义全局变量播放一次后i的值加1
26  var count=$("#ul_tab >li").length; //获取li的个数
27   time = setInterval(function(){
28           autoPlay(i);
29             i++;
30             if (i>=count)//检测如果i的值超过范围就从0开始
31             {
32               i=0;
33             }
34 },1500);
35 }

实例三：

看到网上的牛人都是将js代码封装成所谓的插件形式，封装插件的方法有1.类级别的插件开发。2.对象级别插件开发。

类级别写法：jQuery.插件名称=function(){.....}；

调用方法：$.插件名称();

View Code

<script type="text/javascript">
        jQuery.msg = function () {
            alert("123");
    　　 };
    </script>
    <script type="text/javascript">
        $(function () {
$.msg();
        });
    </script>

来比较一下对象级别插件写法：Go on!

(function($)
{$.fn.pluginName = function()
{
// 代码区域。
};})(jQuery);

对象级别写法：$.fn.插件名称 = function(){};多了一个fn,没错，是fn! fn!!! fn!!!

调用方法：$("#Me").插件名称();

稍微说一下，$.插件名称();是通过$访问调用jquery中的全局函数，直接可以通过jquery或者美元$调用，从而实现一些效果。

先看看我的jq对象级别的封装

View Code

1 // JavaScript Document
2 (function($) {
3           $.fn.tabs = function(method)
4           {
5                var defualts = { events: "click" }; //json对象数据，默认是点击事件
6                var opts = $.extend({}, defualts, method);
7                 var obj = $(this);
8                 //初始化第一个li,第一个div被选中
9                 $("ul li:first",obj).addClass("defaultLi");
10                 $("div:first",obj).show();
11
12              $("ul li",obj).bind(opts.events,function(){
13                         var index=$("ul li",obj).index    ($(this));
14                     //对所有的li和对应的div设置为违背触发事件时的样式
15                         $("ul li",obj).addClass("undefaultLi");
16                        $("div",obj).hide();
17                     //对触发事件的li和div应用相应被选中的样式
18                         $("ul li:eq("+index+")",obj).removeClass("undefaultLi").addClass("defaultLi");
19                         $("div:eq("+index+")",obj).show().addClass("defaultDiv");
20
21                 })//end bind
22
23           };
24 })(jQuery);

下面看看html控制页面的代码

View Code

1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <title></title>
5  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
6 <style type="text/css">
7 *{ margin:0; padding:0;}
8 #mytabs{
9     height: 100px;
10     width: 300px;
11     padding-left: 0;
12     border:1px solid #000;
13     }
14     #mytabs ul{
15           background-color: #ff0;
16             width: 300px;
17             height: 20px;
18           }
19         #mytabs ul li
20         {
21             float: left;
22             list-style: none;
23             height: 20px;
24             width: 100px;
25         }
26         #mytabs div
27         {
28             clear: none;
29             width: 300px;
30             height: 80px;
31             display: none;
32             background-color:#F00;
33         }
34         .defaultLi{
35             float: left;
36             list-style: none;
37             height: 20px;
38             width: 100px;
39             background-color:#F00;
40         }
41         .undefaultLi
42         {   float: left;
43             list-style: none;
44             height: 20px;
45             width: 100px;
46             background-color:#ff0;
47         }
48         .defaultDiv
49         {
50             clear: none;
51             width: 300px;
52             height: 80px;
53             background-color:#F00;
54         }
55 </style>
56
57 <script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
58  <script src="js/mytabs2.js" type="text/javascript"></script>
59   <script type="text/javascript">
60   $(function () {
61              //默认为点击 $("#mytabs").tabs();
62               $("#mytabs").tabs({events:"mouseover"})
63               });
64    </script>
65  </head><body>
66    
67    <div id="mytabs">
68     
69     <ul>
70          <li><a href="#">选项1</a></li>
71          <li><a href="#">选项2</a></li>
72           <li><a href="#">选项3</a></li>
73      </ul>
74               
75           <div>11111</div>
76             <div>22222</div>
77            <div>33333</div>
78     </div>
79  </body>
80 </html>

实例三的方式，html页面简单，只有定义面板区域总div的id，不过jq调用都是对样式类名的控制，不像前两种比较固定，调用插件的方法只有一句话

<script type="text/javascript">
  $(function () {
             //默认为点击 $("#mytabs").tabs();
              $("#mytabs").tabs({events:"mouseover"})
              });
   </script>

最后提供完整代码：/Files/Jaylong/tab切换面板.zip

查看全文

相关阅读:
闲聊js中的apply、call和arguments
字符串操作，文件操作，英文词频统计预处理
 了解大数据的特点、来源与数据呈现方式
 带你精读你不知道的Javasript(上)（一）
益智小游戏看你能否通关？
网站性能优化——网页的生成过程
 带着封装的思想顺便实现楼层点亮
 CSS3 傻傻分不清楚的transition, transform 和 animation
图片轮播的思路
 如何处理跨平台的自适应三

原文地址：https://www.cnblogs.com/Jaylong/p/ty.html