一款基于jQuery的图片场景标注提示弹窗特效

爱编程小编今天给大家分享一款基于jQuery的图片场景标注提示弹窗特效,这款实例适合在图片上标注某个物件,单击弹出详情说明,兼容360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗,不支持IE8及以下浏览器。效果非常不错。效果如下:

在线预览   源码下载

实现的过程。

这款实例要引用jquery和jquery ui库,还有一个实现的main.js库。需上的朋友可以点击上现的下载按钮下载来看看。

html代码部分:

 <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://***/Article/14040

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值