使用layer插件模擬excel批註效果

                            使用layer插件模擬excel批註效果

 最近收到需要在網頁上顯示類似excel批註效果的需求.鼠標移上文字獲取點擊文字時就顯示出提示信息

效果圖:

鼠標移上標註說明時就顯示出提醒信息.

具體實現:

利用layer插件,彈出msg信息,並且獲取當前需要提醒的文字的元素位置後,再設置layer彈出層的位置即可.

具體代碼實現:

//獲取當前元素的位置,減去80可以根據自己需要調,是爲了顯示在該元素的上面
var top = showSpan.offset().top-80 +"px";
//在用layer顯示出提醒層 offset是設置提醒層顯示位置,anim是顯示動畫,這裏5是漸顯 具體是查官方文檔
layer.msg(title, { offset: [top], anim: 5 })