JS响应式时间轴特效代码下载


JS响应式时间轴特效代码下载
JS响应式时间轴特效代码下载以及响应式时间轴等js/jquery网页特效代码下载。

1. 引入CSS

<link href="css/style.css" rel="stylesheet" type="text/css" />

2. 引入JS

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/vue.min.js"></script>

3. HTML代码

    <div class="ui-timeLine">
        <a v-for="item in 15" class="item">
            <div class="line"></div>
            <div class="dot"></div>
            <div class="box">
                <div class="cbox">
                    <div class="date">{{item.date}}date</div>
                    <div class="title">{{item.title}}title{{item}}</div>
                    <div class="types">
                        <span>{{"type"}}</span>
                    </div>
                </div>
            </div>
        </a>
        <div class="activeLine"></div>
    </div>
    <script>
        (function($) {
            $.fn.uiTimeLine = function() {
                var $timeLine = $(".ui-timeLine");
                var $activeLine = $(".ui-timeLine .activeLine");
                var $dots = $(".ui-timeLine .dot");
                var $cboxs = $(".ui-timeLine .item .cbox");
                return this.each(function() {
                    function setActiveLineHeight() {
                        let height = $(document).scrollTop() + window.screen.height;
                        let j = 0;
                        for (let i = 0; i < $dots.length; i++) {
                            if ($($dots[i]).offset().top < height) {
                                $($($dots[i])).addClass("active");
                                $($cboxs[i]).css({
                                    "left": 0
                                });
                                j = i;
                            } else {
                                $($($dots[i])).removeClass("active")
                                $($cboxs[i]).css({
                                    "left": "100vw"
                                });
                            }
                        }
                        $activeLine.css({
                            "height": $($dots[j]).offset().top - $timeLine.offset().top + 40 + "px"
                        })
                    }
                    $(window).on('scroll', setActiveLineHeight);
                    setActiveLineHeight();
                })
            }
        })(jQuery);
    </script>
    <script>
        var vue_data = new Vue({
            el: ".ui-timeLine",
            data: {
                items: ["32", "21", "131", "", "", "", "", "", "", "", "", "", ""],
            },
            mounted: function() {
                $(".ui-timeLine").uiTimeLine();
            },
        });
    </script>

相关推荐

发表评论

相关文章