找回密码
当前位置：前端开发者 > 教程 > 正文

前端开发封装全屏滚动插件

2018-12-15 分类：教程 阅读(567) 评论(0)
类似美团的前端开发流程
前端开发完整流程
前端开发流程规范
<!DOCTYPE html>
<html lang=”en”>
    <head>
        <meta charset=”UTF-8″ />
        <title>支付托</title>
        <script src=”js/jquery-2.1.1.min.js”></script>
        <style type=”text/css”>
            html,
            body {
                width: 100%;
                height: 100%;
                margin: 0;
                padding: 0;
            }
            body {
                overflow: hidden;
            }
            .pages {
                width: 100%;
                height: 100%;
                margin: 0;
                padding: 0;
                list-style: none;
                transform: translateY(0%);
                transition: all 0.5s;
            }
            .pages > li {
                width: 100%;
                height: 100%;
            }
            .pages > li > .page {
                width: 100%;
                height: 100%;
            }
            .buttons {
                position: fixed;
                right: 0;
                top: 50%;
                margin-top: -60px;
                list-style: none;
            }
            .buttons > li {
                width: 10px;
                height: 10px;
                margin: 8px;
                border: 1px solid #cccccc;
                border-radius: 50%;
                background-color: #fff;
                cursor: pointer;
            }
            .buttons > li.active {
                background-color: blue;
            }
        </style>
    </head>
    <body>
        <div id=”page1″ style=”background-color:#000000″></div>
        <div id=”page2″ style=”background-color:#444444″></div>
        <div id=”page3″ style=”background-color:#666666″></div>
        <div id=”page4″ style=”background-color:#999999″></div>
        <div id=”page5″ style=”background-color:#00ff00″></div>
        <div id=”page6″ style=”background-color:green”></div>
        <script type=”text/javascript”>
            var _defaults = {
                effect: 500,
                pages: [],
                cur: 0,
                _lock: false,
            }
            var methods = {
                init: function() {
                    var _this = this
                    this.addClass(‘dn-scroller’)
                    this.$pages = $(“<ul class=’pages’></ul>”)
                    this.$buttons = $(“<ul class=’buttons’></ul>”)
                    $.each(this.pages, function(i, data) {
                        var $li = $(‘<li></li>’)
                        $li.append($(data).addClass(‘page’))
                        _this.$pages.append($li)
                        _this.$buttons.append(
                            “<li class='” +
                                (i == 0 ? ‘active’ : ”) +
                                “‘></li>”,
                        )
                    })
                    this.append(this.$pages)
                    this.append(this.$buttons)
                },
                _scroll: function() {
                    var _this = this
                    this.$pages.css({
                        transform: ‘translateY(-‘ + this.cur + ‘00%)’,
                    })
                    this._lock = true
                    window.setTimeout(function() {
                        _this._lock = false
                        _this.$buttons
                            .find(‘:eq(‘ + _this.cur + ‘)’)
                            .addClass(‘active’)
                            .siblings()
                            .removeClass(‘active’)
                    }, this.effect)
                },
                _handle: function() {
                    var _this = this
                    this.on(‘mousewheel’, function(e) {
                        if (_this._lock) return
                        if (e.originalEvent.wheelDelta < 0) {
                            if (_this.cur == _this.pages.length – 1) {
                                return
                            }
                            _this.cur++
                        } else {
                            if (_this.cur == 0) {
                                return
                            }
                            _this.cur–
                        }
                        _this._scroll()
                    })
                    this.$buttons.find(‘li’).on(‘click’, function() {
                        _this.cur = $(this).index()
                        _this._scroll()
                    })
                },
            }
            $.fn.dn_scroll = function(options) {
                this.extend(methods) //集成 method是方法
                this.extend(_defaults)
                this.extend(options)
                this.init()
                this._handle()
            }
            $(function() {
                $(‘body’).dn_scroll({
                    effect: 800,
                    pages: [
                        ‘#page1’,
                        ‘#page2’,
                        ‘#page3’,
                        ‘#page4’,
                        ‘#page5’,
                        ‘#page6’,
                    ],
                })
            })
        </script>
    </body>
</html>
web前端开发大体流程
前端工程化开发流程图
前端开发工程流程
赞(0)
前端开发者 » 前端开发封装全屏滚动插件
64K
标签：前端开发者

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

 

最新评论