一款基于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 相关文章推荐
javascript 限制输入脚本大全
Nov 03 Javascript
javascript轻量级模板引擎juicer使用指南
Jun 22 Javascript
javascript框架设计读书笔记之模块加载系统
Dec 02 Javascript
JavaScript实现添加、查找、删除元素
Jul 02 Javascript
不得不分享的JavaScript常用方法函数集(上)
Dec 23 Javascript
Javascript中数组去重与拍平的方法示例
Feb 03 Javascript
JavaScript组件开发之输入框加候选框
Mar 10 Javascript
JavaScript纯色二维码变成彩色二维码
Jul 23 Javascript
Angular实现搜索框及价格上下限功能
Jan 19 Javascript
js原生map实现的方法总结
Jan 19 Javascript
详解JS ES6编码规范
May 07 Javascript
JS数组方法some、every和find的使用详情
Oct 05 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
Windows 下的 PHP-PEAR 安装方法
2010/11/20 PHP
分享下php5类中三种数据类型的区别
2015/01/26 PHP
PHP http请求超时问题解决方案
2020/11/13 PHP
js禁止小键盘输入数字功能代码
2011/08/01 Javascript
深入理解JavaScript系列(4) 立即调用的函数表达式
2012/01/15 Javascript
jQuery中[attribute^=value]选择器用法实例
2014/12/31 Javascript
jquery右下角自动弹出可关闭的广告层
2015/05/08 Javascript
实现无刷新联动例子汇总
2015/05/20 Javascript
基于js中的原型、继承的一些想法
2016/08/10 Javascript
Vue.js每天必学之Class与样式绑定
2016/09/05 Javascript
Jquery表单验证失败后不提交的解决方法
2016/10/18 Javascript
jquery实时获取时间的简单实例
2017/01/26 Javascript
javaScript手机号码校验工具类PhoneUtils详解
2017/12/08 Javascript
微信小程序停止其他视频播放当前视频的实例代码
2019/12/25 Javascript
vue单文件组件无法获取$refs的问题
2020/06/24 Javascript
React+EggJs实现断点续传的示例代码
2020/07/07 Javascript
[03:48]2014DOTA2 TI专访71DK夺冠不靠小组赛高排名
2014/07/11 DOTA
python求素数示例分享
2014/02/16 Python
python读取和保存视频文件
2018/04/16 Python
Django接收post前端返回的json格式数据代码实现
2019/07/31 Python
python3实现单目标粒子群算法
2019/11/14 Python
TensorFlow查看输入节点和输出节点名称方式
2020/01/04 Python
在python3中实现更新界面
2020/02/21 Python
Python读取配置文件(config.ini)以及写入配置文件
2020/04/08 Python
Pycharm2020.1安装中文语言插件的详细教程(不需要汉化)
2020/08/07 Python
Python matplotlib模块及柱状图用法解析
2020/08/10 Python
HTML5中的Scoped属性使用实例
2014/04/23 HTML / CSS
印度和世界各地的精美产品:Ikka Dukka
2018/02/12 全球购物
Java如何支持I18N?
2016/10/31 面试题
高校学生干部的自我评价分享
2013/11/04 职场文书
感恩小明星事迹材料
2014/05/23 职场文书
欢迎领导检查标语
2014/06/27 职场文书
国庆节演讲稿范文2014
2014/09/19 职场文书
个人工作表现自我评价
2015/03/06 职场文书
放假通知
2015/04/14 职场文书
小学六一儿童节活动总结
2015/05/05 职场文书