84669 人學習
152542 人學習
20005 人學習
5487 人學習
7821 人學習
359900 人學習
3350 人學習
180660 人學習
48569 人學習
18603 人學習
40936 人學習
1549 人學習
1183 人學習
32909 人學習
如下圖,右邊的是我需要的效果,即滑鼠移上地圖上紅色位置圖示時顯示出來的照片與內容相對於下面位置圖示居中顯示。而左邊是我做出來的效果,位移太嚴重了,求大神幫忙看看。
#下面是我的HTML程式碼
你貼的程式碼沒有意義,只是展示了紅色圖示的位置,並沒有給出彈出框的結構和樣式。看上去,彈出部分是 js 動態產生的並調整位置的。兩個思路:
span
當滑鼠移到圖示上時,動態產生浮動層資料內容,並加入span標籤。滑鼠移出時移出動態新增的圖層。需要為浮動圖層設定樣式,大致如:
span.BMap_Marker > .浮动层 { background-color: #fff; /* 基础样式略 */ bottom: 100%; left: 50%; margin-left: -48px; /* 假设你的浮动层总宽度为 96px, */ position: absolute; }
需要注意span的z-index屬性變化,因為浮動層是嵌入其中的,所以浮動層可能會被遮擋。
z-index
如果你的浮動層是固定尺寸的,那麼你只需要用 JS 獲取當前選定的圖標,並讀取出其相對位置,然後進行計算浮動層的位置即可:
left: 图标的left - (浮动层宽度/2); top: 图标的top - 浮动层高度;
你貼的程式碼沒有意義,只是展示了紅色圖示的位置,並沒有給出彈出框的結構和樣式。看上去,彈出部分是 js 動態產生的並調整位置的。兩個思路:
一、浮動層加入到圖示
span
標籤裡,設定浮動層的有樣式當滑鼠移到圖示上時,動態產生浮動層資料內容,並加入
span
標籤。滑鼠移出時移出動態新增的圖層。需要為浮動圖層設定樣式,大致如:需要注意
span
的z-index
屬性變化,因為浮動層是嵌入其中的,所以浮動層可能會被遮擋。二、JS 動態調整
如果你的浮動層是固定尺寸的,那麼你只需要用 JS 獲取當前選定的圖標,並讀取出其相對位置,然後進行計算浮動層的位置即可: