web (pc) to achieve the effect Guide Page [original]

Foreword

The company's official website membership page navigation menu too, so you need to add a guide page (or the first time you log into the Member Center after registration). To start thinking about a simple implementation of Baidu (I was doing the background, the front page to change to change the results were OK, a bit difficult to do by hand), and did not find an appropriate effect, the sample code provided chaotic (totally do not understand kind).

To fend for themselves. Analysis intro effect, nothing more than full-screen display, then click on a guide page, out of a boot next page, showing the end of the hidden guide page.

Initially wanted to use swiper, to a full-screen view of the carousel being guided page, but not so good for page up and down buttons to listen, to achieve the final effect of hiding the boot page.

Then build yourself a HTML structure, show intro pictures, and add the appropriate button position, you can set the button click event.

achieve

html part

<ul class="guide_imgs">
    <li class="close"></li>
    <li><img src="{DT_SKIN}guide/guide1.jpg"/></li>
    <li><img src="{DT_SKIN}guide/guide2.jpg"/></li>
    <li><img src="{DT_SKIN}guide/guide3.jpg"/></li>
    <li><img src="{DT_SKIN}guide/guide4.jpg"/></li>
    <li><img src="{DT_SKIN}guide/guide5.jpg"/></li>
    <li><img src="{DT_SKIN}guide/guide6.jpg"/></li>
    <li><img src="{DT_SKIN}guide/guide7.jpg"/></li>
</ul>

{DT_SKIN} Destoon template for the label indicating the address of the default skin, can be replaced with your own directory path.

css section

.guide_imgs {
    position: absolute;
    z-index: 9999;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.guide_imgs li {
    width: 100%;
    height: 100%;
}
.guide_imgs li:first-child {
    position: absolute;
    right: 0;
    width: 100px;
    height: 60px;
}
.guide_imgs li img{
    width: 100%;height: 100%;
}
</style>

jQuery part

$('.guide_imgs li').click(function () {
    if($(this).hasClass('close')) {
        $(this).parent().remove();
    } else {
        $(this).remove();
    }
});

Since it uses jQuery, so natural to introduce the jQuery library file in html page, otherwise it will error.

My example, click on the picture guide will delete the current page, thereby achieving the effect of switching on the next page. And individually defines a "skip" button (used class to distinguish values), located at the top right of the guide page, click the Delete all guided imagery, exit guide page.

Go with this idea, you can also define other types of buttons, but if you need to see the previous page, delete the current picture to guide the way is inappropriate. In this case, consider using css style display:none and display:block switching display, may also be used in jQuery show() and a hide() method of switching display.

Given the current page of a document is likely to exceed the height of the visible screen height, that is, the presence of the scroll bar of the page, you can simultaneously display the boot page to body add overflow:hidden to cancel the scroll bar.

full version

<ul class="guide_imgs">
    <li class="close_guide"></li>
    <li><img src="{DT_SKIN}guide/guide1.jpg"/></li>
    <li><img src="{DT_SKIN}guide/guide2.jpg"/></li>
    <li><img src="{DT_SKIN}guide/guide3.jpg"/></li>
    <li><img src="{DT_SKIN}guide/guide4.jpg"/></li>
    <li><img src="{DT_SKIN}guide/guide5.jpg"/></li>
    <!--<li><img src="{DT_SKIN}guide/guide6.jpg"/></li>-->
    <li class="last_guide"><img src="{DT_SKIN}guide/guide7.jpg"/></li>
    <li class="prev_guide"></li>
</ul>

.guide_imgs {
    position: absolute;
    z-index: 99999;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.guide_imgs li {
    width: 100%;
    height: 100%;
}
.guide_imgs li:first-child {
    position: absolute;
    right: 0;
    width: 100px;
    height: 60px;
}
.guide_imgs li:last-child {
    position: absolute;
    right: 154px;
    bottom: 14px;
    width: 128px;
    height: 60px;
    /*border: 1px solid #ff0000;*/
}
.guide_imgs li img{
    width: 100%;height: 100%;
}

$('.guide_imgs li').click(function () {
    if($(this).hasClass('close_guide')) {
        $(this).parent().remove();
    } else if($(this).hasClass('prev_guide')) {
        $('.prev_show').show().removeClass('prev_show').prev().addClass('prev_show');
    } else {
        $(this).prev().removeClass('prev_show');
        $(this).addClass('prev_show');
        $(this).hide();
        if ($(this).hasClass('last_guide')) {
            $(this).parent().remove();
        }
    }
});

Adding a previous position of the lower right corner of the button, which requires an additional class　branch judgment and use hide（） , and show() to switch display.

The following is an example of a guide map to be achieved:

FIG example guide