toolTip(用svg制作出富有动态的对话框)

昨晚看了用svg如何制作富有动态的tooltip，于是今天就心血来潮学着做一下，于是也成功做出来，也明白其中的原理，收获颇多阿！接下来要多去学习svg，这是个好东西。

这其中也注意了一些平时纠结的细节应该怎么去做，比如：

<article>
<section id="sound1">
</section>
<section id="sound2">
</section>
</article>

article标签长度为600px,section 分别是300px，然后设置其为display:inline-block;然后是下面的效果：

本来按常理来说的话，应该是头像水平排列，这是因为display:inline-block;会将article标签和section标签之间空白渲染成空格，空格展位，所以会导致图片不在同一排，解决的办法是给article标签和section标签添加如下的css代码：

article{
width:600px;
margin:200px;
font-size:0;
}
article section{
display:inline-block;
width:300px;
font-size:14px;
position:relative;
}

于是空白去掉了！

另外对于svg的web图像，我们可以对其进行修改，使其图像的样式可进行修改，它的格式大概如下（举一例子）：

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 17.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="600px" height="300px" viewBox="0 0 600 300" enable-background="new 0 0 600 300" xml:space="preserve">
<polygon points="89.571,6.648 513.333,6.648 590.25,75.342 553.002,215.306 313.065,273.358 300,293.352 288.876,272.71
48.936,215.306 9.75,75.342 "/>
</svg>

于是我们不可能将其引入到html文件里面，如果说有很多这种svg图像，修改起来很麻烦！

于是使用的是ajax来加载这个图片：

html的dom：<svg data-src="bubble1.svg" width="280" height="140"></svg>

// 问题二：对于svg图像我们要如何引入，不可能将整个svg都引入吧，不便于修改编辑
// 技巧二：使用js进行加载
$(‘svg[data-src]‘).each(function(index, svg) {
var src = $(svg).data(‘src‘); //data用于获取data-*属性的路径
$.ajax({
url: src,
dataType: ‘xml‘,
success: function(content) {
var doc = content.documentElement;
$(doc).attr({
width: $(svg).attr(‘width‘),
height: $(svg).attr(‘height‘)
});
$(svg).after(doc).remove();
}
})
});

还有对于图片的描边动画效果，这里又怎么个好的方法，只针对svg图像：

使用stroke-dasharray（虚线描边，可以不断尝试，使其调至适应大小，完成实现整个描边的效果）stroke-dashoffset（虚线间隔，调至整个svg没有描边的效果），然后使用transition实现这个动画

最终效果（如图，没有在线演示，动画效果出不来，不过下面贴的代码直接复制，再去下载两个svg图片和头像就可以使用）

代码如下：

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<title>toolTip聊天对话框制作</title>
<meta charset="utf-8"/>
<meta name="keywords" content="" />
<meta name="description" content="" />
<script type="text/javascript" src="jquery.js"></script>
<style type="text/css">
h1{
color:red;
font-size:18px;
}
article{
width:600px;
margin:200px;
font-size:0;
}
article section{
/*问题一：对于display:inline-block;会出现两个section无法并排排列，由于使用此属性会将article与section之间的空白处渲染成空格，于是无法并排*/
/*技巧一： 父元素设置 font-size:0;清除空白*/
display:inline-block;
width:300px;
font-size:14px;
position:relative;
}
.text-center{
text-align:center;
}
#sound1,#sound2{
cursor:pointer;
}
#sound1 img,#sound2 img{
width:100px;
height:100px;
border-radius:100%;
}
.sound_1,.sound_2{
position:absolute;
top:-104px;
width:200px;
height:100px;
box-sizing: border-box;
opacity:1;
}
.sound_2{
padding:28px;
}
.sound_1{
padding: 25px 68px 25px 30px;
left: -150px;
top: -134px;
width: 280px;
height: 140px;
}
.sound_1 svg ,.sound_2 svg{
position:absolute;
top:0;
left:0;
}
.sound_1 p,.sound_2 p{
position:relative;
margin:0;
color:#444;
font-size:12px;
}
.sound_1 svg path, .sound_2 svg polygon{
fill:#fff;/*填充的颜色*/
stroke:red;/*描边的颜色*/
stroke-width: 6px;/*边的宽度*/
}
.sound_1 svg #path1 {
transform: scale(0, 0);
transform-origin: center;
opacity: 0;
transition-duration: .3s;
transition-delay: 0;
}
.sound_1 svg #path2 {
transform: scale(0, 0);
transform-origin: center;
opacity: 0;
transition-duration: .3s;
transition-delay: .1s;
}
.sound_1 svg #path3 {
transform: scale(0, 0);
transform-origin: center;
opacity: 0;
transition-duration: .3s;
transition-delay: .2s;
}
.sound_1 svg #path4 {
transform: scale(0, 0);
transform-origin: center;
opacity: 0;
transition-duration: .3s;
transition-delay: .25s;
}
.sound_1 p {
transition: .2s .35s;
opacity: 0;
transform: translate(0, -10px);
}
#sound1:hover .sound_1 svg #path1,#sound1:hover .sound_1 svg #path2,#sound1:hover .sound_1 svg #path3,#sound1:hover .sound_1 svg #path4{
transform: scale(1, 1);
opacity: 1;
transition-delay: 0;
}
#sound1:hover .sound_1 p{
opacity: 1;
transform: translate(0, 0);
}
/*问题三：对于图片的描边动画效果，这里又怎么个好的方法，只针对svg图像*/
/*技巧三：使用stroke-dasharray（虚线描边，可以不断尝试，使其调至适应大小，实现描边的效果）stroke-dashoffset（虚线间隔，调至整个svg没有描边的效果），然后使用transition实现这个动画 */
.sound_2 svg polygon{
stroke-dasharray: 1500;
stroke-dashoffset: 1500;
fill-opacity: 0;
transition: .6s;
}
.sound_2 p {
transition: .4s;
transform: scale(-0.5);
opacity: 0;
transform: translate(0, -10px);
}
#sound2:hover .sound_2 svg polygon{
stroke-dashoffset: 0;
fill-opacity: 1;
}
#sound2:hover .sound_2 p {
transform: scale(0);
opacity: 1;
transform: translate(0, 0);
}
</style>
</head>
<body>

