快捷導(dǎo)航

一款基于jQuery的圖片場(chǎng)景標(biāo)注提示彈窗特效

更新時(shí)間：2015年01月05日 11:55:26 投稿：hebedich

這篇文章主要介紹了一款基于jQuery的圖片場(chǎng)景標(biāo)注提示彈窗特效,需要的朋友可以參考下

今天給大家分享一款基于jQuery的圖片場(chǎng)景標(biāo)注提示彈窗特效，這款實(shí)例適合在圖片上標(biāo)注某個(gè)物件，單擊彈出詳情說(shuō)明，兼容360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗，不支持IE8及以下瀏覽器。效果非常不錯(cuò)。效果如下：

實(shí)現(xiàn)的過(guò)程。

這款實(shí)例要引用jquery和jquery ui庫(kù)，還有一個(gè)實(shí)現(xiàn)的main.js庫(kù)。需上的朋友可以點(diǎn)擊上現(xiàn)的下載按鈕下載來(lái)看看。

html代碼部分：

復(fù)制代碼代碼如下:

<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="
                                <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>