求 js 特效，鼠标滑过，显示浮层

2023-02-18 11:20:02JavaScript023

求 js 特效，鼠标滑过，显示浮层,第1张

首先随便找一个地方新建一个div 并且隐藏。例如

</div>

然后在链接那边写个onmouseover 属性加个触发方法如showDiv()具体方法如下

function showDiv(e){

$("#showTip").html("这里可以写一些html的内容，如图片文字")

$("#showTip").css("top",e.clientY)//这里可以根据情况适当调整

$("#showTip").css("left",e.clientX)

$("#showTip").show()

}

还要在链接那边加上 onmouseout属性触发方法如下:

function hideDiv(){

$("#showTip").hide()

}

以上需要引入jquery支持

首先应该明白javascript 是单进程运行的，然后你的 onmouseover 中写的是 oLi[i], 当onload 函数执行完，此时 i 的值为 oLi.length 为4 ，在 onmouseover 中 oLi[4] = undefined , 所以会出现你图中的错误，改成 this.style.width = 100 + "px"就不会有这样的问题了

<html>

<head>

<title>title及alt提示特效</title>

body{font-size:12pxcolor:#000000}

td{font-size:12pxcolor:#000000}

a:link{font-size:12pxcolor:#000000}

</style>

var pltsPop=null

var pltsoffsetX = 12// 弹出窗口位于鼠标左侧或者右侧的距离；3-12 合适

var pltsoffsetY = 15// 弹出窗口位于鼠标下方的距离；3-12 合适

var pltsTitle=""

document.write('<div id=pltsTipLayer style="display: noneposition: absolutez-index:10001"></div>')

function pltsinits()

{

document.onmouseover = plts

document.onmousemove = moveToMouseLoc

}

function plts()

{ var o=event.srcElement

if(o.alt!=null && o.alt!=""){o.dypop=o.alto.alt=""}

if(o.title!=null && o.title!=""){o.dypop=o.titleo.title=""}

pltsPop=o.dypop

if(pltsPop!=null &&pltsPop!="" &&typeof(pltsPop)!="undefined")

{

pltsTipLayer.style.left=-1000

pltsTipLayer.style.display=''

var Msg=pltsPop.replace(/\n/g,"<br>")

Msg=Msg.replace(/\0x13/g,"<br>")

var re=/\{(.[^\{]*)\}/ig

if(!re.test(Msg))pltsTitle="『水木设计联盟』"

else{

re=/\{(.[^\{]*)\}(.*)/ig

pltsTitle=Msg.replace(re,"$1")+" "

re=/\{(.[^\{]*)\}/ig

Msg=Msg.replace(re,"")

Msg=Msg.replace("<br>","")}

var content =

'<table style="FILTER:alpha(opacity=90)border: 1px solid #cccccc" id="toolTipTalbe" cellspacing="1" cellpadding="0"><tr><td width="100%"><table bgcolor="#ffffff" cellspacing="0" cellpadding="0">'+

'<tr id="pltsPoptop"><td height="20" bgcolor="#0094bb"><font color="#ffffff"><b><p id="topleft" align="left">↖'+pltsTitle+'</p><p id="topright" align="right" style="display:none">'+pltsTitle+'↗</font></b></font></td></tr>'+

'<tr><td "+attr+" style="padding-left:10pxpadding-right:10pxpadding-top: 8pxpadding-bottom:6pxline-height:140%">'+Msg+'</td></tr>'+

'<tr id="pltsPopbot" style="display:none"><td height="20" bgcolor="#0094bb"><font color="#ffffff"><b><p id="botleft" align="left">↙'+pltsTitle+'</p><p id="botright" align="right" style="display:none">'+pltsTitle+'↘</font></b></font></td></tr>'+

'</table></td></tr></table>'

pltsTipLayer.innerHTML=content

toolTipTalbe.style.width=Math.min(pltsTipLayer.clientWidth,document.body.clientWidth/2.2)

moveToMouseLoc()

return true

}

else

{

pltsTipLayer.innerHTML=''

pltsTipLayer.style.display='none'

return true

}