分类 HTML&CSS 下的文章

CSS

.dragWindow{
min-width:300px;
min-height: 240px;
position: absolute;
z-index: 9999;
}

HTML

<div class="dragWindow" style="width: 320px">
    可拖动窗口
</div>

JS

(function($){
window.dwInit = function (){
    $.dw = document.querySelector('.dragWindow');
    if(!$.dw){
        console.log('drag-window 未启用');
        return;
    }
    console.log('drag-window 已启用');
    //判断鼠标是否按下
    $.p = false;
    //鼠标按下处在页面中的水平偏移
    $.dx = 0;
    //鼠标按下处在页面中的垂直偏移
    $.dy = 0;
    //div在页面中的水平偏移
    $.sx = 0;
    //div在页面中的垂直偏移
    $.sy = 0;

    //鼠标按下时
    $.dw.onmousedown = function(e){
        if (!$.p) {
            $.p = true;
        }
        //处理兼容性和滚动条
        let event = e || window.event;
        let scrollLeft = document.documentElement.scrollLeft;
        let scrollTop = document.documentElement.scrollTop;
        let pageX = event.pageX || event.clientX + scrollLeft;
        let pageY = event.pageY || event.clientY + scrollTop;
        $.dx = pageX;
        $.dy = pageY;
        $.sx = $.dw.offsetLeft;
        $.sy = $.dw.offsetTop;
    }

    //鼠标移动时
    document.onmousemove = function(e){
        if ($.p) {
            let event = e || window.event;
            let scrollLeft = document.documentElement.scrollLeft;
            let scrollTop = document.documentElement.scrollTop;
            let pageX = event.pageX || event.clientX + scrollLeft;
            let pageY = event.pageY || event.clientY + scrollTop;
            $.dw.style.left = pageX - ($.dx - $.sx) + 'px';
            $.dw.style.top = pageY - ($.dy - $.sy) + 'px';
        }
    }

    //鼠标松开时
    document.onmouseup = function(){
        if ($.p) {
            $.p = false;
        }
    }
    window.dragWindow = $;
}

})({})

初始化

initDw(){
            let si = setInterval(function(){
                if (window.dwInit) {
                    clearInterval(si);
                    dwInit();
                }
            })
        }

1、选择列表中的偶数标签 :nth-child(2n)
2、选择列表中的奇数标签 :nth-child(2n-1)<br/>
3、选择从第6个开始的,直到最后:nth-child(n+6)<br/>
4、选择第1个到第6个 :nth-child(-n+6)<br/>
两者结合使用,可以限制选择某一个范围,选择第6个到第9个 :nth-child(n+6):nth-child(-n+9)

版权声明:本文为CSDN博主「幽幽靖」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/ws19900201/article/details/107230687/

vant和spectre.css在一起的时候会导致vant的dateTimePicker的样式有冲突。

看着不舒服,操作上也有问题。

我估计不会有人把这两样东西放在一起用吧……

如果有人用那么其实很好解决:

ol li, ul li{
    margin-top:0!important;
}

就这么愉快的搞定了。

看一下前后对比:

解决前

解决后