javascript怎么实现鼠标点击一张图片之后，图片跟随鼠标走的效果

2023-04-09 21:38:02JavaScript022

javascript怎么实现鼠标点击一张图片之后，图片跟随鼠标走的效果,第1张

这是一个拖动元素的效果

</div>

window.onload=function(){

var div=document.getElementById("div")

div.onmousedown=function(e){ //把onmousedown改成onclick就是你要的效果

var x= e.clientX-div.offsetLeft

var y= e.clientY-div.offsetTop

document.onmousemove=function(e){

div.style.left= e.clientX-x+"px"

div.style.top= e.clientY-y+"px"

}

document.onmouseup=function(){

document.onmousemove=null

}

</script>

//html

onmouseover=mouseOver() 换成 onmouseover = mouseOver(this)

onmouseout=mouseOut() 换成 onmouseout=mouseOut(this)

//js 更改透明度即可，不需要换图片

function mouseOver(obj){

obj.style.opacity = 0.5

}

function mouseOut(obj){

obj.style.opacity = 1

}

<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

}