Jquery插件 自制分步滑动页面（全屏横移）

写在前面的话

其实网上这种插件有很多  fullpage.js就是一个非常好的开源 且功能非常多

我之所以不用是觉得插件太大 而我只是要屏幕横移这么一个小功能，当然也包括的样式修改的小问题 

------------------------------------------------------------------------------------------------------------------------------------------------------------

JS部分

------------------------------------------------------------------------------------------------------------------------------------------------------------

这边前提供外部调用函数moveTo(index),index表示需要移动到第几个section

 1 var Stepbar = function () {
 2     if (this instanceof Stepbar) {
 3         var me = this;
 4 
 5         //步骤列表
 6         me.$steps = $('.stepbox ul li');
 7         //容器
 8         me.$container = $('.container');
 9         me.$sections = $('.container .section');
10 
11         me.$steps.on('click', function () {
12             var index = me.$steps.index(this);
13             me.moveTo(index);
14         })
15 
16         me.moveTo(0);
17 
18     } else {
19         return new Stepbar();
20     }
21 }
22 
23 Stepbar.prototype = {
24     moveTo: function (index) {
25         var me = this
26         var pos = $(me.$sections[index]).position().left;
27         me.$container.animate({
28             left: -pos + 'px'
29         }, 300);
30 
31         me._actived(index);
32     },
33     next: function () {
34         var me = this;
35     },
36     _actived: function (index) {
37         var me = this;
38         me.$steps.filter('.active').removeClass('active');
39         $(me.$steps[index]).addClass('active');
40     }
41 
42 }

------------------------------------------------------------------------------------------------------------------------------------------------------------

CSS部分

------------------------------------------------------------------------------------------------------------------------------------------------------------

这边因为section的个数的不定的 所以 用n表示section的个数，整个div容器的宽度就是n*100%，m表示每个section的宽度（因为需要占满整个屏幕宽度为屏幕的100%，而整个div宽度是大于100%的，所以需要100/n来表示），

举个例子：需要4个section 那么 整个容器就是400% 每个section的宽度就是25%

 1 .container {
 2     position: relative;
 3     width: n*100%;            n=section的个数
 4 
 5     .section {
 6         width: m%;            m=100/n
 7         height: 800px;
 8         float: left;
 9     }
10 }

这边因为是分步骤的，我索性把步骤的也贴出来

.stepbox {
    ul {
        height: 50px;
        line-height: 50px;
        list-style: none;
        float: right;
        margin-bottom: 10px;

        li {
            width: 140px;
            float: left;
            font-size: 14px;
            text-align: center;
            cursor: pointer;
            font-size: 16px;

            span {
                display: inline-block;
                text-align: center;
                margin-right: 8px;
                height: 30px;
                width: 30px;
                line-height: 30px;
                border-radius: 50%;
                background-color: #d1d1d1;
            }

            i {
                display: inline-block;
                font-size: 24px;
            }

            &:hover {
                span {
                    background-color: @themeColor;
                }
            }
        }

        .active {
            span {
                background-color: @themeColor;
            }
        }
    }
}

------------------------------------------------------------------------------------------------------------------------------------------------------------

HTML部分

------------------------------------------------------------------------------------------------------------------------------------------------------------

HTML这边分了两块，一块是步骤的，一块是主体屏幕显示的内容

 1 <div class="stepbox">           //步骤
 2     <ul>
 3         <li>步骤1</li>
 4         <li>步骤2</li>
 5         ......
 6     </ul>
 7     <div class="clear"></div>
 8 </div>
 9 
10 <div class="container">          //内容
11     <div class="section" id="section1">
12         HTML内容
13     </div>
14     <div class="section" id="section2">
15         HTML内容
16     </div>
17     ......
18     <div class="clear"></div>
19 </div>

------------------------------------------------------------------------------------------------------------------------------------------------------------

展示

------------------------------------------------------------------------------------------------------------------------------------------------------------

 

 

转载于:https://www.cnblogs.com/CoffeeEddy/p/9574000.html