用svg制作富有动态的tooltip


Posted in Javascript onJuly 17, 2015

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

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

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

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

用svg制作富有动态的tooltip

本来按常理来说的话,应该是头像水平排列,这是因为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图片和头像就可以使用)

用svg制作富有动态的tooltip

用svg制作富有动态的tooltip

代码如下:

<!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>

以上所述就是本文的全部内容了,希望大家能够喜欢。

Javascript 相关文章推荐
原创javascript小游戏实现代码
Aug 19 Javascript
基于jQuery实现的图片切换焦点图整理
Dec 07 Javascript
JS实现超精简的链接列表在固定区域内滚动效果代码
Nov 04 Javascript
javascript 判断页面访问方式电脑或者移动端
Sep 19 Javascript
前端页面文件拖拽上传模块js代码示例
May 19 Javascript
Vue.js中兄弟组件之间互相传值实例
Jun 01 Javascript
vue.js element-ui tree树形控件改iview的方法
Mar 29 Javascript
微信小程序实现人脸检测功能
May 25 Javascript
Vue入门学习笔记【基本概念、对象、过滤器、指令等】
Apr 13 Javascript
Angular Excel 导入与导出的实现代码
Apr 17 Javascript
vue 动态表单开发方法案例详解
Dec 02 Javascript
有趣的JavaScript隐式类型转换操作实例分析
May 02 Javascript
jquery实现根据浏览器窗口大小自动缩放图片的方法
Jul 17 #Javascript
JavaScript调用浏览器打印功能实例分析
Jul 17 #Javascript
JS判断页面是否出现滚动条的方法
Jul 17 #Javascript
javascript图片预加载实例分析
Jul 16 #Javascript
javascript的BOM汇总
Jul 16 #Javascript
.NET微信公众号开发之创建自定义菜单
Jul 16 #Javascript
初识Javascript小结
Jul 16 #Javascript
You might like
全国FM电台频率大全 - 4 山西省
2020/03/11 无线电
PHP父类调用子类方法的代码例子
2014/04/09 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(十六)
2014/06/30 PHP
php图片水印添加、压缩、剪切的封装类实现
2020/04/18 PHP
Thinkphp5框架简单实现钩子(Hook)行为的方法示例
2019/09/03 PHP
基于laravel-admin 后台 列表标签背景的使用方法
2019/10/03 PHP
JavaScript Event学习第四章 传统的事件注册模型
2010/02/07 Javascript
JavaScript中的面向对象介绍
2012/06/30 Javascript
html中的input标签的checked属性jquery判断代码
2012/09/19 Javascript
运行Node.js的IIS扩展iisnode安装配置笔记
2015/03/02 Javascript
在Node.js应用中使用Redis的方法简介
2015/06/24 Javascript
JS实现的表格行上下移动操作示例
2016/08/03 Javascript
Bootstrap CSS组件之分页(pagination)和翻页(pager)
2016/12/17 Javascript
Angular6 写一个简单的Select组件示例
2018/08/20 Javascript
jQuery实现的中英文切换功能示例
2019/01/11 jQuery
vue中$nextTick的用法讲解
2019/01/17 Javascript
浅谈vue-props的default写不写有什么区别
2020/08/09 Javascript
原生JavaScript实现五子棋游戏
2020/11/09 Javascript
[01:34:42]NAVI vs EG 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
python 读写中文json的实例详解
2017/10/29 Python
彻底搞懂Python字符编码
2018/01/23 Python
利用python将图片版PDF转文字版PDF
2019/05/03 Python
Python3内置模块pprint让打印比print更美观详解
2019/06/02 Python
我们为什么要减少Python中循环的使用
2019/07/10 Python
python 实现dict转json并保存文件
2019/12/05 Python
python3 logging日志封装实例
2020/04/08 Python
keras:model.compile损失函数的用法
2020/07/01 Python
美国网上订购鲜花:FTD
2016/09/23 全球购物
公益活动策划方案
2014/01/09 职场文书
合作经营协议书
2014/04/17 职场文书
二手房购房意向书
2015/05/09 职场文书
2015年司法局工作总结
2015/05/22 职场文书
Python数据分析入门之教你怎么搭建环境
2021/05/13 Python
MySQL时区造成时差问题
2022/04/13 MySQL
MYSQL中文乱码问题的解决方案
2022/06/14 MySQL
JS前端canvas交互实现拖拽旋转及缩放示例
2022/08/05 Javascript