一款基于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 Div中加载其他页面的实现代码
Feb 27 Javascript
javascript 函数声明与函数表达式的区别介绍
Oct 05 Javascript
遍历DOM对象内的元素属性示例代码
Feb 08 Javascript
jQuery层动画定位滑动效果的方法
Apr 30 Javascript
jquery实现在网页指定区域显示自定义右键菜单效果
Aug 25 Javascript
jQuery EasyUI Tab 选项卡问题小结
Aug 16 Javascript
jQuery中on方法使用注意事项详解
Feb 15 Javascript
js实现拖拽上传图片功能
Aug 01 Javascript
IScroll5实现下拉刷新上拉加载的功能实例
Aug 11 Javascript
JS实现图片手风琴效果
Apr 17 Javascript
详解如何使用node.js的开发框架express创建一个web应用
Dec 20 Javascript
js判断一个对象是数组(函数)的方法实例
Dec 19 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伪静态写法附代码
2008/06/20 PHP
php获取本地图片文件并生成xml文件输出具体思路
2013/04/27 PHP
joomla组件开发入门教程
2016/05/04 PHP
php empty 函数判断结果为空但实际值却为非空的原因解析
2018/05/28 PHP
解决laravel中日志权限莫名变成了root的问题
2019/10/17 PHP
php操作redis命令及代码实例大全
2020/11/19 PHP
IE和Firefox在JavaScript应用中的兼容性探讨
2008/04/01 Javascript
javascript 关于# 和 void的区别分析
2009/10/26 Javascript
简单的两种Extjs formpanel加载数据的方式
2013/11/09 Javascript
jQuery中 prop() attr()使用详解
2015/05/19 Javascript
JS脚本根据手机浏览器类型跳转WAP手机网站(两种方式)
2015/08/04 Javascript
全面解析Javascript无限添加QQ好友原理
2016/06/15 Javascript
基于jQuery实现顶部导航栏功能
2016/12/27 Javascript
vue.js将unix时间戳转换为自定义时间格式
2017/01/03 Javascript
jQuery插件MovingBoxes实现左右滑动中间放大图片效果
2017/02/28 Javascript
微信小程序城市定位的实现实例(获取当前所在国家城市信息)
2017/05/17 Javascript
angular4自定义组件详解
2017/09/28 Javascript
angularJs中跳转到指定的锚点实例($anchorScroll)
2018/08/31 Javascript
微信小程序生成分享海报方法(附带二维码生成)
2019/03/29 Javascript
python 实现得到当前时间偏移day天后的日期方法
2018/12/31 Python
详解Python用三种方式统计词频的方法
2019/07/29 Python
python颜色随机生成器的实例代码
2020/01/10 Python
Pytorch生成随机数Tensor的方法汇总
2020/09/09 Python
澳大利亚最大的网上油画销售画廊:Direct Art Australia
2018/04/15 全球购物
英国的潮牌鞋履服饰商店:size?
2019/03/26 全球购物
自我鉴定三原则
2014/01/13 职场文书
英语简历自我评价
2014/01/26 职场文书
建筑公司员工自我鉴定
2014/04/08 职场文书
诉前财产保全担保书
2014/05/20 职场文书
大学新闻系自荐书
2014/05/31 职场文书
空气环保标语
2014/06/12 职场文书
房地产经营管理专业自荐信
2014/09/02 职场文书
2015年党员创先争优承诺书
2015/01/22 职场文书
2015年实习单位评语
2015/03/25 职场文书
手把手教你用SpringBoot将文件打包成zip存放或导出
2021/06/11 Java/Android
Python可视化动图组件ipyvizzu绘制惊艳的可视化动图
2022/04/21 Python