sifangpay/resources/views/web/index/index.blade.php

@extends('web.layouts.base')


@section('content')
    <!-- 分区 -->
    <div class="sectionwrap" data-num="0">
        <div class="section" id="main">
            <div class="colormask">
                <div class="textwrap">
                    <p class="index-content">更懂用户更懂创业者的</p>
                    <p class="index-content">互联网产品解决方案服务平台</p>
                    <p class="index-content">专注微信、互联网+ 功能开发与运营</p>
                </div>
            </div>
        </div>
        <div class="section" id="sec01">
            <div class="colormask">
                <div class="textwrap">
                    <p class="index-title">网站建设服务</p>
                    <p class="index-content">一家定制开发的服务</p>
                    <a target="_blank" href="{{ route('web.server') }}" title="网站建设服务"><span class="contact transition">进入平台</span></a>
                </div>
            </div>
        </div>
        <div class="section" id="sec02">
            <div class="colormask">
                <div class="textwrap">
                    <p class="index-title">小程序</p>
                    <p class="index-content">微信小程序在线极速生成平台</p>
                    <a href="{{ route('web.server') }}" title=""><span class="contact transition">选择服务</span></a>
                </div>
            </div>
        </div>

        <div class="section" id="sec04">
            <div class="colormask">
                <div class="textwrap hellowrap">
                    <h1>GO</h1>
                    <a href="{{ route('web.server') }}" title=""><span class="contact transition">其他服务</span></a>
                </div>
            </div>
        </div>
    </div>
    <!-- 状态 -->
    <div id="zhuangt" class="status hidden-sm hidden-xs">
        <ul>
            <li><span class="status_bar select"></span></li>
            <li><span class="status_bar"></span></li>
            <li><span class="status_bar"></span></li>
            <li><span class="status_bar"></span></li>

        </ul>
    </div>
    <!-- 下一页 -->
    <span class="nextbtn transition"><i class="fa fa-angle-down"></i></span>

    <ul class="bg-bubbles">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
    <!-- 右侧客服浮窗 -->
    <div class="gwc-celan">
        <ul>
            <a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=442432578&site=qq&menu=yes">
                <li>
                    <img class="a3" src="image/gwc-wx.svg" alt="QQ客服">
                </li>
            </a>
        </ul>
    </div>

@endsection
@section('foot_js')
    <script src="{{ $style_path }}/js/home.js"></script>
    <script>
        $(document).ready(function() {
            /*设置首页Warp高度*/
            var winHeight = $(window).height();
            var winWidth = $(window).width();
            $("div.wraper, div.sectionwrap, div.section, div.colormask").height(winHeight);
            $(window).resize(function() {
                var winHeight = $(window).height();
                var winWidth = $(window).width();
                $("div.wraper, div.sectionwrap, div.section, div.colormask").height(winHeight);
            });

            $('.gwc-celan').hide();

        });

        /*鼠标滚珠上下滑动*/
        var topx = 0
        var status = 0;
        $total=3;
        $(window).bind('mousewheel DOMMouseScroll', function(event) {
            var obj = $("div.sectionwrap");
            var num = obj.attr('data-num') * 1;
            var winHeight = $(window).height();
            if (event.originalEvent.wheelDelta > 0 || event.originalEvent.detail < 0) {
                if (num > 0 && status == 0) {
                    status = 1;
                    topx = -(num - 1) * winHeight;
                    obj.css('top', topx + "px");
                    $('#zhuangt li').find('span').removeClass('select');
                    $('#zhuangt li').eq(num - 1).find('span').addClass('select');
                    setTimeout(function() {
                        status = 0;
                        obj.attr('data-num', num - 1);
                        if (num === 4) {
                            $('.nextbtn').find('i').attr('class', 'fa fa-angle-down');
                        };
                    }, 800);
                };
            } else {
                if (num < $total && status == 0) {
                    status = 1;
                    topx = -(num + 1) * winHeight;
                    obj.css('top', topx + "px");
                    $('#zhuangt li').find('span').removeClass('select');
                    $('#zhuangt li').eq(num + 1).find('span').addClass('select');
                    setTimeout(function() {
                        status = 0;
                        obj.attr('data-num', num + 1);
                        if (num === 3) {
                            $('.nextbtn').find('i').attr('class', 'fa fa-angle-up');
                        };
                    }, 800);
                };
            }
        });

        $('.nextbtn').click(function() {
            $(this).css('background', 'rgba(0,0,0,0.3)');
            setTimeout(function() {
                $('.nextbtn').css('background', 'none');
            }, 100);
            var obj = $("div.sectionwrap");
            var num = obj.attr('data-num') * 1;
            var winHeight = $(window).height();
            if (num < $total && status == 0) {
                status = 1;
                topx = topx - winHeight;
                obj.css('top', topx + "px");
                $('#zhuangt li').find('span').removeClass('select');
                $('#zhuangt li').eq(num + 1).find('span').addClass('select');
                setTimeout(function() {
                    status = 0;
                    obj.attr('data-num', num + 1);
                    if (num === 3) {
                        $('.nextbtn').find('i').attr('class', 'fa fa-angle-up');
                    };
                }, 600);
            }
            if (num == $total && status == 0) {
                status = 1;
                topx = 0;
                obj.css('top', "0px");
                $('#zhuangt li').find('span').removeClass('select');
                $('#zhuangt li').eq(0).find('span').addClass('select');
                setTimeout(function() {
                    status = 0;
                    obj.attr('data-num', 0);
                    $('.nextbtn').find('i').attr('class', 'fa fa-angle-down');
                }, 600);
            };
        });

        $('#zhuangt li').click(function() {
            var obj = $("div.sectionwrap");
            var num = $(this).index();
            var winHeight = $(window).height();
            status = 1;
            topx = -(num * winHeight);
            obj.stop().animate({
                top: topx + "px"
            }, 300, function() {
                status = 0;
                obj.attr('data-num', num);
                $('#zhuangt li').find('span').removeClass('select');
                $('#zhuangt li').eq(num).find('span').addClass('select');
            });
            obj.css('top', topx + "px");
            $('#zhuangt li').find('span').removeClass('select');
            $('#zhuangt li').eq(num).find('span').addClass('select');
            setTimeout(function() {
                status = 0;
                obj.attr('data-num', num);
                if (num === 3) {
                    $('.nextbtn').find('i').attr('class', 'fa fa-angle-up');
                } else {
                    $('.nextbtn').find('i').attr('class', 'fa fa-angle-down');
                };
            }, 600);

        });
        $(".header").css({
            'position':'fixed'
        })
    </script>
    @endsection