24H免费课程咨询  TEL:13401595960   QQ:1870218756  微信:13401595960(李老师)

东方博宜

网站首页 > 软件开发资讯 > PHP开发

【常州编程培训】JQuery Tab切换的原理

2017-12-03 16:54:52 东方博宜 阅读

TAB切换的原理

插件:swiper.js,使用插件注意插件版本及浏览器兼容性!

 

例子:

         <style>

                   .main{

                            width:400px;height:200px;overflow: hidden;

                   }

 

                   .row{

                            width:1200px;height:200px;

                   }

 

                   .d01,.d02,.d03{

                            width:400px;height:200px;text-align: center;float:left;

                            line-height: 200px;font-size:30px;color:#FFF;

                   }

 

                   .d01{

                            background-color:#F00;

                   }

 

                   .d02{

                            background-color:green;

                   }

 

                   .d03{

                            background-color:orange;

                   }

         </style>

         <div class="buttons">

                   <input type="button" value="前一个"/>

                   <input type="button" value="后一个"/>

         </div>

 

         <div class="main">

                   <div class="row">

                            <div class="d01">

                                     DIV01

                            </div>

 

                            <div class="d02">

                                     DIV02

                            </div>

 

                            <div class="d03">

                                     DIV03

                            </div>

                   </div>

         </div>

 

        

                   <script src="js/jquery-1.11.3.js"></script>

                   <script>

                      $(document).ready(function(){

                            $("[value='后一个']").click(function(){

                                 var w = $(".d01").width();

                                 var marginLeft = $(".row").css("margin-left");

                                 left = parseInt(marginLeft) - w;

                                 if(left < -1 * w * ($(".row>div").size() - 1)){

                                    left = 0;

                                 }

                                 

                                 $(".row").animate({marginLeft:left},600);

                            });

                            

                            $("[value='前一个']").click(function(){

                                 var w = $(".d01").width();

                                 var marginLeft = $(".row").css("margin-left");

                                 left = parseInt(marginLeft) + w;

                                 if(left > 0){

                                    left = -1 * w * ($(".row>div").size() - 1);

                                 }

                                 

                                 $(".row").animate({marginLeft:left},600);

                            });

                      });

         </script>

 

原理:

定义一个outer div,作为“视口”(能够看到的内容,一般和一个div一样大),超过视口区域的元素overflow:hidden

定义一个inner div,作为存放多个切换的div的容器,宽度 = 多个div容器的和!

inner div中放多个需要切换的内容!

 

切换时,如左右切换,则定义inner divmargin值,让这个div左右拖动!

图片.png

Powered by 东方博宜教育咨询江苏有限公司  ©2008-2017 www.czos.cn