一款基于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 相关文章推荐
基于jQuery的日期选择控件
Oct 27 Javascript
几个比较实用的JavaScript 测试及效验工具
Apr 18 Javascript
浅析js封装和作用域
Jul 09 Javascript
node.js中的fs.readFileSync方法使用说明
Dec 15 Javascript
JS函数this的用法实例分析
Feb 05 Javascript
js实现TAB切换对应不同颜色的代码
Aug 31 Javascript
Bootstrap每天必学之按钮(一)
Nov 24 Javascript
浅谈jQuery 中的事件冒泡和阻止默认行为
May 28 Javascript
bootstrap3 dialog 更强大、更灵活的模态框
Apr 20 Javascript
关于axios不能使用Vue.use()浅析
Jan 12 Javascript
Element实现表格分页数据选择+全选所有完善批量操作
Jun 07 Javascript
Openlayers实现距离面积测量
Sep 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 Web开发MVC框架的Smarty使用说明
2013/04/19 PHP
PHP jQuery表单,带验证具体实现方法
2014/02/15 PHP
destoon在360浏览器下出现用户被强行注销的解决方法
2014/06/26 PHP
php列出mysql表所有行和列的方法
2015/03/13 PHP
PHP输出缓冲控制Output Control系列函数详解
2015/07/02 PHP
在laravel中使用with实现动态添加where条件
2019/10/10 PHP
PHP获取真实IP及IP模拟方法解析
2020/11/24 PHP
JAVASCRIPT style 中visibility和display之间的区别
2010/01/22 Javascript
javascript getElementsByClassName实现代码
2010/10/11 Javascript
Javascript面象对象成员、共享成员变量实验
2010/11/19 Javascript
使用JavaScript构建JSON格式字符串实现步骤
2013/03/22 Javascript
js 自定义个性下拉选择框示例
2013/08/20 Javascript
JavaScript中的对象的extensible属性介绍
2014/12/30 Javascript
Jquery 实现弹出层插件
2015/01/28 Javascript
JS和css实现检测移动设备方向的变化并判断横竖屏幕
2015/05/25 Javascript
基于Jquery实现万圣节快乐特效
2015/11/01 Javascript
bootstrap学习笔记之初识bootstrap
2016/06/21 Javascript
javascript实现的字符串转换成数组操作示例
2019/06/13 Javascript
详解vue beforeRouteEnter 异步获取数据给实例问题
2019/08/09 Javascript
JavaScript创建、读取和删除cookie
2019/09/03 Javascript
vux-scroller实现移动端上拉加载功能过程解析
2019/10/08 Javascript
jQuery冲突问题解决方法
2021/01/19 jQuery
[01:04:48]VGJ.S vs TNC Supermajor 败者组 BO3 第一场 6.6
2018/06/07 DOTA
python实现简单socket程序在两台电脑之间传输消息的方法
2015/03/13 Python
Python中threading模块join函数用法实例分析
2015/06/04 Python
Python Matplotlib库安装与基本作图示例
2019/01/09 Python
pycharm 将python文件打包为exe格式的方法
2019/01/16 Python
Python 操作 PostgreSQL 数据库示例【连接、增删改查等】
2020/04/21 Python
用python对excel查重
2020/12/07 Python
德国家用电器购物网站:Premiumshop24
2019/08/22 全球购物
大学毕业通用个人的求职信
2013/12/08 职场文书
办公自动化毕业生求职信
2014/03/09 职场文书
工商管理专业自荐信
2014/06/03 职场文书
植物生产学专业求职信
2014/08/08 职场文书
一份没有按时交货失信于客户的检讨书
2014/09/19 职场文书
社区公民道德宣传日活动总结
2015/03/23 职场文书