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

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

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

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

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

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

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>

您可能感興趣的文章:

相關(guān)文章

jquery 屬性選擇器（匹配具有指定屬性的元素）
本文主要介紹 jquery 屬性選擇器的知識，這里有簡單實(shí)現(xiàn)代碼和實(shí)例講解，有需要的小伙伴可以參考下
2016-09-09
jquery實(shí)現(xiàn)簡單的swiper輪播預(yù)覽原圖
這篇文章主要為大家詳細(xì)介紹了jquery實(shí)現(xiàn)簡單的swiper輪播預(yù)覽原圖，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2022-02-02
BootStrap輕松實(shí)現(xiàn)微信頁面開發(fā)代碼分享
本文給大家分享一段代碼關(guān)于bootstrap實(shí)現(xiàn)微信開發(fā)頁面的代碼，非常不錯代碼簡單易懂，感興趣的朋友一起看看吧
2016-10-10
jQuery處理XML文件的幾種方法
這篇文章主要為大家詳細(xì)介紹了jQuery處理XML文件的幾種形式方法,如何使用jQuery解析XML，感興趣的小伙伴們可以參考一下
2016-06-06
jQuery基于xml格式數(shù)據(jù)實(shí)現(xiàn)模糊查詢及分頁功能的方法
這篇文章主要介紹了jQuery基于xml格式數(shù)據(jù)實(shí)現(xiàn)模糊查詢及分頁功能的方法,涉及jQuery使用ajax技術(shù)針對xml格式數(shù)據(jù)的讀取、模糊查詢及分頁顯示等相關(guān)操作技巧,需要的朋友可以參考下
2016-12-12
jquery實(shí)現(xiàn)折疊菜單效果【推薦】
本文主要介紹了jquery實(shí)現(xiàn)折疊菜單效果的實(shí)例，具有很好的參考價值。下面跟著小編一起來看下吧
2017-03-03
jq實(shí)現(xiàn)左側(cè)顯示圖片右側(cè)文字滑動切換效果
這篇文章是基于jq技術(shù)實(shí)現(xiàn)左側(cè)顯示圖片右側(cè)文字滑動切換效果的相關(guān)資料，有需要的小伙伴可以來參考下
2015-08-08
Jquery Easyui菜單組件Menu使用詳解（15）
這篇文章主要為大家詳細(xì)介紹了Jquery Easyui菜單組件Menu的使用方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2016-12-12
Jquery Validation插件防止重復(fù)提交表單的解決方法
在項(xiàng)目開發(fā)中，測試人員報告缺陷說，即時有表單驗(yàn)證，但是如果快速點(diǎn)擊兩下“提交”按鈕，系統(tǒng)會產(chǎn)生兩條相同的記錄。
2010-03-03
基于jQuery實(shí)現(xiàn)表格內(nèi)容的篩選功能
這篇文章主要介紹了基于jQuery實(shí)現(xiàn)表格內(nèi)容的篩選功能的相關(guān)資料,需要的朋友可以參考下
2016-08-08