移动端

UIPanel插件

/* eslint-disable linebreak-style */
/* eslint-disable consistent-this */
/* eslint-disable func-names */
/* eslint-disable func-style */
/* eslint-disable no-use-before-define */
import defaultImg from '../assets/index.png';

// 判断设备平台
function isMobile() {
    if (window.navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i)) {
        return true; // 移动端
    } else {
        return false; // PC端
    }
}

// 初始值
const cutImages = [
    defaultImg
];
//图片参数
// const cutImages = ['https://x0.ifengimg.com/ucms/2021_48/DCB8502A842C4DC39CDA2F2877C055ABF2495938_size860_w750_h1834.png']

// UI走查工具
export default function UiPlug(cutImages) {
    this.root = document.querySelector('body');
    // 获取根fontsize
    this.rootFZ = document.documentElement.style.fontSize
        ? document.documentElement.style.fontSize.replace('px', '')
        : 37.5;

    // 初始值
    this.show = false; // 是否显示蒙层
    this.currentImg = 0; // 当前图片索引
    this.curPer = 0.6; // 当前透明度
    this.cutImages = cutImages || []; // 图片集
    this.imgFixed = false; // 是否固定图片位置
    this.scrollTogther = false; // 是否一起滚动

    // 方法：创建ui-div标签并指定类型
    this.createEle = function (ele, cls) {
        const resEle = document.createElement(ele || 'ui-div');

        if (cls) {
            resEle.classList.add(cls);
        }

        return resEle;
    };

    // （ui）容器
    this.initUiplug = function () {
        this.uiPlug_root = null;
        if (document.querySelector('#UIPlug_root')) {
            this.uiPlug_root = document.querySelector('#UIPlug_root');
        } else {
            this.uiPlug_root = this.createEle('ui-div', 'UIPlug_root');
            this.root.appendChild(this.uiPlug_root);
            this.uiPlug_root.id = 'UIPlug_root';
        }

        // 初始化按钮
        this.ui_plg_btn = this.createEle('ui-div');
        this.ui_plg_btn.classList.add('ui_plg_btn');
        this.ui_plg_btn.innerHTML = '<ui-div class="ui">UI</ui-div><ui-div class="close"></ui-div>';
        this.uiPlug_root.appendChild(this.ui_plg_btn);

        // 初始化图片蒙层
        this.img = this.createEle('img');
        this.img.src = this.cutImages[this.currentImg]; // 初始化图片为第一张

        // 设置图片样式
        this.img.setAttribute('id', 'ui_img');
        // 平台判断
        if (isMobile()) {
            this.img.style.width = '100%';
        } else {
            this.img.style.width = '1920px';
        }
        this.img.style.opacity = this.curPer;
        this.img.style.position = 'absolute';
        this.img.style.top = 0;
        this.img.style.zIndex = 9999;
        this.img.style.pointerEvents = 'none';
        this.root.appendChild(this.img);

        // 自适应计算图片位置
        const _this = this;

        function imgSelf() {
            console.log(1);
            // 获取屏幕宽度1920 A
            const clientWidth = parseInt(_this.img.style.width, 10);
            // 获取正文宽度 B
            const bodyWidth = document.body.scrollWidth;
            // 计算图片移动的位移 C
            const imgLeft = clientWidth - bodyWidth;

            _this.img.style.left = `-${imgLeft}px`;
        }
        // 监听屏幕变换

        window.addEventListener('resize', init);
        // 定义函数

        function init() {
            imgSelf();
        }

        // 初始化功能模块
        this.ui_model = this.createEle('ui-div', 'ui_model');
        this.uiPlug_root.appendChild(this.ui_model);
        // 上传按钮
        this.upload = this.createEle('ui-div', 'ui_upload');
        this.upload.innerHTML = `<span>+</span>
                                    <span>上传</span>
                                    <input type="file" style="display: none" accept="image/*"/>
                                    `;

        this.ui_model.appendChild(this.upload);
        // 不透明度按钮
        this.alpha = this.createEle('ui-div', 'ui_alpha');
        this.alpha.innerHTML = '<input type="text" value="60"/><span>透</span>';
        this.ui_model.appendChild(this.alpha);
        // 锁定按钮
        this.lock = this.createEle('ui-div', 'ui_lock');
        this.lock.innerHTML = '<input type="checkbox" checked/><span>锁定</span>';
        this.ui_model.appendChild(this.lock);
        // 跟随按钮
        this.flow = this.createEle('ui-div', 'ui_flow');
        this.flow.innerHTML = '<input type="checkbox"/><span>跟随</span>';
        this.ui_model.appendChild(this.flow);
        // 上页下页
        this.page = this.createEle('ui-div', 'ui_page');
        this.page.innerHTML = `
                                <div class="ui_add">+</div>
                                <div class="ui_sub">-</div>
                                `;
        this.ui_model.appendChild(this.page);
        // 页数
        this.imgNum = this.createEle('ui-div', 'ui_imgNum');
        this.imgNum.innerHTML = `<span>1/${this.cutImages.length}</span>`;
        this.ui_model.appendChild(this.imgNum);

        // 绑定事件
        this.switchPlug(); // 按钮逻辑
        this.uploadPlug(); // 上传逻辑
        this.alphaPlug(); // 不透明度逻辑
        this.lockPlug(); // 锁定逻辑
        this.flowPlug(); // 跟随逻辑
        this.pagePlug(); // 上下页逻辑

        this.img.style.display = 'none';
    };

    // （逻辑）按钮
    this.switchPlug = function (params) {
        const _this = this;

        const uiBtn = document.querySelector('.UIPlug_root .ui_plg_btn .ui');
        const closeBtn = document.querySelector('.UIPlug_root .ui_plg_btn .close');

        // 监听点击事件
        uiBtn.addEventListener('click', (e) => {
            if (_this.show) {
                _this.img.style.display = 'none';
                _this.show = false;
            } else {
                _this.img.style.display = 'block';
                _this.show = true;
            }
        });

        // 不展示按钮
        closeBtn.addEventListener('click', (e) => {
            _this.uiPlug_root.parentElement.removeChild(_this.uiPlug_root);
            _this.img.parentElement.removeChild(_this.img);
        });
    };

    // (逻辑) 上传
    this.uploadPlug = function () {
        const _this = this;
        // 获取元素
        const uploadBtn = document.querySelector('.UIPlug_root .ui_upload');
        const input = document.querySelector('.UIPlug_root .ui_upload input');
        const num = document.querySelector('.UIPlug_root .ui_imgNum');

        // 事件监听
        uploadBtn.addEventListener('click', (e) => {
            input.click();
        });
        input.addEventListener('change', (e) => {
            const file = e.target.files[0];
            const reader = new FileReader();

            reader.readAsDataURL(file);
            reader.onload = function (e) { // 成功读取文件
                _this.cutImages.push(e.target.result);
            };

            num.innerHTML = `${_this.currentImg + 1}/${this.cutImages.length + 1}`;
        });
    };

    // (逻辑) 设置alpha
    this.alphaPlug = function () {
        const _this = this;
        const alphaInput = document.querySelector('.UIPlug_root .ui_alpha input');

        alphaInput.addEventListener('change', (e) => {
            const value = e.target.value;

            console.log(value);
            _this.img.style.opacity = value * 0.01;
            console.log(_this.img.style.opacity);
        });

    };

    // (逻辑) 设置lock
    this.lockPlug = function () {
        const _this = this;
        const lockInput = document.querySelector('.UIPlug_root .ui_lock input');

        lockInput.addEventListener('click', (e) => {
            const value = e.target.checked;

            if (!value) { // 固定
                const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;

                _this.img.style.position = 'fixed';
                _this.img.style.top = `${-scrollTop}px`;

                _this.imgFixed = true;
            } else {
                _this.img.style.position = 'absolute';
                _this.img.style.top = 0;

                _this.imgFixed = false;
            }
        });
    };

    // (逻辑) 设置跟随
    this.flowPlug = function () {
        const _this = this;
        const flowInput = document.querySelector('.UIPlug_root .ui_flow input');

        // 重新设置图片跟随
        flowInput.addEventListener('click', (e) => {
            const value = e.target.checked;
            const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
            const img_y = _this.img.getBoundingClientRect().y;

            if (value) { // 跟随
                _this.img.style.position = 'absolute';
                _this.img.style.top = `${scrollTop + img_y}px`;

                _this.scrollTogther = true;
            } else {
                _this.img.style.position = 'fixed';
                _this.img.style.top = `${img_y}px`;
                _this.scrollTogther = false;
            }
        });
    };

    // (逻辑) 设置上下页
    this.pagePlug = function () {
        const _this = this;

        const addBtn = document.querySelector('.UIPlug_root .ui_page .ui_add');
        const subBtn = document.querySelector('.UIPlug_root .ui_page .ui_sub');
        const num = document.querySelector('.UIPlug_root .ui_imgNum');

        // 上一页
        addBtn.addEventListener('click', () => {
            change(true);
        });
        // 下一页
        subBtn.addEventListener('click', () => {
            change(false);
        });

        function change(add) {
            const imgsLength = _this.cutImages.length;

            if (add && _this.currentImg + 1 < imgsLength) { // +1
                _this.currentImg += 1;
                if (_this.imgFixed) {
                    this.lockPlug();
                }
            } else if (add === false && _this.currentImg + 1 > 1) { // -1
                _this.currentImg -= 1;
                if (_this.imgFixed) {
                    this.lockPlug();
                }
            }

            _this.img.src = _this.cutImages[_this.currentImg];
            num.innerHTML = `${_this.currentImg + 1}/${imgsLength}`;
        }

    };

    // 初始化容器
    this.initUiplug();
}

