toolTip(用svg制作出富有动态的对话框)
昨晚看了用svg如何制作富有动态的tooltip，于是今天就心血来潮学着做一下，于是也成功做出来，也明白其中的原理，收获颇多阿！接下来要多去学习svg，这是个好东西。
这其中也注意了一些平时纠结的细节应该怎么去做(演示：http://www.live086.cn/toolTip/)，比如：
<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>
toolTip(用svg制作出富有动态的对话框)的更多相关文章
- 使用 SVG 制作单选和多选框动画【附源码】
通过 JavaScript 实现 SVG 路径动画,我们可以做很多花哨的东西.今天我们要为您介绍一些复选框和单选按钮效果.实现的主要思路是隐藏原生的输入框,使用伪元素创造更具吸引力的样式,输入框被选中 ...
- Windows 下VC++6.0制作、使用动态库和静态库
Windows 下VC++6.0制作.使用动态库和静态库 一.VC++6.0制作.使用静态库 静态库制作 1.如图一在VC++6.0中new一个的为win32 static library工程并新建一 ...
- 利用R语言制作出漂亮的交互数据可视化
利用R语言制作出漂亮的交互数据可视化 利用R语言也可以制作出漂亮的交互数据可视化,下面和大家分享一些常用的交互可视化的R包. rCharts包 说起R语言的交互包,第一个想到的应该就是rCharts包 ...
- 奇思妙想 CSS 3D 动画 | 仅使用 CSS 能制作出多惊艳的动画？
本文将从比较多的方面详细阐述如何利用 CSS 3D 的特性,实现各类有趣.酷炫的动画效果.认真读完,你将会收获到: 了解 CSS 3D 的各种用途 激发你新的灵感,感受动画之美 对于提升 CSS 动画 ...
- 太可爱了！CSS3 & SVG 制作的米老鼠钟表
米老鼠是大家非常熟悉的迪斯尼动画形象.这是一个可爱的效果,结合 CSS & SVG 图形实现的米老鼠钟表效果.Web 技术让很多生活中的事物都能搬到网上去,后面的推荐阅读也有很多的效果,感兴趣 ...
- 利用DreamweaverCS5制作一个含有动态标题的教程
DreamweaverCS5怎么制作一个含有动态标题?做一个网页就先要做一个标题,一个好标题会让网页让人印象深刻,有动态的标题会让网页更生动,下面我就介绍一下怎么制作一个含有动态的标题 做一个网页 ...
- 修改OpenSSL默认编译出的动态库文件名称
在 Windows 平台上调用动态链接库 dll 文件时,有两种方式:a) 隐式的加载时链接:使用 *.lib (导入库)文件,在 IDE 的链接器相关设置中加入导入库 lib 文件的名称,或在程序中 ...
- 教你用SVG画出一条龙
先看demo,九十七度 其实使用svg画出这条龙很简单,关键不在于怎么使用svg,而在于你的美术功底,哈哈. 好吧,当然基础是不能忽略的,先看下这条龙的代码: <svg id="lon ...
- OpenGL 画出雷达动态扫描效果(二) 非底图
OpenGL 画出雷达动态扫描效果(一)中给出了已一张图片作为底图的雷达扫面程序 如果有漂亮的雷达底图的话,效果应该非常不错的,另外也可以直接手绘雷达框架 效果如下 雷达主体代码 glLineWidt ...
随机推荐
- CAS 是什么
CAS是英文单词Compare And Swap的缩写,翻译过来就是比较并替换. CAS机制当中使用了3个基本操作数:内存地址V,旧的预期值A,要修改的新值B. 更新一个变量的时候,只有当变量的预期值 ...
- ABP捕捉异常错误代码
在服务层或者CORE层 随便哪里都可以 创建一个捕捉异常的文件夹 里面写一个LonsidException类 继承后面的接口 然后重写继承的方法 这样在ABP项目运行阶段 无论在哪里出现异 ...
- 《剑指offer》第五十题（字符流中第一个只出现一次的字符）
// 面试题50(二):字符流中第一个只出现一次的字符 // 题目:请实现一个函数用来找出字符流中第一个只出现一次的字符.例如,当从 // 字符流中只读出前两个字符"go"时,第一 ...
- Qt中的角度转弧度
在Qt中,qAsin(),qAtan2()等三角函数的返回值是弧度而不是角度,因此要将弧度转化为角度. 弧度=角度*Pi/180 以qAtan()函数为例 qreal qAtan(qreal v) R ...
- Python&HDF5目录
最近一直没更新python&量化的博客,是因为忙于看HDF5的书,写VNPY框架,学scrapy爬虫. 本来写博客的目的就是为了当作一种教材,当遇到不会的问题过来找答案. 对于HDF5下面这本 ...
- 动态规划-Race Car
2018-10-26 21:06:54 问题描述: 问题求解: 方法一.BFS 首先将使用BFS进行解空间的遍历,也就是将本问题转化成了搜索问题,但是有两个地方需要注意: 1.状态保存的问题,每个位置 ...
- php中文件操作常用函数有哪些
php中文件操作常用函数有哪些 一.总结 一句话总结:读写文件函数 判断文件或者目录是否存在函数 创建目录函数 file_exists() mkdir() file_get_content() fil ...
- （转）C# System.Diagnostics.Process.Start使用
经常会遇到在Winform或是WPF中点击链接或按钮打开某个指定的网址, 或者是需要打开电脑中某个指定的硬盘分区及文件夹, 甚至是"控制面板"相关的东西, 如何做呢? 方法:使用 ...
- MySQL Connector/J
5.1 Developer Guide 1. MysQL为由Java语言编程的客户端程序提供连接:MySQL Connector/J,这是一个实现Java Database Connectivity( ...
- mysql5.6以上版本： timestamp current_timestamp报1064/1067错误
mysql5.6以上版本: timestamp current_timestamp报1064/1067错误 在创建时间字段的时候 DEFAULT CURRENT_TIMESTAMP表示当插入数据的时候 ...