目录

最近一些效果的实现

目录

楼层定位效果

 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
const leftNav = {
    $newLeftNav: $('.left-nav'),
    $leftNav: $('.left-nav-item'),
    init: function () {
        this.bind();
    },
    bind: function () {
        const self = this;
        self.$leftNav.on('click', function () {
            const _this = this;
            const area = '.' + $(_this).attr('data-area');
            const distance = $(_this).attr('data-area') ? $(area).offset().top : 0;
            $('html, body').animate({
                'scrollTop': distance + 'px'
            }, 1000);
        });
        self.handlePageScroll();
        $(document).scroll(function () {
            self.debounce(self.handlePageScroll, 200);
        });
    },
    // 页面滑动选中左侧导航栏
    handlePageScroll: function () {
        const self = this;
        let scrollEl = $(document.scrollingElement || document.body);
        let top = scrollEl.scrollTop();
        if (top > $('.daily_recom').offset().top) {
            self.$newLeftNav.fadeIn();
        } else {
            self.$newLeftNav.fadeOut();
        }
        let area = null;
        let floor = null;
        let nav = null;
        for (let i = self.$leftNav.length - 1; i >= 0; i--) {
            nav = self.$leftNav.eq(i);
            area = nav.attr('data-area');
            floor = $('.' + area);
            if (!floor || !floor.length) {
                continue;
            } else if (floor.offset().top <= top) {
                nav.addClass('active').siblings().removeClass('active');
                return;
            }
        }
        nav && nav.addClass('active').siblings().removeClass('active');
    },
    // 防抖函数
    debounce: function (action, delay) {
        let lastTimer;
        if (lastTimer) {
            return;
        }
        action.apply(this, arguments);
        lastTimer = setTimeout(function () {
            clearTimeout(lastTimer);
            lastTimer = null;
        }, delay);
    }
}

leftNav.init();

可拖动的效果

 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
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #box {
            position: absolute;
            top: 100px;
            left: 100px;

            width: 100px;
            height: 100px;

            background: orange;
        }
    </style>
</head>

<body>
    <div id="box">

    </div>
    <script>
        $(function () {
            //创建小方块的jquery对象
            var $box = $("#box");
            //创建小方块的鼠标点按下事件
            $box.on('touchstart', function (e) {
                //获取鼠标按下的时候左侧偏移量和上侧偏移量
                var touch = e.originalEvent.targetTouches[0];
                var old_left = touch.pageX; //左侧偏移量
                var old_top = touch.pageY; //竖直偏移量

                //获取鼠标的位置
                var old_position_left = $(this).position().left;
                var old_position_top = $(this).position().top;

                //鼠标移动
                $box.on('touchmove', function (e) {
                    var touch = e.originalEvent.targetTouches[0];
                    var new_left = touch.pageX; //新的鼠标左侧偏移量
                    var new_top = touch.pageY; //新的鼠标竖直方向上的偏移量

                    //计算发生改变的偏移量是多少
                    var chang_x = new_left - old_left;
                    var change_y = new_top - old_top;

                    //计算出现在的位置是多少

                    var new_position_left = old_position_left + chang_x;
                    var new_position_top = old_position_top + change_y;
                    //加上边界限制
                    if (new_position_top < 0) { //当上边的偏移量小于0的时候,就是上边的临界点,就让新的位置为0
                        new_position_top = 0;
                    }
                    //如果向下的偏移量大于文档对象的高度减去自身的高度,就让它等于这个高度
                    if (new_position_top > $(document).height() - $box.height()) {
                        new_position_top = $(document).height() - $box.height();
                    }
                    //右限制
                    if (new_position_left > $(document).width() - $box.width()) {
                        new_position_left = $(document).width() - $box.width();
                    }
                    if (new_position_left < 0) { //左边的偏移量小于0的时候设置 左边的位置为0
                        new_position_left = 0;
                    }

                    $box.css({
                        left: new_position_left + 'px',
                        top: new_position_top + 'px'
                    })
                });
                $box.on('touchend', function () {
                    $(this).off("mousemove");
                })
            });
        })
    </script>

</body>

</html>