jquery+css3实现图片区域气泡标注说明

最新推荐文章于 2022-06-30 11:11:40 发布

chuinian1728

最新推荐文章于 2022-06-30 11:11:40 发布

阅读量175

点赞数

文章标签： javascript 前端 ui ViewUI

原文链接：https://my.oschina.net/ui3g/blog/330598

版权

不多说，先看效果图

主要应用于对图片的各个区域进行说明，当移动到指定的区域的时候弹出相应的详细说明。

主要js代码：

jQuery(function(){
				
    // initialize of labels
    $('.labels a#label1').fadeIn(100).effect('bounce', { times:3 }, 300, function() {
        $('.labels a#label2').fadeIn(100).effect('bounce', { times:3 }, 300, function() {
            $('.labels a#label3').fadeIn(100).effect('bounce', { times:3 }, 300, function() {
                $('.labels a#label4').fadeIn(100).effect('bounce', { times:3 }, 300, function() {
                    $('.labels a#label5').fadeIn(100).effect('bounce', { times:3 }, 300, function() {
                        $('.labels a#label6').fadeIn(100).effect('bounce', { times:3 }, 300);
                    });
                });
            });
        });
    });

    // description close
    $('.description .close').click(function() {
        $(this).parent().fadeOut(500);
        return false;
    });

    // display description on click by labels
    $('.labels a').click(function() {
        $('.description p').html( $(this).find('p').html() ).parent().fadeIn(500);
        return false;
    });

    // close dialog on click outside
    $('.container').click(function() {
        $('.description').fadeOut(500);
    });
	
});

Html代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery+css3图像标注悬浮说明</title>

<link rel="stylesheet" type="text/css" href="css/style.css">


<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui.min.js"></script>
<script src="js/main.js"></script>

</head>
<body>

<div>
    <div>
        <a id="label1" href="#">沙发
        <p>一个沙发,家具是一项旨在座位不止一个人,并提供技术支持。</p>
            <span></span>
        </a>
        <a id="label2" href="#">电视
            <p>电视(电视)是一个电信媒体传输和接收移动图像,可以单色(黑白)或彩色,有或没有附带的声音。</p>
            <span></span>
        </a>
        <a id="label3" href="#">地毯
            <p>地毯的纺织地板上层附加到支持。</p>
            <span></span>
        </a>
        <a id="label4" href="#">椅子
            <p>椅子是家具设计的座位一个人的项目,并提供支持和武器。</p>
            <span></span>
        </a>
        <a id="label5" href="#">陈列柜
            <p>展示用于展示的东西在家里</p>
            <span></span>
        </a>
    </div>
    
    <div>
        <p></p>
        <a>X</a>
    </div>
</div>

</body>
</html>

实例演示Demo及下载：www.ui3g.com/code/uicode-326.html

转载于:https://my.oschina.net/ui3g/blog/330598