一款基于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 相关文章推荐
extjs 分页使用jsp传递数据示例
Jul 29 Javascript
jQuery平滑旋转幻灯片特效代码分享
Sep 07 Javascript
JavaScript中的各种操作符使用总结
May 26 Javascript
JS获取随机数和时间转换的简单实例
Jul 10 Javascript
JavaScript中使用webuploader实现上传视频功能(demo)
Apr 10 Javascript
jQuery实现简单日期格式化功能示例
Sep 19 jQuery
JQuery 选择器、DOM节点操作练习实例
Sep 28 jQuery
原生js+cookie实现购物车功能的方法分析
Dec 21 Javascript
快速了解vue-cli 3.0 新特性
Feb 28 Javascript
vue使用xe-utils函数库的具体方法
Mar 06 Javascript
Javascript中prototype与__proto__的关系详解
Mar 11 Javascript
微信小程序实现的点击按钮 弹出底部上拉菜单功能示例
Dec 20 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学习之正则表达式
2011/04/17 PHP
AJAX的跨域访问-两种有效的解决方法介绍
2013/06/22 PHP
PHP 导出Excel示例分享
2014/08/18 PHP
php实现将字符串按照指定距离进行分割的方法
2015/03/14 PHP
PHP中的表达式简述
2016/05/29 PHP
PHP环形链表实现方法示例
2017/09/15 PHP
PHP生成随机数的方法总结
2018/03/01 PHP
使用jquery hover事件实现表格的隔行换色功能示例
2013/09/03 Javascript
js实现照片墙功能实例
2015/02/05 Javascript
全面了解JavaScript对象进阶
2016/07/19 Javascript
ES6新特征数字、数组、字符串
2016/10/01 Javascript
学习vue.js表单控件绑定操作
2016/12/05 Javascript
详解nodejs微信公众号开发——6.自定义菜单
2017/04/13 NodeJs
从零开始学习Node.js系列教程五:服务器监听方法示例
2017/04/13 Javascript
使用JavaScript实现在页面中显示距离2017年中秋节的天数
2017/09/26 Javascript
详解jQuery设置内容和属性
2019/04/11 jQuery
Vue+Element UI 树形控件整合下拉功能菜单(tree + dropdown +input)
2020/08/28 Javascript
[01:07:02]DOTA2-DPC中国联赛 正赛 iG vs PSG.LGD BO3 第三场 2月26日
2021/03/11 DOTA
Python中实现参数类型检查的简单方法
2015/04/21 Python
python实现K近邻回归,采用等权重和不等权重的方法
2019/01/23 Python
Python os.access()用法实例
2019/02/18 Python
详解如何在cmd命令窗口中搭建简单的python开发环境
2019/08/29 Python
python函数装饰器之带参数的函数和带参数的装饰器用法示例
2019/11/06 Python
Matplotlib绘制雷达图和三维图的示例代码
2020/01/07 Python
Python JSON编解码方式原理详解
2020/01/20 Python
Python3.6 + TensorFlow 安装配置图文教程(Windows 64 bit)
2020/02/24 Python
用python进行视频剪辑
2020/11/02 Python
GUESS西班牙官方网上商城:美国服饰品牌
2017/03/15 全球购物
Delphi CS笔试题
2014/01/04 面试题
物理力学求职信
2014/02/18 职场文书
业务员简历自我评价
2014/03/06 职场文书
爱情保证书大全
2014/04/29 职场文书
团结就是力量演讲稿
2014/05/21 职场文书
欢迎横幅标语
2014/06/17 职场文书
我们的节日春节活动方案
2014/08/22 职场文书
咖啡厅里的创业计划书
2019/08/21 职场文书