悬浮框的实现
悬浮框的实现需要鼠标移上和移出两个事件,本例是基于vue做的:<div @mouseover="overShow(bossJobInfo.postDescription)" @mouseout="outHide" class="ellipsis-specail" style="-webkit-box-orient:
·
悬浮框的实现需要鼠标移上和移出两个事件,本例是基于vue做的:
<div @mouseover="overShow(bossJobInfo.postDescription)" @mouseout="outHide" class="ellipsis-specail" style="-webkit-box-orient: vertical;">{{ bossJobInfo.postDescription }}</div>
重点是overShow()和outHide()方法:
overShow (value) {
var e = event || window.event
var showDiv = document.getElementById('showDiv')
var x = (e.pageX - 200) + 'px'
var y = (e.pageY - 200) + 'px'
showDiv.style.left = x
showDiv.style.top = y
showDiv.style.border = '1px solid #F90'
showDiv.style.background = '#E3EDCD'
showDiv.style.position = 'absolute'
showDiv.style.width = '40%'
showDiv.style.zIndex = '9999'
showDiv.style.display = 'block'
showDiv.innerHTML = value
},
outHide () {
var showDiv = document.getElementById('showDiv')
showDiv.style.display = 'none'
showDiv.innerHTML = ''
}
主要是overShow()方法,根据鼠标位置,定义悬浮框的位置,以及使用js动态加载css样式;因为我的悬浮框中要能使用html样式,所以使用的innerHTML方法,这样value中的html标签能正常展示,如果只需展示内容,使用innerContent即可。
更多推荐
已为社区贡献2条内容
所有评论(0)