一款基于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 多浏览器分别判断代码
Apr 01 Javascript
几个比较实用的JavaScript 测试及效验工具
Apr 18 Javascript
用jQuery模拟页面加载进度条的实现代码
Dec 19 Javascript
JS倒计时代码汇总
Nov 25 Javascript
XML文件转化成NSData对象的方法
Aug 12 Javascript
深入浅析Node.js 事件循环
Dec 20 Javascript
js基于myFocus实现轮播图效果
Feb 14 Javascript
解决JS表单验证只有第一个IF起作用的问题
Dec 04 Javascript
Vue使用.sync 实现父子组件的双向绑定数据问题
Apr 04 Javascript
JS中的变量作用域(console版)
Jul 18 Javascript
JavaScript浅层克隆与深度克隆示例详解
Sep 01 Javascript
vue 使用 sortable 实现 el-table 拖拽排序功能
Dec 26 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
通过ICQ网关发送手机短信的PHP源程序
2006/10/09 PHP
php curl_init函数用法
2014/01/31 PHP
jQuery-Easyui 1.2 实现多层菜单效果的代码
2012/01/13 Javascript
js中的replace方法使用介绍
2013/10/28 Javascript
jquery制作多功能轮播图插件
2015/04/02 Javascript
jQuery热气球动画半透明背景的后台登录界面代码分享
2015/08/28 Javascript
JavaScript 性能优化小结
2015/10/12 Javascript
Webpack 实现 Node.js 代码热替换
2015/10/22 Javascript
javascript获取网页各种高宽及位置的方法总结
2016/07/27 Javascript
Javascript实现信息滚动效果
2017/05/18 Javascript
JS实现的简单分页功能示例
2018/08/23 Javascript
微信小程序webview实现长按点击识别二维码功能示例
2019/01/24 Javascript
JS实现随机点名器
2020/04/12 Javascript
为react组件库添加typescript类型提示的方法
2020/06/15 Javascript
Vue实现多页签组件
2021/01/14 Vue.js
PHP webshell检查工具 python实现代码
2009/09/15 Python
Python+Socket实现基于UDP协议的局域网广播功能示例
2017/08/31 Python
Python实现简易Web爬虫详解
2018/01/03 Python
Python实现修改IE注册表功能示例
2018/05/10 Python
利用Python实现在同一网络中的本地文件共享方法
2018/06/04 Python
mvc框架打造笔记之wsgi协议的优缺点以及接口实现
2018/08/01 Python
使用pygame写一个古诗词填空通关游戏
2019/12/03 Python
Python操作注册表详细步骤介绍
2020/02/05 Python
Python中的xlrd模块使用原理解析
2020/05/21 Python
浅谈Python描述数据结构之KMP篇
2020/09/06 Python
Python学习工具jupyter notebook安装及用法解析
2020/10/23 Python
如何用python爬取微博热搜数据并保存
2021/02/20 Python
轻松掌握CSS3中的字体大小单位rem的使用方法
2016/05/24 HTML / CSS
茵宝(Umbro)英国官方商店:英国足球服装生产商
2016/12/29 全球购物
咖啡店的创业计划书,让你hold不住
2014/01/03 职场文书
房地产营销策划方案
2014/02/08 职场文书
幼儿园运动会入场词
2014/02/10 职场文书
廉洁自律承诺书
2014/03/27 职场文书
小学校园广播稿集锦
2014/10/04 职场文书
公司放假通知怎么写
2015/04/15 职场文书
仅用一句SQL更新整张表的涨跌幅、涨跌率的解决方案
2021/05/06 MySQL