一款基于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 相关文章推荐
JS 跳转页面延迟2种方法
Mar 29 Javascript
jquery实现弹出层完美居中效果
Mar 03 Javascript
js和jquery如何获取图片真实的宽度和高度
Sep 28 Javascript
javascript学习笔记(三)BOM和DOM详解
Sep 30 Javascript
浅析Node.js实现HTTP文件下载
Aug 05 Javascript
JS实现仿百度文库评分功能
Jan 12 Javascript
Javascript中类式继承和原型式继承的实现方法和区别之处
Apr 25 Javascript
Vue学习之路之登录注册实例代码
Jul 06 Javascript
vue+springboot实现项目的CORS跨域请求
Sep 05 Javascript
NProgress显示顶部进度条效果及使用详解
Sep 21 Javascript
javascript设计模式之装饰者模式
Jan 30 Javascript
JavaScript中window和document用法详解
Jul 28 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转义输出HTML到JavaScript
2015/03/27 PHP
jQuery 全选效果实现代码
2009/03/23 Javascript
javascript设计模式 封装和信息隐藏(上)
2012/07/24 Javascript
表单类各种类型(文本框)失去焦点效果jquery代码
2013/04/26 Javascript
js函数中onmousedown和onclick的区别和联系探讨
2013/05/19 Javascript
js复制到剪切板的实例方法
2013/06/28 Javascript
jQuery中对未来的元素绑定事件用bind、live or on
2014/04/17 Javascript
java、javascript实现附件下载示例
2014/08/14 Javascript
js实现的类似于asp数据字典的数据类型代码实例
2014/09/03 Javascript
jQuery中size()方法用法实例
2014/12/27 Javascript
javascript中setAttribute()函数使用方法及兼容性
2015/07/19 Javascript
JS实现兼容性好,带缓冲的动感网页右键菜单效果
2015/09/18 Javascript
JS实现的简单鼠标跟随DiV层效果完整实例
2015/10/31 Javascript
微信小程序 摇一摇抽奖简单实例实现代码
2017/01/09 Javascript
bootstrap datetimepicker日期插件超详细使用方法介绍
2017/02/23 Javascript
jQuery布局组件EasyUI Layout使用方法详解
2017/02/28 Javascript
使用Math.max,Math.min获取数组中的最值实例
2017/04/25 Javascript
浅析Node.js非对称加密方法
2018/01/29 Javascript
使用puppeteer破解极验的滑动验证码
2018/02/24 Javascript
vue裁切预览组件功能的实现步骤
2018/05/04 Javascript
JavaScript实现连连看连线算法
2019/01/05 Javascript
JavaScript实现无限级递归树的示例代码
2019/03/29 Javascript
vue+element_ui上传文件,并传递额外参数操作
2020/12/05 Vue.js
普天C++笔试题
2016/03/20 面试题
人事专员岗位职责范本
2014/03/04 职场文书
百年校庆节目主持词
2014/03/27 职场文书
酒店管理求职信范文
2014/04/06 职场文书
关于梦想的演讲稿
2014/05/05 职场文书
体育比赛口号
2014/06/09 职场文书
财务会计实训报告
2014/11/05 职场文书
小学生光盘行动倡议书
2015/04/28 职场文书
护士医德医风心得体会
2016/01/25 职场文书
2016年小学教师师德承诺书
2016/03/25 职场文书
制作能在nginx和IIS中使用的ssl证书
2021/06/21 Servers
python机器学习创建基于规则聊天机器人过程示例详解
2021/11/02 Python
mysql 索引的数据结构为什么要采用B+树
2022/04/26 MySQL