点击文字弹出二维码效果

1、编写html代码

<div id="Layer1" style="display: none; position: absolute; z-index: 100;box-shadow: 6px 6px 4px #888888;"></div>
<div style="margin: 300px;">
	<span href="#" onmouseout="hiddenPic();" onmousemove="showPic(event,'img/cai.png');">百度
     </span>
</div>

2、javascript代码如下

<script language="javascript">
		   function showPic(e,sUrl){
			  var x,y;
			  x = e.clientX;
			  y = e.clientY;
			  //此处图片出现位置可自行调整
			  document.getElementById("Layer1").style.left = x-70+'px';
			  document.getElementById("Layer1").style.top = y-175+'px';
			  document.getElementById("Layer1").innerHTML = "<img border='0' width='140px' height='140px' src=\"" + sUrl + "\">";
			  document.getElementById("Layer1").style.display = "";
		   }
		   function hiddenPic(){
			  document.getElementById("Layer1").innerHTML = "";
			  document.getElementById("Layer1").style.display = "none";
		   }
</script>

3、几点解析

a-----主要是利用了两个方法，onmouseout()和onmousemove()两个事件，分别触发两个不同的方法，图片显示方法-----οnmοusemοve="showPic(event,'img/cai.png');"-----这个方法把图片传入， e.clientX和e.clientY获取XY坐标并且赋值给xy

b------图片容器Layer1设置绝对定位，left和top值通过xy动态设置，实现图片跟随鼠标移动

c------通过以下方法将图片写入图片容器

document.getElementById("Layer1").innerHTML = "<img border='0' width='140px' height='140px' src=\"" + sUrl + "\">";

d------为了与鼠标移出状态形成对比，鼠标移入的display设置为空，鼠标移出时调用οnmοuseοut="hiddenPic();"方法，容器内的html元素设置为空，display属性设置为none

4、效果图

 5、注意！！！！

图片出现的位置可自行调整（如果图片未出现，原因是上述代码设置的px可能不符合你自己电脑屏幕的大小，这时请自行调整px），也可以取消动态设置left和top的方法，即不使用e.clientX和e.clientY获取XY坐标，直接写定在页面上，可在图片容器Layer1外包一层div并且设置div为相对定位（position: relative;）这时left和top值就可以根据父元素位置去自由定位啦

6、附上图片使用thymeleaf传参例子

th:onmousemove="showPic(event,[[@{|*{resourcePath}assets/images/douyinEWM.jpg|}]]);"

7、完结