網站的新手指引部分高亮功能；來自張鑫旭

時間 2019-11-11

原文原文鏈接

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <script src="glo_view.js"></script>
        <link rel="stylesheet" href="reset.css" />
        <style>
            body {
                font-size: 0.16rem;
            }
            
            .box>img {
                width: 6.4rem;
            }
            
            .tip1 img {
                width: 6.4rem;
            }
            
            .tip2 {
                position: absolute;
                top: 2rem;
                left: 5rem;
            }
            
            .tip3 {
                position: absolute;
                top: 4rem;
                left: 5rem;
            }
            
            .tip4 {
                position: absolute;
                top: 6rem;
                left: 5rem;
            }
        </style>
        <script src="jquery-1.10.2_d88366fd.js"></script>
        <script src="jquery.guide.js"></script>
    </head>

    <body>
        <div class="box">
            <div class="tip1">
                <img src="images/home_2.png" />
            </div>
            <p>
                使用方便，直接引入JS就行了，無需引入CSS資源；<br /> 支持瀏覽器的滾動以及縮放的重定位；
                <br /> 支持瀏覽器鍵盤操做，如上下鍵和左右鍵上一步下一步，ESC鍵退出等；
                <br /> 支持頁面異步呈現的元素的引導；
                <br /> 內置是否提示檢測，也就是內置只會提示一次的處理，基於localStorage進行首次判斷；
                <br /> 兼容到IE8瀏覽器；
                <br />
            </p>
            <img src="images/1.png" alt="" />
            <p>
                selector表示須要鏤空暴露的目標元素的選擇器，若是該選擇器能夠匹配多個元素，則使用該選擇去匹配的第一個元素做爲目標元素；若是沒法匹配元素，則整個這個參數對象會被忽略。<br /> content表示鏤空區域內額外顯示的內容，能夠是HTML字符串，也能夠是jQuery包裝器對象。
                <br /> align表示顯示內容的對齊方式，是左對齊居中對齊仍是右對齊？可選關鍵字值包括：left, center, right. 其中center是默認值。<br /> offset表示偏移的水平垂直距離，x那是水平偏移位置，計算規則與align參數值有關，y表示垂直偏移距離，其中content提示內容默認不是頂對齊，而是相對於鏤空暴露的目標元素下邊緣往上5像素對齊。
            </p>
            <div class="tip2">
                <img src="images/home_3.png" />
            </div>
            <div class="tip3">
                <img src="images/home_4.png" />
            </div>
            <div class="tip4">
                <img src="images/home_5.png" />
            </div>
        </div>
    </body>

</html>
<script>
    $(function() {

        $.guide([{
            selector: '.tip1',
            content: '<img src="images/guide-1.png" width="102" height="47">',
            align: 'left'
        }, {
            selector: '.tip2',
            content: '<p style="color:white;" class="tip3img">溼噠噠大所大所大所大</p>',
            offset: {
                x: -55,
                y: 22
            }
        }, {
            selector: '.tip3',
            content: '<img src="images/guide-3.png" width="72" height="47">',
            align: 'left'
        }, {
            selector: '.tip4',
            content: '<img src="images/guide-4.png" width="86" height="47">'
        }]);
        
        
});
</script>

js：javascript

/*!
* by zhangxinxu(.com) 2017-05-18
* 新版上線時候的黑色半透明鏤空遮罩指引效果實現jQuery小插件
* 兼容到IE8+
* MIT使用協議，使用時候保留版權
* 更多原理和使用說明參見：http://www.zhangxinxu.com/wordpress/?p=6171
*/

