一款基于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 相关文章推荐
地址栏上的一段语句,改变页面的风格。(教程)
Apr 02 Javascript
js获取或设置当前窗口url参数的小例子
Oct 14 Javascript
做好七件事帮你提升jQuery的性能
Feb 06 Javascript
jquery计算鼠标和指定元素之间距离的方法
Jun 26 Javascript
Javascript如何判断数据类型和数组类型
Jun 22 Javascript
json对象与数组以及转换成js对象的简单实现方法
Jun 24 Javascript
深入理解Vue 的条件渲染和列表渲染
Sep 01 Javascript
Bootstrap的aria-label和aria-labelledby属性实例详解
Nov 02 Javascript
详解vuex 渐进式教程实例代码
Nov 27 Javascript
用Golang运行JavaScript的实现示例
Nov 25 Javascript
基于node+websocket+html实现腾讯课堂聊天室聊天功能
Mar 04 Javascript
JavaScript 实现下雪特效的示例代码
Sep 09 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
ThinkPHP中的系统常量和预定义常量集合
2014/07/01 PHP
ci检测是ajax还是页面post提交数据的方法
2014/11/10 PHP
在WordPress中使用wp-cron插件来设置定时任务
2015/12/10 PHP
PHP 获取指定地区的天气实例代码
2017/02/08 PHP
PHP实现将标点符号正则替换为空格的方法
2017/08/09 PHP
基于Laravel-admin 后台的自定义页面用法详解
2019/09/30 PHP
纯CSS3实现质感细腻丝滑按钮
2021/03/09 HTML / CSS
用js自动判断浏览器分辨率的代码
2007/01/28 Javascript
推荐40个非常优秀的jQuery插件和教程【系列三】
2011/11/09 Javascript
jquery渐隐渐显的图片幻灯闪烁切换实现方法
2015/02/26 Javascript
JavaScript中的toDateString()方法使用详解
2015/06/12 Javascript
jQuery动态追加页面数据以及事件委托详解
2017/05/06 jQuery
JavaScript中的垃圾回收与内存泄漏示例详解
2019/05/02 Javascript
微信小程序使用canvas自适应屏幕画海报并保存图片功能
2019/07/25 Javascript
js判断复选框是否选中的方法示例【基于jQuery】
2019/10/10 jQuery
在博客园博文中添加自定义右键菜单的方法详解
2020/02/05 Javascript
JS实现长图上下滚动效果
2020/03/19 Javascript
JavaScript进阶(三)闭包原理与用法详解
2020/05/09 Javascript
让Vue响应Map或Set的变化操作
2020/11/11 Javascript
[02:59]DOTA2完美大师赛主赛事第三日精彩集锦
2017/11/25 DOTA
[45:15]Optic vs VP 2018国际邀请赛淘汰赛BO3 第一场 8.24
2018/08/25 DOTA
[57:59]完美世界DOTA2联赛循环赛 Ink Ice vs LBZS BO2第一场 11.05
2020/11/05 DOTA
以911新闻为例演示Python实现数据可视化的教程
2015/04/23 Python
浅析python的Lambda表达式
2019/02/27 Python
python 装饰器功能与用法案例详解
2020/03/06 Python
python爬虫如何解决图片验证码
2021/02/14 Python
关于html字符串正则判断和匹配的具体使用
2019/12/12 HTML / CSS
副总经理工作职责
2013/11/28 职场文书
司马光教学反思
2014/02/01 职场文书
小学少先队活动方案
2014/02/18 职场文书
《那片绿绿的爬山虎》教学反思
2014/02/27 职场文书
党风廉政建设责任书
2014/04/14 职场文书
中国梦演讲稿开场白
2014/08/28 职场文书
2014领导班子四风问题对照检查材料思想汇报
2014/09/21 职场文书
2014年班组工作总结
2014/11/20 职场文书
请病假条范文
2015/08/17 职场文书