您的位置：首页 > Web前端 > JQuery

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

2014-10-14 00:00 162 查看

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

不多说，先看效果图

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

主要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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： jquery 图片标注气泡

相关文章推荐

新的分享

章节导航