// 判断document是否解析完成(二选一)
document.onreadystatechange = function () {
    if (document.readyState === 'interactive') { // interactive可交互:文档已被解析，DOM元素可以被访问。
        new UiPlug(cutImages);
    }
};

// 判断document是否解析完成(二选一)
// if (document.readyState === 'interactive') { // interactive可交互:文档已被解析，DOM元素可以被访问。
//     new UiPlug(cutImages);
// }

// style标签
const style = document.createElement('style');

style.type = 'text/css';
style.innerHTML =
    `
    .ui-div { 
        display: block; 
    }
    
    .UIPlug_root .ui_plg_btn {
        box-sizing: border-box;
        position: fixed;
        right: 0;
        top: 60%;
        background: linear-gradient(135deg, rgba(112, 112, 119, 0.3) 0%, rgba(71, 72, 78, 0.2) 100%);
        width: 55px;
        height: 55px;
        border-radius: 50% 0 0 50%;
        border: 1px solid #eee;
        padding: 10px 0 10px 10px;
        display: flex;
        align-items: center;
        z-index: 10000;
    } 
    
    .UIPlug_root .ui { 
        font-family: PingFang-SC-Bold,PingFang-SC, PingFangSC-Regular;
        background: #eee;
        width: 30px;
        height:30px;
        border-radius: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 20px;
        font-weight: bold;
        color: rgba(112, 112, 119, .3);
        cursor:pointer;
    }
    
    .UIPlug_root .close { 
        width: 5px;
        height:5px;
        margin-left: 4px;
        background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAWBJREFUSA2tlrFugzAURbHXqF2Av0kz02RvNz6Jj2CM1G5Nu1VK+RtgZIXciwCZxMYvoZYcLPx8jmM/O1FZlv0GQdBEUfSepmmD9uqS5/mmqqojQBuNj6brukNZlid2rKUP8G8w92RrzhyNM+purYRwMgB/IRPsN4VGMHZQwo44jvf3LpeL0QvWSlxwcifBo5Il+I3gXokPbhVIJRK4U+CTSOGLApeE75mKeIgybrbJHHxdzNlqrYu2bRmyRRWls1dAGiV1Xf8ATjBLgbOSSM4KrwpRGWbex+KbiMYwyBtpLBFnXwzLtJVeK4sCAz5uaBKGYQLRGVV0dzn3wAKf7qelPohnxSowAUqpP9yKr9cbasaA6MyoG4E50AUfp2jGuiQzgTnAB5dKJsEjcImkF6yB+yTqP+BLEo0D84GAnXTNR5jtyUzjzy36+nOCfxafGuBn1JMtFW0Q37tRAuYXYp8uZZ10O09mdfEAAAAASUVORK5CYII=) no-repeat center; background-size: cover;
    }
        
    .UIPlug_root .ui_model { 
        box-sizing: border-box;
        position: fixed;
        // right: -48px;
        right: 0;
        top: 70%;
        background: linear-gradient(135deg, rgba(112, 112, 119, 0.3) 0%, rgba(71, 72, 78, 0.2) 100%);
        border-radius: 15px 0px 0px 15px;
        border: 1px solid #eee;
        padding: 10px 5px 10px 10px;
        z-index: 10000;
        transition:all .5s;
    }
    // .UIPlug_root .ui_model:hover { 
    //     right: 0;
    //     transition:all .5s;
    //     padding: 10px 10px 10px 10px;
    // }
    
    .UIPlug_root .ui_upload {
        display: flex;
        justify-content: space-between;
        cursor:pointer;
        margin-bottom:8px;
    }
    .UIPlug_root .ui_upload span:nth-child(1) {
        background: #FFFFFF;
        border: 1px solid #DCDEE2;
        box-sizing: border-box;
        border-radius: 2px;
        width: 13px;
        height: 13px;
        line-height:10px;
        color: #C8C8CA;
        font-family: Roboto;
        font-style: normal;
        font-weight: bold;
        font-size: 11px;
        text-align:center;
    }
    
            
    .UIPlug_root .ui_upload span:nth-child(2){
        white-space:nowrap;
        font-family: Roboto;
        font-style: normal;
        font-weight: bold;
        font-size: 11px;
        line-height: 13px;
        color: #EEEEEE;
    }
    
                        
    
    .UIPlug_root .ui_alpha {
        display:flex
        margin-top:8px;
        cursor:pointer;
    }
                    
                    
                    
    .UIPlug_root .ui_alpha input {
        width: 30px;
        height: 20px;
        line-hight:20px;
        text-align:center;
        background: #FFFFFF;
        border: 1px solid #DCDEE2;
        box-sizing: border-box;
        border-radius: 2px;
        // margin-right:2px;
    }
                            
        
                    
    .UIPlug_root .ui_alpha span {
        font-family: Roboto;
        font-style: normal;
        font-weight: bold;
        font-size: 11px;
        line-height: 13px;
        text-align: center;
        color: #EEEEEE;
    }
    
                
                    
    .UIPlug_root .ui_lock {
        display: flex;
        margin-top:8px;
        cursor:pointer;
    }
    
    
    
    .UIPlug_root .ui_lock input{
        border: 1px solid red;
        margin:0;
        width: 13px;
        height: 13px;
        background: #FFFFFF;
        border: 1px solid #DCDEE2;
        box-sizing: border-box;
        border-radius: 2px;
        margin-right:5px;
    }
    
            
    
    .UIPlug_root .ui_lock span {
        white-space:nowrap;
        font-family: Roboto;
        font-style: normal;
        font-weight: bold;
        font-size: 11px;
        line-height: 13px;
        color: #EEEEEE;
    }
    
    
    
    .UIPlug_root .ui_flow {
        display: flex;
        margin-top:8px;
        cursor:pointer;
    }
    
    
    
    .UIPlug_root .ui_flow input{
        border: 1px solid red;
        margin:0;
        width: 13px;
        height: 13px;
        background: #FFFFFF;
        border: 1px solid #DCDEE2;
        box-sizing: border-box;
        border-radius: 2px;
        margin-right:5px;
    }
    
    
    
    .UIPlug_root .ui_flow span {
        white-space:nowrap;
        font-family: Roboto;
        font-style: normal;
        font-weight: bold;
        font-size: 11px;
        line-height: 13px;
        color: #EEEEEE;
    }
                            
                    
    
    .UIPlug_root .ui_page {
        width: 40px;
        height: 18px;
        background: #EEEEEE;
        border-radius: 10px;
        display:flex;
        justify-content:space-around;
        align-items: center;
        margin-top:8px;
        cursor:pointer;
    }
    
    
    
    .UIPlug_root .ui_page .ui_add{
        width: 14px;
        height: 14px;
        background: #FFFFFF;
        border-radius: 10px;
        line-height:14px;
        font-family: Roboto;
        font-style: normal;
        font-weight: bold;
        font-size: 11px;
        display: flex;
        align-items: center;
        text-align: center;
        color: #C8C8CA;
        justify-content:center;
        cursor:pointer;
    }
    
    
    
    .UIPlug_root .ui_page .ui_sub{
        width: 14px;
        height: 14px;
        background: #FFFFFF;
        border-radius: 10px;
        line-height:14px;
        font-family: Roboto;
        font-style: normal;
        font-weight: bold;
        font-size: 11px;
        display: flex;
        align-items: center;
        text-align: center;
        color: #C8C8CA;
        justify-content:center;
        cursor:pointer;
    }
    
    
    
    .UIPlug_root .ui_imgNum {
        display:inline-block;
        width: 35px;
        font-family: Roboto;
        font-style: normal;
        font-weight: bold;
        font-size: 11px;
        // line-height: 13px;
        text-align:center;
        color: #EEEEEE;
        margin-top:8px;
    }
                            
    
    .UIPlug_root .sliderBar {
                border:1px solid black;
                height: 0.266667rem;
                width: 40%;
                position: fixed;
                bottom: 4rem;
                right: 20px;
                border-radius: 0.133333rem;
                background: rgba(224, 224, 224, .9);
                z-index: 10001;
            }
    
    .UIPlug_root .sliderBtn {
                width: 25px;
                height: 25px;
                border-radius: 50%;
                background: #169fe6;
                position: absolute;
                left: 50%;
                top: 50%;
                margin-top: -12.5px;
                cursor:pointer;
                box-shadow: 0 0 0.133333rem -1px rgba(0, 0, 0, .2);
                display: flex;
                justify-content: center;
                align-items: center;
                color: #fff;
            }
    
    .UIPlug_root .changeImgs { 
                border:1px solid red;
                position: fixed;
                bottom: 30px;
                right: 20px;
                z-index: 10000;
                // width: 100px;
                // height: 50px;
                // display:flex;
            }
    
    .UIPlug_root .changeImgs .btn {
                border:1px solid green;
                font-size: 0.3rem;
                // width: 20px;
                // height: 0.8rem;
                float: left;
                background: #ccc;
                text-align: center;
                line-height: 20px;
                box-sizing: border-box;
            }
    
    .UIPlug_root .changeImgs .btn.num { background: none; }
    
    
            .UIPlug_root .changeImgs .btn.btn_fixed { 
                border:1px solid blue;
                margin-right: 0.8rem;
                position: relative;
            }
    
    
            .UIPlug_root .changeImgs .btn.btn_st { 
                // width: 2.4rem;
                // display: none;
                position:absolute;
                top:30px;
                left:0;
                white-space:nowrap;
                border-radius: 10px;
            }
    `;

document.getElementsByTagName('head').item(0)
    .appendChild(style);