A jQuery-based image scenario tagging and pop-up window Effects

A jQuery-based image scenario tagging and pop-up window Effects

The editor of love programming today shares a jQuery-based image scenario annotation prompting pop-up window special effect. This instance is suitable for marking an object on an image. Click the displayed details, compatible with 360, FireFox, Chrome, Safari, Opera, aoyou, sogou, and windows of the world. IE8 and earlier browsers are not supported. The results are very good. The effect is as follows:

Download Online Preview source code

Implementation process.

This instance references the jquery and jquery ui libraries, as well as an implemented main. js library. If you want to download it, click the Download button to download it.

Html code:

 <div class="container">        <div class="labels">            <a id="label1" class="label" href="#">Sofa                <p>                    A sofa, is an item of furniture designed to seat more than one person, and providing                    support for the back and arms.</p>                <span /></a><a id="label2" class="label" href="#">Television                    <p>                        Television (TV) is a telecommunication medium for transmitting and receiving moving                        images that can be monochrome (black-and-white) or colored, with or without accompanying                        sound.</p>                    <span /></a><a id="label3" class="label" href="#">Carpet                        <p>                            Carpet is a textile floor of an upper layer attached to a backing.</p>                        <span /></a><a id="label4" class="label" href="#">Chair                            <p>                                Chair is an item of furniture designed to seat one person, and providing support                                for the back and arms.</p>                            <span /></a><a id="label5" class="label" href="http://www.5icool.org/">Showcase                                <p>                                    Showcase is used to showcase things at home</p>                                <span /></a>        </div>        <div class="description">            <p>            </p>            <a class="close">X</a></div>    </div>

Via: http://www.w2bc.com/Article/14040