笔记

# JavaScript 文档

这里是 JavaScript 的文档内容。

# 美洽唤起客服

  • 比如你要让一个链接 a 点击后唤起美洽，可以这样写：
<a href="javascript:void(0)" class="open-meiqia">联系客服</a>

<script>
document.querySelector('.open-meiqia').addEventListener('click', function(e) {
    e.preventDefault();
    _MEIQIA('showPanel');
});
</script>
  • 如果你有多个 a 链接都需要唤起，就给它们一个公共 class：
<a href="#" class="mq-link">咨询1</a>
<a href="#" class="mq-link">咨询2</a>
<a href="#" class="mq-link">咨询3</a>

<script>
document.querySelectorAll('.mq-link').forEach(function(el) {
    el.addEventListener('click', function(e) {
        e.preventDefault();
        _MEIQIA('showPanel');
    });
});
</script>
  • 这样所有 .mq-link 点击都会直接打开美洽聊天面板。

# 视频自适应

<div class="swiper-slide-video">
    <video src="{!! inject('block')->block('hm-video', 'extend') !!}" autoplay muted loop></video>
</div>

<style>
    .swiper-slide-video {
        position: relative; 
        padding-bottom: 41.5625%; /* 宽度/高度 */

    }
    .swiper-slide-video video {
        position: absolute;
        left: 0;
        top: 0;
        height: 100%;
        width: 100%;
        object-fit: cover;
    }
</style>

# 常用js

//返回头部
$(".scroll_to_top2").click(function() { //当点击跳转链接后，回到页面顶部位置
    $('body,html').animate({
        scrollTop: 0
    }, 400);
    return false;
});

$(".ss_btn").click(function() {
    $(".search-box").slideToggle();
});

//导航条固定在头部
if ($(window).scrollTop() > 0) {
    $('.header').addClass('scroll');
}
$(window).scroll(function() {
    var len = $(this).scrollTop();
    if (len > 0) {
        $('.header').addClass('scroll');
    } else {
        $('.header').removeClass('scroll')
    }
});


/* 导航下拉 */
$(function() {
    $(".x-menu>li").hover(function() {
        $(this).find('.x-sub-menu').stop(true).slideDown(300);
    }, function() {
        $(this).find('.x-sub-menu').stop(true).slideUp(300);
    });
});


// 内页手机端端 做的导航弹出特效
$(".xymob-page-navbtn").click(function(){
    $(".xymob-menu-click").addClass('click');
    $('html,body').addClass('no-scroll');
});
$(".xymob-left-close-btn").click(function(){
    $(".xymob-menu-click").removeClass('click');
    $('html,body').removeClass('no-scroll');
});

# 视口检测动画

$(function() {
    /* ----------- 视口检测动画 ----------- */
    var $animation_elements = $(".site-footer");
    var $window = $(window);

    function check_if_in_view() {
        var window_height = $window.height();
        var window_top_position = $window.scrollTop();
        var window_bottom_position = window_top_position + window_height;

        $.each($animation_elements, function() {
            var $element = $(this);
            var element_top_position = $element.offset().top;
            var element_bottom_position = element_top_position + $element.outerHeight();

            if (element_bottom_position >= window_top_position && element_top_position <= window_bottom_position) {
                $element.addClass("active");
            } else {
                $element.removeClass("active");
            }
        });
    }

    $window.on("scroll resize", check_if_in_view);
    $window.trigger("scroll");

});

# 鼠标悬停

//>> Mouse Cursor Start <<//
function mousecursor() {
    if ($("body")) {
        const e = document.querySelector(".cursor-inner"),
            t = document.querySelector(".cursor-outer");
        let n,
            i = 0,
            o = !1;
        (window.onmousemove = function(s) {
            o ||
                (t.style.transform =
                    "translate(" + s.clientX + "px, " + s.clientY + "px)"),
                (e.style.transform =
                    "translate(" + s.clientX + "px, " + s.clientY + "px)"),
                (n = s.clientY),
                (i = s.clientX);
        }),
        $("body").on("mouseenter", "a, .cursor-pointer", function() {
                e.classList.add("cursor-hover"), t.classList.add("cursor-hover");
            }),
            $("body").on("mouseleave", "a, .cursor-pointer", function() {
                ($(this).is("a") && $(this).closest(".cursor-pointer").length) ||
                (e.classList.remove("cursor-hover"),
                    t.classList.remove("cursor-hover"));
            }),
            (e.style.visibility = "visible"),
            (t.style.visibility = "visible");
    }
}
$(function() {
    mousecursor();
});