$.guide = function (options) {
    var defaults = {
        selector: '',  // 頁面提示元素選擇器物，會使用匹配的第一個元素
        content: '',  // 提示內容但是是字符串，也能夠是jQuery包裝器對象
        align: 'center', // center, right,
        offset: {
            x: 0,
            y: 0
        }
    };
    // options格式
    /* [{
        selector: '',  
        content: '',
        align: 'left',
        offset: {
            x: 0,
            y: 0
        }
    }]

    */
//    用#把url且成數組,找url中的#,根據#的位置切.結果沒找到#,在經過正則將全部非數組和字母換掉
    var urlRoot = location.href.split('#')[0].replace(/\W/g, '') + 'Guide';

    // 若是要調試，最後的== '1'改爲'2'就行了
    if (!window.localStorage || !options || !$.isArray(options) || localStorage[urlRoot] == '1') {
        return;
    }

    // 建立層
    var elGuideOverlay = $('#guideOverlay');
    var elGuideShut = $('#guideShut');
    var elGuide = $('#guideOverlap');

    var start = 0;

    var remove = function () {
        elGuideOverlay.remove();
        elGuideShut.remove();
        elGuide.remove();
        // 鍵盤事件移除
        $(document).off('keydown.guide');
        $(window).off('resize.guide');
    };
    var goto = function (change) {
        start = start + change;
        if (start < 0) {
            start = 0;
        }
        if (!options[start]) {
            remove();
            return;
        }

        var data = $.extend({}, defaults, options[start]);
    console.log(data)
        // 獲取元素
        var elTrigger = $(data.selector).eq(0);
        if (elTrigger.length == 0 && change) {
            goto(change);
            return;
        }

        // 裝載對應提示內容
        elGuide.empty();

        var elGuideContent = $('<div></div>').css({
            display: 'none',
            position: 'absolute'
        }).append(data.content);

        elGuide.append(elGuideContent);

        // 定位
        elGuide.css({
            width: elTrigger.outerWidth(),
            height: elTrigger.outerHeight(),
            left: elTrigger.offset().left,
            top: elTrigger.offset().top
        });

        // 提示內容定位
        elGuideContent.css({
            top: elTrigger.outerHeight() - 5 + data.offset.y
        });

        if (data.align == 'left') {
            elGuideContent.css({
                left: data.offset.x
            });
        } else if (data.align == 'right') {
            elGuideContent.css({
                right: data.offset.x
            });
        } else {
            elGuideContent.css({
                left: (elTrigger.outerWidth() - elGuideContent.width()) / 2 + data.offset.x
            });
        }
        
        setTimeout(function () {
            elGuideContent.show();
        }, history.pushState? 100: 0);
    };

    if (!elGuideOverlay.length) {
        elGuideOverlay = $('<a id="guideOverlay" href="javascript:" role="button"></a>').css({
            position: 'fixed',
            left: 0,
            top: 0,
            right: 0,
            bottom: 0,
            background: 'url(about:blank)',
            zIndex: 99,
            outline: 'none'
        });
        
        if (history.pushState) {
            elGuideOverlay.css('background', 'linear-gradient(to top, transparent, transparent)');    
        }

        elGuideShut = $('<a href="javascript:" id="guideShut" role="button">關閉</a>').css({
            position: 'fixed',
            top: 10,
            right: 10,
            color: '#fff',
            zIndex: 100
        });;

        elGuide = $('<div id="guideOverlap"></div>').css({
            position: 'absolute',
            transition: 'all .3s',
            boxShadow: '0 0 0 9999px rgba(0,0,0,.75)',
            // 若是想支持圓角，下面的註釋
//             borderRadius: '50%',
            zIndex: 100
        });
        
        if (![].map) {
            // IE8瀏覽器
            elGuide.css('outline', '9999px solid #000').css('filter', 'alpha(opacity=75)');
        }

        $(document.body).append(elGuideOverlay).append(elGuide).append(elGuideShut);

        // 事件
        elGuideShut.on('click', function () {
            remove();
        });

        // 翻頁
        elGuideOverlay.on({
            click: function () {
                goto(1);
            }
        });

        $(document).on('keydown.guide', function (event) {
            var keycode = {
                37: 'left',
                38: 'up',
                39: 'right',
                40: 'down',
                27: 'esc'
            };

            switch (keycode[event.keyCode]) {
                case 'esc': {
                    remove();
                    break;
                }
                case 'up': case 'left': {
                    goto(-1);
                    event.preventDefault();
                    break;
                }
                case 'right': case 'down': {
                    goto(1);
                    event.preventDefault();
                    break;
                }
            }
        });
        
        $(window).on('resize.guide', function () {
            goto(0);
        });
    }

    goto(0);
    
    elGuideOverlay[0].focus();

    localStorage[urlRoot] = '1';
};

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

網站的新手指引 部分高亮功能；來自張鑫旭

網站的新手指引部分高亮功能；來自張鑫旭