• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号
您的位置:首页 > 程序设计 >jquery > 一款基于jQuery的图片场景标注提示弹窗特效

一款基于jQuery的图片场景标注提示弹窗特效

作者: 字体:[增加 减小] 来源:互联网 时间:2017-08-16

通过本文主要向大家介绍了jQuery,图片场景,标注,提示,弹窗等相关知识,希望对您有所帮助,也希望大家支持linkedu.com www.linkedu.com

今天给大家分享一款基于jQuery的图片场景标注提示弹窗特效,这款实例适合在图片上标注某个物件,单击弹出详情说明,兼容360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗,不支持IE8及以下浏览器。效果非常不错。效果如下:

实现的过程。

这款实例要引用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> 

分享到:QQ空间新浪微博腾讯微博微信百度贴吧QQ好友复制网址打印

您可能想查找下面的文章:

  • 基于jQuery对象和DOM对象和字符串之间的转化实例
  • jquery+css实现简单的图片轮播效果
  • 使用jQuery实现鼠标点击左右按钮滑动切换
  • jQuery实现上传图片前预览效果功能
  • jQuery初级教程之网站品牌列表效果
  • 基于jquery实现多选下拉列表
  • jQuery接受后台传递的List的实例详解
  • 详解jquery选择器的原理
  • jQuery上传插件webupload使用方法
  • 关于jquery form表单序列化的注意事项详解

相关文章

  • 2017-08-16jQuery插件zTree实现获取当前选中节点在同级节点中序号的方法
  • 2017-08-16利用Jquery实现可多选的下拉框
  • 2017-08-16jQuery实现简单下拉导航效果
  • 2017-08-16jQuery实现元素拖拽并cookie保存顺序的方法
  • 2017-08-16jQuery实现点击关注和取消功能
  • 2017-08-16thinkphp 表名 大小写 窍门
  • 2017-08-16jQuery入门知识简介
  • 2017-08-16一款简单的jQuery图片标注效果附源码下载
  • 2017-08-16jQuery webuploader分片上传大文件
  • 2017-08-16jquery实现的一个导航滚动效果具体代码

文章分类

  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号

最近更新的内容

    • JQuery AJAX 中文乱码问题解决
    • Jquery选中或取消radio示例
    • JQuery实现防止退格键返回的方法
    • jQuery中需要注意的细节问题小结
    • seajs加载jquery时提示$ is not a function该怎么解决
    • jQuery插件formValidator自定义函数扩展功能实例详解
    • jQuery的ajax下载blob文件
    • jquery ajax实现下拉框三级无刷新联动,且保存保持选中值状态
    • input 输入框获得/失去焦点时隐藏/显示文字(jquery版)
    • jQuery向上遍历DOM树之parents(),parent(),closest()之间的区别

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有