<h1>toolTip聊天对话框制作</h1>

<article>
<section id="sound1">
<div class="text-center"><img src="nan.jpg" /></div>
<p class="text-center">韩国正太</p>
<div class="sound_1">
<svg data-src="bubble1.svg" width="280" height="140"></svg>
<p>听说优衣库的试衣间已全面升级，空间大小扩充一倍，精装修，同时四面都安有镜子，方便无死角录像呢，要去试一下不，美女！</p>
</div>
</section>
<section id="sound2">
<div class="text-center"><img src="nv.jpg" /> </div>
<p class="text-center">优衣库美女</p>
<div class="sound_2">
<svg data-src="bubble2.svg" width="200" height="100"></svg>
<p>听起来就很刺激，那走，帅哥，准备家伙，go！</p>
</div>
</section>
</article>

<script type="text/javascript">
$(document).ready(function() {
// 问题二：对于svg图像我们要如何引入，不可能将整个svg都引入吧，不便于修改编辑
// 技巧二：使用js进行加载
$(‘svg[data-src]‘).each(function(index, svg) {
var src = $(svg).data(‘src‘); //data用于获取data-*属性的路径
$.ajax({
url: src,
dataType: ‘xml‘,
success: function(content) {
var doc = content.documentElement;
$(doc).attr({
width: $(svg).attr(‘width‘),
height: $(svg).attr(‘height‘)
});
$(svg).after(doc).remove();
}
})
});
})
</script>
</body>
</html>

时间： 2024-12-06 08:53:44

toolTip(用svg制作出富有动态的对话框)的相关文章

用duilib制作仿QQ2013动态背景登录器

转载请说明原出处,谢谢~~ 在上一篇博客里,我修复了CActiveXUI控件的bug,从而可以使用flash动画来制作程序的背景,这篇博客说明一下应该怎么使用CActiveXUI控件创建透明无窗体的背景. 去年的QQ2013的登陆界面就是动态界面,上篇博客我说道了,Duiengine已经有高人做好了仿QQ界面的代码,我这里只是把QQ2013的动态登陆界面制作出来.而QQ2014又换了全新的界面,不过熟悉UI制作的朋友知道,模仿 QQ2014的登陆界面比QQ2013的还要简单.可以看到QQ2013

使用 SVG 制作单选和多选框动画【附源码】

通过 JavaScript 实现 SVG 路径动画,我们可以做很多花哨的东西.今天我们要为您介绍一些复选框和单选按钮效果.实现的主要思路是隐藏原生的输入框,使用伪元素创造更具吸引力的样式,输入框被选中的时候执行 SVG 动画. 在线演示      立即下载 温馨提示:为保证最佳的效果,请在 IE10+.Chrome.Firefox 和 Safari 等现代浏览器中浏览. 对于自定义的复选框或单选按钮,我们使用标签的伪元素 ::before 并通过设置不透明度为0来因此输入框.初始,我们通过 Ja

