一款基于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维吉尼亚密码算法实现代码
Nov 09 Javascript
jQuery实现Twitter的自动文字补齐特效
Nov 28 Javascript
8个超实用的jQuery功能代码分享
Jan 08 Javascript
限制复选框最多选择项的实现代码
May 30 Javascript
angular双向绑定模拟探索
Dec 26 Javascript
js按条件生成随机json:randomjson实现方法
Apr 07 Javascript
jQuery操作之效果详解
May 19 jQuery
基于Swiper实现移动端页面图片轮播效果
Dec 28 Javascript
详解vue的diff算法原理
May 20 Javascript
JavaScript封闭函数及常用内置对象示例
May 13 Javascript
jQuery开发仿QQ版音乐播放器
Jul 10 jQuery
微信小程序实现简单购物车功能
Dec 30 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 写文本日志实现代码
2010/05/18 PHP
php学习笔记 数组遍历实现代码
2011/06/09 PHP
服务器变量 $_SERVER 的深入解析
2013/07/02 PHP
PHP基本语法实例总结
2016/09/09 PHP
PHP实现网页内容html标签补全和过滤的方法小结【2种方法】
2017/04/27 PHP
PHP空值检测函数与方法汇总
2017/11/19 PHP
PHP如何通过表单直接提交大文件详解
2019/01/08 PHP
JavaScript下通过的XMLHttpRequest发送请求的代码
2011/06/28 Javascript
javascript动态添加样式(行内式/嵌入式/外链式等规则)
2013/06/24 Javascript
基于OO的动画附加插件,可以实现弹跳、渐隐等动画效果 分享
2013/06/24 Javascript
JavaScript中创建字典对象(dictionary)实例
2015/03/31 Javascript
js面向对象之公有、私有、静态属性和方法详解
2015/04/17 Javascript
js实现不重复导入的方法
2016/03/02 Javascript
jQuery animate和CSS3相结合实现缓动追逐效果附源码下载
2016/04/18 Javascript
AngularJS入门示例之Hello World详解
2017/01/04 Javascript
解决URL地址中的中文乱码问题的办法
2017/02/10 Javascript
Vue.js 2.0学习教程之从基础到组件详解
2017/04/24 Javascript
详谈js中标准for循环与foreach(for in)的区别
2017/11/02 Javascript
webpack4打包vue前端多页面项目
2018/09/17 Javascript
vue axios请求频繁时取消上一次请求的方法
2018/11/10 Javascript
浅谈VueJS SSR 后端绘制内存泄漏的相关解决经验
2018/12/20 Javascript
Python Learning 列表的更多操作及示例代码
2018/08/22 Python
python 函数内部修改外部变量的方法
2018/12/18 Python
Python设计模式之外观模式实例详解
2019/01/17 Python
localStorage 设置过期时间的方法实现
2018/12/21 HTML / CSS
用HTML5制作数字时钟的教程
2015/05/11 HTML / CSS
使用HTML5 Canvas绘制圆角矩形及相关的一些应用举例
2016/03/22 HTML / CSS
大二法学专业职业生涯规划范文
2014/02/12 职场文书
求职信模板标准格式范文
2014/02/23 职场文书
公益广告宣传方案
2014/02/28 职场文书
蟋蟀的住宅教学反思
2014/04/26 职场文书
基督教追悼会答谢词
2015/09/29 职场文书
2016年清明节寄语
2015/12/04 职场文书
简述python四种分词工具,盘点哪个更好用?
2021/04/13 Python
自己搭建resnet18网络并加载torchvision自带权重的操作
2021/05/13 Python
Win Server2016远程桌面如何允许多用户同时登录
2022/06/10 Servers