電子合同在現(xiàn)在應(yīng)用越來越廣，需求也就隨之產(chǎn)生。

本篇文章主要記錄兩種網(wǎng)頁蓋章效果實(shí)現(xiàn)方式，自己記錄一下，

也給需要的人提供一點(diǎn)思路和幫助。

?

效果

目錄

Jquery+CSS實(shí)現(xiàn)

原理

1.設(shè)置印章圖片并隱藏

2.標(biāo)記蓋章位置元素

3.獲取目標(biāo)元素位置

4.設(shè)置懸浮

純css實(shí)現(xiàn)

原理

1.設(shè)置父元素為相對(duì)定位

2.設(shè)置圖片為子元素并懸浮

3.調(diào)整圖片懸浮位置

總結(jié)

---

Jquery+CSS實(shí)現(xiàn)

原理

通過定位蓋章位置，之后操作圖片懸浮到蓋章位置

1.設(shè)置印章圖片并隱藏

首先得有印章的圖片，最好是透明背景的png圖片

圖片位置可以隨便，不影響之后操作；因?yàn)橛≌聢D片較大，所以設(shè)定了高度。

<img id="zhang1" src="./images/contract1.png" style="display: none" height="180px" alt="">
<img id="zhang2" src="./images/contract1.png" style="display: none" height="180px" alt="">

2.標(biāo)記蓋章位置元素

實(shí)際操作中，印章應(yīng)懸浮在蓋章和甲乙方之上。

所以設(shè)定蓋章二字所包元素上加一個(gè)id標(biāo)記；當(dāng)然也可以設(shè)置到甲乙方元素上。

3.獲取目標(biāo)元素位置

通過jquery offset方法獲取目標(biāo)元素的top/left屬性

// 獲取目標(biāo)1的top left位置
let qian1 = $('#qian1').offset();
let top1 = qian1.top;
let left1 = qian1.left;

4.設(shè)置懸浮

因?yàn)橛垐D片高度是確定的，上面設(shè)置過。

就可以通過css方法設(shè)置印張圖片元素懸浮和懸浮位置并顯示元素。

// 獲取目標(biāo)1的top left位置
let qian1 = $('#qian1').offset();
let top1 = qian1.top;
let left1 = qian1.left;// 設(shè)置章1位置
$("#zhang1").css({position:'absolute',top:top1-50,left:left1
}).show();// 獲取目標(biāo)2的top left位置
let qian2 = $('#qian2').offset();
let top2 = qian2.top;
let left2 = qian2.left;// 設(shè)置章2位置
$("#zhang2").css({position:'absolute',top:top2-50,left:left2
}).show();

純css實(shí)現(xiàn)

原理

通過行內(nèi)樣式，設(shè)定目標(biāo)元素為相對(duì)定位，把章圖片放入目標(biāo)元素中，并設(shè)置懸浮為絕對(duì)定位，原理還是利用懸浮來實(shí)現(xiàn)，只是不需要jquery/js。

1.設(shè)置父元素為相對(duì)定位

<span style="position:relative">蓋章：

2.設(shè)置圖片為子元素并懸浮

<span>
<span style="position:relative">蓋章：
<img src="./images/contract1.png" style="position:absolute;top:-90px;left:0;" height="180px" alt="">
</span><span style="position:relative">蓋章：
<img src="./images/contract1.png" style="position:absolute;top:-90px;left:0;" height="180px" alt="">
</span>
</span>

3.調(diào)整圖片懸浮位置

調(diào)整時(shí)可設(shè)置一個(gè)初始數(shù)值，之后打開瀏覽器工具查看效果進(jìn)行調(diào)試，

直至最終效果確定后修改懸浮數(shù)值。

?

總結(jié)

這樣就實(shí)現(xiàn)了印章懸浮于目標(biāo)文字之上達(dá)到逼真的蓋章效果，在這里記錄一下。?