Windows 下VC++6.0制作、使用动态库和静态库

Windows 下VC++6.0制作.使用动态库和静态库 一.VC++6.0制作.使用静态库 静态库制作 1.如图一在VC++6.0中new一个的为win32 static library工程并新建一个.cpp和一个.h(C++header file)文件 2..cpp程序直接照老师给的打,注意这里需要改错,去掉(long) 3. .h文件需要自己编写格式如下.以head.h为例 #ifndef _HEAD_H_ #define _HEAD_H_ unsigned long unsgn_pow(

用svg制作loading动画

首先说明:由于各浏览器对svg动画事件支持不统一,此loading动画在Firefox,Opera,Chrome中均没有问题,IE和Safari中有问题,可能是不支持SIML写动画的语法, 但是用Canvas写的话,在颜色的渐变方面会有问题: 线性渐变需要传递四个参数 xstart:渐变开始点x坐标       ystart:渐变开始点y坐标       xEnd:渐变结束点x坐标       yEnd:渐变结束点y坐标 这样画出来的渐变只能用于矩形之类的图形,无法应用在诸如扇形内,此loadi

修改OpenSSL默认编译出的动态库文件名称

在 Windows 平台上调用动态链接库 dll 文件时,有两种方式:a) 隐式的加载时链接:使用 *.lib (导入库)文件,在 IDE 的链接器相关设置中加入导入库 lib 文件的名称,或在程序中加入预编译指令 #pragma comment (lib,”*.lib”).b) 显式的运行时链接.不使用 *.lib (导入库)文件,使用 Load Library(),GetProcAddress() 函数来加载动态库中的函数.要注意的是在导入库 lib 文件内部包含了其对应 dll 文件的名称

利用FluidMoveBehavior制作出手机通讯录平滑的效果

最近学习Blend,原来Blend制作动画等效果非常棒.下面演示一下FluidMoveBehavior应用,利用Blend中行为中的FluidMoveBehavior制作出手机通讯录平滑的效果 1.在画布上添加一个ListBox,添加N多个<TextBlock>,如图 2.在ListBox上右键按图指示操作创建副本 3.在模板中选择ItemsPresenter, 4.然后从行为面板中选择FluidMoveBehavior拖放到画板上的ItemsPresenter对象上 5.返回到ListBox

怎样才能制作出好的宣传片

怎样才能制作出好的宣传片一个优秀而又专业的企业宣传片制作公司,遇到有企业宣传片制作需求的客户,一般会先告诉企业客户,怎么样选择一个具备很强策划.强制作能力.高专业素养的影视广告公司.并且选择了那样的影视制作公司后,会给客户公司带来怎么样的盈利目的.让客户满意是影视广告拍摄公司追求的最高目的,也只有立足于让客户满意,才能投以十二万分激情及专业知识展开工作.一部好的企业宣传片能够让大众对企业有更深层次的了解与认知,那就来让北京宣传片制作公司来说说如何做出好的企业宣传片.1.企业宣传片是什么广告活动对

如何制作出像顶尖咨询公司咨询顾问们那种风格的 PPT？

文章为原创,转载请与我联系获得许可 作者司马懿PPT 如何制作出像顶尖咨询公司咨询顾问们那种风格的 PPT?这个问题基本上是个试金石,通过回答的水平就可以看出对于PPT的理解和真正的商务类型PPT的水平,我也尝试回答一下,也欢迎各位大咖进行评判.我们首先得去了解一下问题本身,这里有两个关键词,一个是顶尖咨询公司,一个是咨询顾问.先来说顶尖咨询公司,那么有哪些咨询公司算顶尖咨询公司呢?我想各位在网上一搜十大咨询公司就出来了,基本上就是大家非常熟悉的哪些国际性的大的咨询公司:(顺序不代表排名)麦肯锡

Android Studio 制作出来的9图无法进行拖拉，导致无法制作出正确的9图

使用Android Studio制作,但发现无法进行拖拽,无法制作正确的9图,如下所示: 这几根线无法拖拽. 经分析得知,原来是png图片的问题,原本的图片是8位的png图片,这样子制作出来的9图就是无法拖拽的.  如何解决?--> 获取32位的png图片即可. 方式1:可以让UI提供32位的png图片,16位的png图片也不行,需要32位的. 方式2:自己将8位的png图片转成32位的. 使用画图3D打开: 然后另存为 转出来的图片就是32位的: 然后就可以制作出可以拖拽的9图了. 原文地址: