一款基于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 相关文章推荐
document.all还是document.getElementsByName?
Jul 21 Javascript
javascript AutoScroller 函数类
May 29 Javascript
使用JQuery和s3captche实现一个水果名字的验证
Aug 14 Javascript
可以用来调试JavaScript错误的解决方案
Aug 07 Javascript
js 上传图片预览问题
Dec 06 Javascript
关闭浏览器时提示onbeforeunload事件
Dec 25 Javascript
textarea不能通过maxlength属性来限制字数的解决方法
Sep 01 Javascript
Javascript毫秒数用法实例
Feb 05 Javascript
令按钮悬浮在(手机)页面底部的实现方法
May 02 Javascript
js异步编程小技巧详解
Aug 14 Javascript
express如何解决ajax跨域访问session失效问题详解
Jun 20 Javascript
JS原生实现轮播图的几种方法
Mar 23 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 管理系统程序中的后门
2009/08/05 PHP
PHP mysqli_free_result()与mysqli_fetch_array()函数详解
2016/09/21 PHP
php提交表单时保留多个空格及换行的文本样式的方法
2017/06/20 PHP
Extjs学习过程中新手容易碰到的低级错误积累
2010/02/11 Javascript
Tips 带三角可关闭的文字提示
2010/10/06 Javascript
jquery showModelDialog的使用方法示例详解
2013/11/19 Javascript
JavaScript声明变量时为什么要加var关键字
2014/09/29 Javascript
js的window.showModalDialog及window.open用法实例分析
2015/01/29 Javascript
数据分析软件之FineReport教程:[5]参数界面JS(全)
2015/08/13 Javascript
jQuery自定义滚动条完整实例
2016/01/08 Javascript
前端实现文件的断点续传(前端文件提交+后端PHP文件接收)
2016/11/04 Javascript
JQ图片文件上传之前预览功能的简单实例(分享)
2017/11/12 Javascript
微信小程序模版渲染详解
2018/01/26 Javascript
微信小程序项目总结之点赞 删除列表 分享功能
2018/06/25 Javascript
详解如何在微信小程序中愉快地使用sass
2018/07/30 Javascript
手把手教你如何使用nodejs编写cli命令行
2018/11/05 NodeJs
使用p5.js临摹动态图形
2019/10/23 Javascript
vue vantUI tab切换时 list组件不触发load事件的问题及解决方法
2020/02/14 Javascript
Python将多份excel表格整理成一份表格
2018/01/03 Python
用Python一键搭建Http服务器的方法
2018/06/01 Python
python使用pymongo操作mongo的完整步骤
2019/04/13 Python
Python定时任务APScheduler的实例实例详解
2019/07/22 Python
tensorflow保持每次训练结果一致的简单实现
2020/02/17 Python
python和C++共享内存传输图像的示例
2020/10/27 Python
Pycharm plot独立窗口显示的操作
2020/12/11 Python
HTML5 Canvas实现平移/放缩/旋转deom示例(附截图)
2013/07/04 HTML / CSS
SheIn俄罗斯:时尚女装网上商店
2017/02/28 全球购物
英语系本科生个人求职信
2013/09/21 职场文书
大学生第一学年自我鉴定
2014/09/12 职场文书
派出所班子党的群众路线对照检查材料思想汇报
2014/10/01 职场文书
2015年团委副书记工作总结
2015/07/23 职场文书
小学数学教师研修日志
2015/11/13 职场文书
Python OpenCV 彩色与灰度图像的转换实现
2021/06/05 Python
Java面试题冲刺第十五天--设计模式
2021/08/07 面试题
python脚本框架webpy模板赋值实现
2021/11/20 Python
python神经网络ResNet50模型
2022/05/06 Python