A jquery-based picture scene callout Cue popup effect

Today to share a jquery-based picture scene callout cue pop-up effect, this example is suitable to mark an object on the picture, click the pop-up details, compatible with 360, FireFox, Chrome, Safari, Opera, Proud tour, Sogou, the window of the world, IE8 and the following browsers are not supported. The effect is very good. The effect is as follows:

Online preview Source Download

The process of implementation.

This example references the jquery and jquery UI libraries, as well as an implemented Main.js library. Friends on the need to click on the Download button on the current download to see.

HTML code section:

HTML code

2. <div class="container">
4. <div class="labels">
6. <a id="Label1" class="label" href="#">sofa
8. <p>
10. A sofa, is an item of furniture designed to seat more than one person, and providing
12. Support for the back and arms. </P>
14. <span /></a><a id="Label2" class="label" href="#">television
16. <p>
18. Television (TV) is a telecommunication medium for transmitting and receiving moving
20. Images that can is monochrome (black-and-white) or colored, with or without accompanying
22. Sound. </P>
24. <span /></a><a id="label3" class="label" href="#">carpet
26. <p>
28. Carpet is a textile floor of the upper layer attached to a backing. </P>
30. <span /></a><a id="Label4" class="label" href="#">chair
32. <p>
34. Chair is a item of furniture designed to seat one person, and providing support
36. For the back and arms. </P>
38.                              < span /></a ><a id= "Label5"  class= "label"  href= "http://www.5icool.org/" >showcase  
40. <p>
42. Showcase is used-Showcase things at home</P>
44. <span /></a>
46. </div>
48. <div class="description">
50. <p>
52. </P>
54. <a class="Close">x</a></div>
56. </div>

A jquery-based picture scene callout Cue popup effect