PbootCMS使用技巧教程(四) - 全寬觸發式地圖
PbootCMS使用技巧教程(四) - 全寬觸發式地圖
DistantMemory
DistantMemory

先說明一下效果:

001.png


如圖所示:

在地圖全寬的時候,當然頁面下滑到一定程序,鼠標在地圖上時進行滑輪滾動操作會觸發地圖的縮放,而不會進行瀏覽器頁面的上下滾動,用戶體驗就不好。所以需要做一個觸發式地圖來提升用戶體驗。


操作方式:

鼠標點擊地圖任意一處,激活地圖,可以對地圖進行縮放,拖拽。鼠標移出地圖區域,禁用地圖,地圖將不可操作。


原理:

其實很簡單,就是在地圖上面添加一層透明的遮罩提示層,當鼠標點擊時隱藏該層并使其點擊穿透,鼠標移出時恢復該層即可。


涉及技術:

也是非常簡單基礎的HTML+CSS+jQuery。


實現步驟:

一、HTML代碼

<div class="map">
    <div>{*content:content*}</div>
    <div class="uk-flex uk-flex-center uk-flex-middle uk-text-center tm-transition shade"><span>點擊使用地圖</span></div>
</div>

注:寫模板的時候使用了uikit框架,class樣式中的部分樣式名自行參照uikit框架手冊研究吧,主要作用就是使提示語水平垂直居中。

說明:

首先,{*content:content*}是直接調用的文章內容,在后臺編輯器直接插入百度地圖即可。

然后,在地圖下面添加了一層遮罩和提示語。


二、CSS代碼

.map { position: relative; }
.map .shade { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.2); cursor: pointer; }
.map .shade.out { opacity: 0; pointer-events: none; }
.map .shade span { display: block; padding: 0.08rem; background: rgba(0,0,0,0.5); border-radius: 0.02rem; letter-spacing: 0.02rem; font-size: 0.14rem; color: #EEE; }

說明:

最外層.map相對定位,遮罩層.shade絕對定位,覆蓋在上面,然后設定背景色和透明度。

.shade.out則是鼠標點擊后將遮罩層變成透明的,再加上鼠標穿透。

.shade span則設置了提示語的樣式。


三、jQuery代碼

jQuery('.map .shade').on('click', function(){

    jQuery(this).addClass('out');

})

jQuery('.map').on('mouseleave', function(){

    jQuery(this).find('.shade').removeClass('out');

})

說明:

這是功能實現的關鍵,但也是比較簡單基礎的。

首先,.shade(遮罩層)點擊的時候,給遮罩層添加樣式.out,而.out就是我們在CSS中設置的點擊后的樣式。

然后,鼠標移出.map時,移出遮罩層的.out樣式,也就是恢復地圖不可使用。


總結:非常簡單實用的一個功能,代碼都是比較基礎的,寫代碼的關鍵是思考。

甘肃快3,甘肃快三开奖结果,甘肃快三走势图