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


Posted in Javascript onJanuary 05, 2015

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

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

实现的过程。

这款实例要引用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> 
Javascript 相关文章推荐
IE8 中使用加速器(Activities)
May 14 Javascript
jquery下json数组的操作实现代码
Aug 09 Javascript
百度地图自定义控件分享
Mar 04 Javascript
jQuery实现简单的间隔向上滚动效果
Mar 09 Javascript
jquery mobile界面数据刷新的实现方法
May 28 Javascript
javascript之Array 数组对象详解
Jun 07 Javascript
全面解析JavaScript中的valueOf与toString方法(推荐)
Jun 14 Javascript
js复制内容到剪贴板代码,js复制代码的简单实例
Oct 27 Javascript
javascript 中设置window.location.href跳转无效问题解决办法
Feb 09 Javascript
JavaScrpt判断一个数是否是质数的实例代码
Jun 11 Javascript
微信小程序 密码输入(源码下载)
Jun 27 Javascript
js实现小时钟效果
Mar 25 Javascript
jQuery中toggleClass()方法用法实例
Jan 05 #Javascript
jQuery中removeClass()方法用法实例
Jan 05 #Javascript
jQuery中addClass()方法用法实例
Jan 05 #Javascript
js Calender控件使用详解
Jan 05 #Javascript
js的回调函数详解
Jan 05 #Javascript
判断浏览器的内核及版本号方法汇总
Jan 05 #Javascript
jQuery中removeProp()方法用法实例
Jan 05 #Javascript
You might like
php图片上传类 附调用方法
2016/05/15 PHP
使用jscript实现二进制读写脚本代码
2008/06/09 Javascript
Prototype源码浅析 String部分(二)
2012/01/16 Javascript
基于jquery实现的定时显示与隐藏div广告的实现代码
2013/08/22 Javascript
jquery实现按Enter键触发事件示例
2013/09/10 Javascript
纯js实现重发验证码按钮倒数功能
2015/04/21 Javascript
JQUERY实现网页右下角固定位置展开关闭特效的方法
2015/07/27 Javascript
JavaScript中字面量与函数的基本使用知识
2015/10/20 Javascript
JS实现的仿QQ空间图片弹出效果代码
2016/02/23 Javascript
javascript中eval解析JSON字符串
2016/02/27 Javascript
原生js+cookie实现购物车功能的方法分析
2017/12/21 Javascript
微信小程序 (地址选择1)--选取搜索地点并显示效果
2019/12/17 Javascript
浅谈Vue static 静态资源路径 和 style问题
2020/11/07 Javascript
[01:13]2015国际邀请赛线下观战现场
2015/08/08 DOTA
[00:12]DAC SOLO赛卫冕冠军 VG.Paparazi灬展现SOLO技巧
2018/04/06 DOTA
深入理解python try异常处理机制
2016/06/01 Python
python简单读取大文件的方法
2016/07/01 Python
关于Python中异常(Exception)的汇总
2017/01/18 Python
Python抓取框架Scrapy爬虫入门:页面提取
2017/12/01 Python
python实现二叉树的遍历
2017/12/11 Python
python实现读取大文件并逐行写入另外一个文件
2018/04/19 Python
python浪漫表白源码
2019/04/05 Python
Python利用matplotlib做图中图及次坐标轴的实例
2019/07/08 Python
django之使用celery-把耗时程序放到celery里面执行的方法
2019/07/12 Python
tensorflow安装成功import tensorflow 出现问题
2020/04/16 Python
python3中datetime库,time库以及pandas中的时间函数区别与详解
2020/04/16 Python
Django中template for如何使用方法
2021/01/31 Python
CSS3 三维变形实现立体方块特效源码
2016/12/15 HTML / CSS
CSS3伪类选择器:nth-child()
2009/04/02 HTML / CSS
CSS3实现DIV圆角效果完整代码
2012/10/10 HTML / CSS
HTML5 本地存储之如果没有数据库究竟会怎样
2013/04/25 HTML / CSS
技术总监个人的自我评价范文
2013/12/18 职场文书
公司市场专员岗位职责
2014/06/29 职场文书
无刑事犯罪记录证明
2014/09/18 职场文书
CSS3中Animation实现简单的手指点击动画的示例
2021/07/15 HTML / CSS
使用canvas对video视频某一刻截图功能
2021/09/25 HTML / CSS