用svg制作富有動(dòng)態(tài)的tooltip
更新時(shí)間：2015年07月17日 10:07:07 投稿：hebedich
這篇文章主要介紹了用svg制作富有動(dòng)態(tài)的tooltip的代碼以及制作過(guò)程，十分的細(xì)致全面，有需要的小伙伴可以參考下。
昨晚看了用svg如何制作富有動(dòng)態(tài)的tooltip，于是今天就心血來(lái)潮學(xué)著做一下，于是也成功做出來(lái)，也明白其中的原理，收獲頗多阿！接下來(lái)要多去學(xué)習(xí)svg，這是個(gè)好東西。
這其中也注意了一些平時(shí)糾結(jié)的細(xì)節(jié)應(yīng)該怎么去做，比如：
<article> <section id="sound1"> </section> <section id="sound2"> </section> </article>
article標(biāo)簽長(zhǎng)度為600px,section 分別是300px，然后設(shè)置其為display:inline-block;然后是下面的效果：
本來(lái)按常理來(lái)說(shuō)的話(huà)，應(yīng)該是頭像水平排列，這是因?yàn)閐isplay:inline-block;會(huì)將article標(biāo)簽和section標(biāo)簽之間空白渲染成空格，空格展位，所以會(huì)導(dǎo)致圖片不在同一排，解決的辦法是給article標(biāo)簽和section標(biāo)簽添加如下的css代碼：
article{
width:600px;
margin:200px;
font-size:0;
}
article section{
display:inline-block;
width:300px;
font-size:14px;
position:relative;
}
于是空白去掉了！
另外對(duì)于svg的web圖像，我們可以對(duì)其進(jìn)行修改，使其圖像的樣式可進(jìn)行修改，它的格式大概如下（舉一例子）：
<?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文件里面，如果說(shuō)有很多這種svg圖像，修改起來(lái)很麻煩！
于是使用的是ajax來(lái)加載這個(gè)圖片：
html的dom：<svg data-src="bubble1.svg" width="280" height="140"></svg>
// 問(wèn)題二：對(duì)于svg圖像我們要如何引入，不可能將整個(gè)svg都引入吧，不便于修改編輯
// 技巧二：使用js進(jìn)行加載
$('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();
}
})
});
還有對(duì)于圖片的描邊動(dòng)畫(huà)效果，這里又怎么個(gè)好的方法，只針對(duì)svg圖像：
使用stroke-dasharray（虛線(xiàn)描邊，可以不斷嘗試，使其調(diào)至適應(yīng)大小，完成實(shí)現(xiàn)整個(gè)描邊的效果）stroke-dashoffset（虛線(xiàn)間隔，調(diào)至整個(gè)svg沒(méi)有描邊的效果），然后使用transition實(shí)現(xiàn)這個(gè)動(dòng)畫(huà)
最終效果（如圖，沒(méi)有在線(xiàn)演示，動(dòng)畫(huà)效果出不來(lái)，不過(guò)下面貼的代碼直接復(fù)制，再去下載兩個(gè)svg圖片和頭像就可以使用）
代碼如下：
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<title>toolTip聊天對(duì)話(huà)框制作</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{
/*問(wèn)題一：對(duì)于display:inline-block;會(huì)出現(xiàn)兩個(gè)section無(wú)法并排排列，由于使用此屬性會(huì)將article與section之間的空白處渲染成空格，于是無(wú)法并排*/
/*技巧一： 父元素設(shè)置 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);
}
/*問(wèn)題三：對(duì)于圖片的描邊動(dòng)畫(huà)效果，這里又怎么個(gè)好的方法，只針對(duì)svg圖像*/
/*技巧三：使用stroke-dasharray（虛線(xiàn)描邊，可以不斷嘗試，使其調(diào)至適應(yīng)大小，實(shí)現(xiàn)描邊的效果）stroke-dashoffset（虛線(xiàn)間隔，調(diào)至整個(gè)svg沒(méi)有描邊的效果），然后使用transition實(shí)現(xiàn)這個(gè)動(dòng)畫(huà) */
.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聊天對(duì)話(huà)框制作</h1>
<article>
<section id="sound1">
<div class="text-center"><img src="nan.jpg" /></div>
<p class="text-center">韓國(guó)正太</p>
<div class="sound_1">
<svg data-src="bubble1.svg" width="280" height="140"></svg>
<p>聽(tīng)說(shuō)優(yōu)衣庫(kù)的試衣間已全面升級(jí)，空間大小擴(kuò)充一倍，精裝修，同時(shí)四面都安有鏡子，方便無(wú)死角錄像呢，要去試一下不，美女！</p>
</div>
</section>
<section id="sound2">
<div class="text-center"><img src="nv.jpg" /> </div>
<p class="text-center">優(yōu)衣庫(kù)美女</p>
<div class="sound_2">
<svg data-src="bubble2.svg" width="200" height="100"></svg>
<p>聽(tīng)起來(lái)就很刺激，那走，帥哥，準(zhǔn)備家伙，go！</p>
</div>
</section>
</article>
<script type="text/javascript">
$(document).ready(function() {
// 問(wèn)題二：對(duì)于svg圖像我們要如何引入，不可能將整個(gè)svg都引入吧，不便于修改編輯
// 技巧二：使用js進(jìn)行加載
$('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>
以上所述就是本文的全部?jī)?nèi)容了，希望大家能夠喜歡。
相關(guān)文章
小程序?qū)崿F(xiàn)新用戶(hù)判斷并跳轉(zhuǎn)激活的方法
這篇文章主要介紹了小程序?qū)崿F(xiàn)新用戶(hù)判斷并跳轉(zhuǎn)激活的方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
BootstrapValidator實(shí)現(xiàn)表單驗(yàn)證功能
這篇文章主要為大家詳細(xì)介紹了BootstrapValidator實(shí)現(xiàn)表單驗(yàn)證功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-11-11
hasFocus是document的特有方法．用來(lái)判斷當(dāng)前網(wǎng)頁(yè)是否獲得焦點(diǎn)．2010-06-06
js操作XML文件的實(shí)現(xiàn)方法兼容IE與FireFox
下面小編就為大家?guī)?lái)一篇js操作XML文件的實(shí)現(xiàn)方法兼容IE與FireFox。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-06-06
javascript 選擇文件夾對(duì)話(huà)框(web)
web程序開(kāi)發(fā)中經(jīng)常會(huì)遇見(jiàn)選擇文件夾的時(shí)候，這對(duì)于web程序員是一件麻煩的事情，由于本地安全限制JS不能訪(fǎng)問(wèn)本地文件，所以選擇文件夾一般都避而不談，筆者在寫(xiě)一個(gè)程序的時(shí)候也遇見(jiàn)了同樣的問(wèn)題，開(kāi)始嘗試使用JS來(lái)遍歷文件，結(jié)果都沒(méi)有成功2009-07-07
利用AJAX實(shí)現(xiàn)WordPress中的文章列表及評(píng)論的分頁(yè)功能
在文中列表頁(yè)方面利用AJAX制作滾動(dòng)到底觸發(fā)翻頁(yè)的效果比較常見(jiàn),而在評(píng)論加載時(shí)AJAX顯示正在加載也很常用,下面就來(lái)看一下如何利用AJAX實(shí)現(xiàn)WordPress中的文章列表及評(píng)論的分頁(yè)功能2016-05-05
layui自定義驗(yàn)證,用ajax查詢(xún)后臺(tái)是否有重復(fù)數(shù)據(jù),form.verify的例子
今天小編就為大家分享一篇layui自定義驗(yàn)證,用ajax查詢(xún)后臺(tái)是否有重復(fù)數(shù)據(jù),form.verify的例子，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-09-09
javascript動(dòng)態(tài)向網(wǎng)頁(yè)中添加表格實(shí)現(xiàn)代碼
動(dòng)態(tài)向網(wǎng)頁(yè)中添加表格的方法有很多，本文為大家介紹下利用javascript是如何實(shí)現(xiàn)的2014-02-02
通過(guò)在網(wǎng)站上的資料搜集，得到了很多關(guān)于string類(lèi)用法的文檔，通過(guò)對(duì)這些資料的整理和加入一些自己的代碼，就得出了一份比較完整的關(guān)于string類(lèi)函數(shù)有哪些和怎樣用的文檔了！2015-08-08
mpvue 頁(yè)面預(yù)加載新增preLoad生命周期的兩種方式
這篇文章主要介紹了mpvue 頁(yè)面預(yù)加載新增preLoad生命周期的兩種方式,本文重點(diǎn)給大家講解了第一種方式，需要的朋友可以參考下2019-10-10