程序员笔记

与人方便,自己方便
当前位置:网站首页 / 工具 / 正文

JS鼠标指上文本框显示缩略图图片

2017-07-01 / 工具 / 910 次围观 / 0 次吐槽
<script language="javascript"> 
function showPic(sUrl){ 
var x,y; 
x = event.clientX; 
y = event.clientY; 
document.getElementById("Layer1").style.left = x; 
document.getElementById("Layer1").style.top = y; 
document.getElementById("Layer1").innerHTML = "<img src=\"" + sUrl + "\" width='100px'>"; 
document.getElementById("Layer1").style.display = "block"; 
} 
function hiddenPic(){ 
document.getElementById("Layer1").innerHTML = ""; 
document.getElementById("Layer1").style.display = "none"; 
} 
</script>
<!--图片显示位置-->
<div id="Layer1" style="display:none;position:absolute;z-index:1;"></div> 
<input type="text" class="span4" name="pic" id="pic" value="/Public/upload/image/20170701/20170701093203_91007.jpg" onmouseout="hiddenPic();" onmousemove="showPic(this.value);"/>

推荐您阅读更多有关于“”的文章

本站所有文章如无特别注明均为原创。作者:程序员小邓 ,复制或转载请以超链接形式注明转自 程序员笔记
原文地址《JS鼠标指上文本框显示缩略图图片
额 本文暂时没人评论 来添加一个吧

发表评论

必填

选填

选填

必填

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

Powered By Z-BlogPHP

Copyright 程序员笔记 Rights Reserved.