一款基于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与自动伸缩图片 自动缩小图片的多浏览器兼容的方法总结
Mar 12 Javascript
初学js插入节点appendChild insertBefore使用方法
Jul 04 Javascript
如何让页面在打开时自动刷新一次让图片全部显示
Dec 17 Javascript
在AngularJS应用中实现一些动画效果的代码
Jun 18 Javascript
理解JavaScript表单的基础知识
Jan 25 Javascript
小白谈谈对JS原型链的理解
May 03 Javascript
关于JS中二维数组的声明方法
Sep 24 Javascript
Angular学习笔记之angular的$filter服务浅析
Nov 12 Javascript
解析Vue2.0双向绑定实现原理
Feb 23 Javascript
vue2.0 中#$emit,$on的使用详解
Jun 07 Javascript
微信小程序对接七牛云存储的方法
Jul 30 Javascript
详解无限滚动插件vue-infinite-scroll源码解析
May 12 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/01/12 PHP
PHP Opcache安装和配置方法介绍
2015/05/28 PHP
nginx+thinkphp下解决不支持pathinfo模式
2015/07/01 PHP
Yii全局函数用法示例
2017/01/22 PHP
php读取本地json文件的实例
2018/03/07 PHP
PHP结合jquery ajax实现上传多张图片,并限制图片大小操作示例
2019/03/01 PHP
php apache开启跨域模式过程详解
2019/07/08 PHP
JavaScript中几种常见排序算法小结
2011/02/22 Javascript
Jquery中&quot;$(document).ready(function(){ })&quot;函数的使用详解
2013/12/30 Javascript
js验证输入是否为手机号码或电话号码示例
2013/12/30 Javascript
javascript实现类似百度分享功能的方法
2015/07/27 Javascript
javascript HTML5文件上传FileReader API
2020/03/27 Javascript
Angularjs实现分页和分页算法的示例代码
2016/12/23 Javascript
vue基于Vue2.0和高德地图的地图组件实例
2017/04/28 Javascript
Node.js+Express+MySql实现用户登录注册功能
2017/07/10 Javascript
Web技术实现移动监测的介绍
2017/09/18 Javascript
JS设计模式之访问者模式定义与用法分析
2018/02/05 Javascript
Angular4 ElementRef的应用
2018/02/26 Javascript
深入了解javascript 数组的sort方法
2018/06/01 Javascript
使用JavaScript实现node.js中的path.join方法
2018/08/12 Javascript
VUE中鼠标滚轮使div左右滚动的方法详解
2020/12/14 Vue.js
[02:42]决战东方!DOTA2亚洲邀请赛重启荣耀之争
2017/03/17 DOTA
Python读取ini文件、操作mysql、发送邮件实例
2015/01/01 Python
黑科技 Python脚本帮你找出微信上删除你好友的人
2016/01/07 Python
Python 对象中的数据类型
2017/05/13 Python
Python实现K折交叉验证法的方法步骤
2019/07/11 Python
python爬虫 基于requests模块的get请求实现详解
2019/08/20 Python
Python面向对象之多态原理与用法案例分析
2019/12/30 Python
Python3.9.1中使用match方法详解
2021/02/08 Python
CSS3中的元素过渡属性transition示例详解
2016/11/30 HTML / CSS
经理秘书求职自荐信范文
2014/03/23 职场文书
颁奖典礼主持词
2014/03/25 职场文书
群众路线个人剖析材料及整改措施
2014/11/04 职场文书
服务员岗位职责范本
2015/04/09 职场文书
一个家长教育孩子的心得体会
2016/01/15 职场文书
快速学习Oracle触发器和游标
2021/06/30 Oracle