• 网站的新手指引 部分高亮功能;来自张鑫旭


    <!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:

    /*!
    * 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({
                 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';
    };
  • 相关阅读:
    扩展的局域网
    参数估计
    以太网的 MAC 层
    poj 1523Tarjan算法的含义——求取割点可以分出的连通分量的个数
    tarjan算法--求解无向图的割点和桥
    spfa负环判断
    codeforce 489d bfs分层处理
    并查集优化——压缩路径——秩优化
    SPFA_queue_链式前向星最短路 & HDU2433
    POJ3046选蚂蚁创建集合_线性DP
  • 原文地址:https://www.cnblogs.com/gaidalou/p/6878567.html
Copyright © 2020-2023  润新知