/* mouse */
.mouse-cursor{position:fixed;left:0;top:0;pointer-events:none;border-radius:50%;-webkit-transform:translateZ(0);transform:translateZ(0);visibility:hidden}
.cursor-inner{width:6px;height:6px;z-index:10000001;background-color:#f19d00;-webkit-transition:width .3s ease-in-out,height .3s ease-in-out,margin .3s ease-in-out,opacity .3s ease-in-out;-o-transition:width .3s ease-in-out,height .3s ease-in-out,margin .3s ease-in-out,opacity .3s ease-in-out;transition:width .3s ease-in-out,height .3s ease-in-out,margin .3s ease-in-out,opacity .3s ease-in-out}
.cursor-inner.cursor-hover{margin-left:-35px;margin-top:-35px;width:70px;height:70px;background-color:#f19d00;opacity:.3}
.cursor-outer{margin-left:-12px;margin-top:-12px;width:30px;height:30px;border:1px solid #f19d00;-webkit-box-sizing:border-box;box-sizing:border-box;z-index:10000000;opacity:.5;-webkit-transition:all 80ms ease-out;-o-transition:all 80ms ease-out;transition:all 80ms ease-out}
.cursor-outer.cursor-hover{opacity:0}

# tab切换

<style type="text/css">
    .tab-con { position: relative; }
    .tab-con .tab-main { position: absolute; left: 0; top: 0; z-index: 9; right: 0;}
    .tab-con .tab-main { opacity: 0; visibility: hidden; transition: all .5s ease; }
    .tab-con .tab-main.active { position: static; opacity: 1; visibility: visible; }
</style>

<script type="text/javascript">
    /* tab 切换特效 */
    $(".tab-li li").eq(0).addClass('active');
    $(".tab-con .tab-main").eq(0).addClass('active');
    $(".tab-li li").hover(function(){
        var _id = $(this).index();
        $(this).addClass('active').siblings().removeClass('active');
        $(".tab-con .tab-main").eq(_id).addClass('active').siblings().removeClass('active');
    });
</script>

# 表格自适应

<script>
    var e = $(".xypg-right-content table");
    var len = e.length;
    for (var i = 0; i < len; i++) {
        $(".xypg-right-content  table").eq(i).wrap('<div style="overflow-y:hidden;"></div>')
    }
</script>

# 防复制

<script>document.body.onselectstart=document.body.oncontextmenu=function(){return false;};</script>

# js判断屏幕大小

<script type="text/javascript">
    //定义变量获取屏幕视口宽度
    var windowWidth = $(window).width();
    if(windowWidth < 640){
        // do something
    }
    if(windowWidth >= 640){
        // do something
    }
</script>

# 导航固定

<script type="text/javascript">
   //导航条固定在头部
    if ($(window).scrollTop() > 30) {
        $('.nav_wap').addClass('scroll');
    }
    $(window).scroll(function() {
        var len = $(this).scrollTop();
        if (len > 30) {
            $('.nav_wap').addClass('scroll');
        } else {
            $('.nav_wap').removeClass('scroll')
        }
    });
</script>

# 日期时间

<!-- 日期时间 -->
<div class="saictime" id="divT">日历</div>

<script>
    //日期时间
    function getCurDate() {
        var d = new Date();
        var week;
        switch (d.getDay()) {
            case 1:
                week = "星期一";
                break;
            case 2:
                week = "星期二";
                break;
            case 3:
                week = "星期三";
                break;
            case 4:
                week = "星期四";
                break;
            case 5:
                week = "星期五";
                break;
            case 6:
                week = "星期六";
                break;
            default:
                week = "星期天";
        }
        var years = d.getFullYear();
        var month = add_zero(d.getMonth() + 1);
        var days = add_zero(d.getDate());
        var hours = add_zero(d.getHours());
        var minutes = add_zero(d.getMinutes());
        var seconds = add_zero(d.getSeconds());
        var ndate = years + "年" + month + "月" + days + "日 " + week;
        //divT.innerHTML= ndate;
        $("#divT").html(ndate);
    }

    function add_zero(temp) {
        if (temp < 10) return "0" + temp;
        else return temp;
    }
    setInterval("getCurDate()", 100);
</script>