一款基于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生成随机数之random函数随机示例
Dec 20 Javascript
jQuery中innerHeight()方法用法实例
Jan 19 Javascript
使用Meteor配合Node.js编写实时聊天应用的范例
Jun 23 Javascript
关于js里的this关键字的理解
Aug 17 Javascript
Windows下用PyCharm和Visual Studio开始Python编程
Oct 26 Javascript
D3.js实现饼状图的方法详解
Sep 21 Javascript
详解获取jq ul第一个li定位的四种解决方案
Nov 23 Javascript
关于在mongoose中填充外键的方法详解
Aug 14 Javascript
详细分析jsonp的原理和实现方式
Nov 20 Javascript
vue项目部署到Apache服务器中遇到的问题解决
Aug 24 Javascript
Vue.js 中制作自定义选择组件的代码附演示demo
Feb 28 Javascript
SSM VUE Axios详解
Oct 05 Vue.js
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
一个好用的分页函数
2006/11/16 PHP
测试php函数的方法
2013/11/13 PHP
C# WinForm中实现快捷键自定义设置实例
2015/01/23 PHP
PHP实现的大文件切割与合并功能示例
2018/04/10 PHP
php快速导入大量数据的实例方法
2019/09/23 PHP
【消息提示组件】,兼容IE6/7&amp;&amp;FF2
2007/09/04 Javascript
js 发个判断字符串是否为符合标准的函数
2009/04/27 Javascript
基于JQUERY的两个ListBox子项互相调整的实现代码
2011/05/07 Javascript
上传文件返回的json数据会被提示下载问题解决方案
2014/12/03 Javascript
配置Grunt的Task时通配符支持和动态生成文件名问题
2015/09/06 Javascript
javascript运动效果实例总结(放大缩小、滑动淡入、滚动)
2016/01/08 Javascript
纯js实现瀑布流布局及ajax动态新增数据
2016/04/07 Javascript
JavaScript 继承详解(六)
2016/10/11 Javascript
微信js-sdk界面操作接口用法示例
2016/10/12 Javascript
php main 与 iframe 相互通讯类(js+php同域/跨域)
2017/09/14 Javascript
React数据传递之组件内部通信的方法
2017/12/31 Javascript
JavaScript 作用域scope简单汇总
2019/10/23 Javascript
jQuery实现移动端图片上传预览组件的方法分析
2020/05/01 jQuery
Vue使用鼠标在Canvas上绘制矩形
2020/12/24 Vue.js
Python正则表达式非贪婪、多行匹配功能示例
2017/08/08 Python
Python 函数基础知识汇总
2018/03/09 Python
Python sys模块常用方法解析
2020/02/20 Python
Python post请求实现代码实例
2020/02/28 Python
Pandas将列表(List)转换为数据框(Dataframe)
2020/04/24 Python
浅谈python 调用open()打开文件时路径出错的原因
2020/06/05 Python
python数据类型强制转换实例详解
2020/06/22 Python
python根据用户需求输入想爬取的内容及页数爬取图片方法详解
2020/08/03 Python
python中二分查找法的实现方法
2020/12/06 Python
CSS3改变浏览器滚动条样式
2019/01/04 HTML / CSS
美国电子产品购物网站:BuyDig.com
2020/06/17 全球购物
what is the difference between ext2 and ext3
2015/08/25 面试题
成龙洗发水广告词
2014/03/14 职场文书
有关爱国演讲稿
2014/05/07 职场文书
行政执法队伍作风整顿个人剖析材料
2014/10/11 职场文书
教师党员个人总结
2015/02/10 职场文书
解决numpy和torch数据类型转化的问题
2021/05/23 Python