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

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

Today, we will share with you a jQuery-based image scenario annotation prompt pop-up window special effect. This instance is suitable for marking an object on an image. Click the pop-up details to describe it, 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:

Html code

1. <Div class = "container">
2. <Div class = "labels">
3. <A id = "label1" class = "label" href = "#"> Sofa
4. <P>
5. A sofa, is an item of furniture designed to seat more than one person, and providing
6. Support for the back and arms. </p>
7. <Span/> </a> <a id = "label2" class = "label" href = "#"> Television
8. <P>
9. Television (TV) is a telecommunication medium for transmitting and inserting ing moving
10. Images that can be monochrome (black-and-white) or colored, with or without accompanying
11. Sound. </p>
12. <Span/> </a> <a id = "label3" class = "label" href = "#"> Carpet
13. <P>
14. Carpet is a textile floor of an upper layer attached to a backing. </p>
15. <Span/> </a> <a id = "label4" class = "label" href = "#"> Chair
16. <P>
17. Chair is an item of furniture designed to seat one person, and providing support
18. For the back and arms. </p>
19. <Span/> </a> <a id = "label5" class = "label" href = "http://www.5icool.org/"> Showcase
20. <P>
21. Showcase is used to showcase things at home </p>
22. <Span/> </a>
23. </Div>
24. <Div class = "description">
25. <P>
26. </P>
27. <A class = "close"> X </a> </div>
28. </Div>