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

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

  代码:

<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鼠标指上文本框显示缩略图图片

发表评论

欢迎 访客 发表评论

专注帝国CMS模板开发、建站、一站式服务平台

查看演示 联系站长