JAVASCRIPT实现点击图片后（只能点击图片后），隐藏层显示在图片旁边，但点击其他地方，层不出现也不移动!

weixin_45370103 2019-07-24 07:58:31
注：最下面那个JAVASCRIPT“move_div()”函数，我目前实现在效果是，点击图片后，层显示，也出现在了图片旁边，但这时我点击其他地方，层也会跟着移动，请大神们帮我解决这个问题。

我要想达到的效果是，点击图片后，层显示在图片旁边，但这时点击其他地方（如空白处），该层不应该再移动，关于隐藏的功能，我到时会在层顶端做一个关闭按钮！

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<link rel="stylesheet" href="css/mingdan.css">
<title>abc</title>
<meta charset="utf-8">
<style>
.list-name-input{
color: #333;
font-family: tahoma, 'Microsoft YaHei', 'Segoe UI', Arial, 'Microsoft Yahei', Simsun, sans-serif;
font-size: 11px;
font-weight: bold;
height: 18px;
margin: 1px;
padding: 1px;
position: relative;
width: 85px;
}
.list-name-for-select{
border: 0px;
color: #555;
height: 18px;
lighting-color: rgb(255, 255, 255);
line-height: 18px;
margin:0 0 0px 0;
outline-color: #555;
outline-offset: 0px;
outline-style: none;
outline-width: 0px;


padding: 1px 1px;
position: absolute;
top: 1px;
left: 1px;
vertical-align: middle;
width: 62px;
}
.list-name-input-for-select:focus{
border: 0;
border-radius: 0;
}
.list-select{
background-color: #FFF;
border:1px #ccc solid;
border-radius: 1px;
color: #555;
cursor: pointer;
height: 20px;
left: 0px;
margin:0 0 10px 0;
padding: 0px 0px;
position: absolute;
top: 0px;
vertical-align: middle;
white-space: pre;
width: 85px;
}
</style>
</head>
<body>
<table cellpadding="1" cellspacing="1" border="0" bgcolor="#CCCCCC">
<tr><td height="28" bgcolor="#FFFFFF" align="center" valign="middle" width="100">
<div id="list-name-input_<%=i%>" class="list-name-input">
<select type="text" class="list-select" onChange="select1(1)" id="list-select_1">
<option value="" selected></option>
<option value="C001001">C001001</option>
<option value="C001001">C001002</option>
<option value="C001001">C001003</option>
</select>
<input type="text" maxlength="8" class="name item-width list-name-for-select" id="list-name-for-select_1">
</div>
</td>
<td align="center" width="30" bgcolor="#FFFFFF"><img src="images/modify1.gif" width="60%" style="cursor:hand" id="move_img1" onClick="move_div(1)"></td>
</tr>
</table>

<script>
function select1(id)
{
var listName = document.getElementById('list-name-for-select_'+id);
var listSelect = document.getElementById('list-select_'+id);
listName.value=listSelect.value;
}

function select2(id)
{alert(id);
var listName = document.getElementById('list-name-for-select_'+id);
var listSelect = document.getElementById('list-select_'+id).onchange = function(e)
{
console.log(this)
if(this.value)
{
listName.value = this.value + ' | ' + this.options[this.selectedIndex].text;
}
else
{
listName.value = ''
}
};
}
</script>
<div id="abc" style="position:absolute;left:-500px;top:-400px;z-index:999;">
<table width="400" border="0" cellpadding="1" cellspacing="1" bgcolor="#CCCCCC">
<tr>
<td align="center" bgcolor="#000066" height="27"><strong><font color="#FFFFFF">序号</font></strong></td>
<td align="center" bgcolor="#000066"><strong><font color="#FFFFFF">费用类型</font></strong></td>
<td align="center" bgcolor="#000066"><strong><font color="#FFFFFF">欠费金额</font></strong></td>
<td align="center" bgcolor="#000066"><strong><font color="#FFFFFF">收款金额</font></strong></td>
<td align="center" bgcolor="#000066"><strong><font color="#FFFFFF">维护说明</font></strong></td>
</tr>
<tr>
<td align="center" bgcolor="#FFFFFF" height="27">1</td>
<td align="center" bgcolor="#FFFFFF">房租</td>
<td align="center" bgcolor="#FFFFFF">10000</td>
<td align="center" bgcolor="#FFFFFF"><input type="text" size="7" value="9000"></td>
<td align="center" bgcolor="#FFFFFF"><input type="text" size="7"></td>
</tr>
<tr><td colspan="5" bgcolor="#FFFFFF" align="center" height="27"><input type="submit" value="保存数据"></td></tr>
</table>
</div>
<!-- 层跟随鼠标位置显示 -->
<script type="text/javascript">
<!-- window1改为window即可,层随鼠标点击移动 -->
function move_div(id)
{
document.onmouseup=function(ev)
{
var oEvent=ev||event;
var oDiv=document.getElementById('abc');
oDiv.style.left=(oEvent.clientX+5)+'px'; // 指定创建的DIV在文档中距离左侧的位置
oDiv.style.top=(oEvent.clientY+10)+'px'; // 指定创建的DIV在文档中距离顶部的位置
}
}
</script> </body>
</html>
...全文
153 2 打赏 收藏 转发到动态 举报
写回复
用AI写文章
2 条回复
切换为时间正序
请发表友善的回复…
发表回复
weixin_45370103 2019-07-24
  • 打赏
  • 举报
 回复
非常感谢你的神回复，我明天去试试，再次感谢
天际的海浪 2019-07-24
  • 打赏
  • 举报
 回复 


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<link rel="stylesheet" href="css/mingdan.css">
<title>abc</title>
 <meta charset="utf-8">
 <style>
  .list-name-input{
   color: #333;
   font-family: tahoma, 'Microsoft YaHei', 'Segoe UI', Arial, 'Microsoft Yahei', Simsun, sans-serif;
   font-size: 11px;
   font-weight: bold;
   height: 18px;
   margin: 1px;
   padding: 1px;
   position: relative;
   width: 85px;
  }
  .list-name-for-select{
   border: 0px;
   color: #555;
   height: 18px;
   lighting-color: rgb(255, 255, 255);
   line-height: 18px;
   margin:0 0 0px 0;
   outline-color: #555;
   outline-offset: 0px;
   outline-style: none;
   outline-width: 0px;


   padding: 1px 1px;
   position: absolute;
   top: 1px;
   left: 1px;
   vertical-align: middle;
   width: 62px;
  }
  .list-name-input-for-select:focus{
   border: 0;
   border-radius: 0;
  }
  .list-select{
   background-color: #FFF;
   border:1px #ccc solid;
   border-radius: 1px;
   color: #555;
   cursor: pointer;
   height: 20px;
   left: 0px;
   margin:0 0 10px 0;
   padding: 0px 0px;
   position: absolute;
   top: 0px;
   vertical-align: middle;
   white-space: pre;
   width: 85px;
  }
 </style>
</head>
<body>
<table cellpadding="1" cellspacing="1" border="0" bgcolor="#CCCCCC">
  <tr><td height="28" bgcolor="#FFFFFF" align="center" valign="middle" width="100">
    <div id="list-name-input_<%=i%>" class="list-name-input"> 
        <select type="text" class="list-select" onChange="select1(1)" id="list-select_1">
          <option value="" selected></option>
          <option value="C001001">C001001</option>
          <option value="C001001">C001002</option>
          <option value="C001001">C001003</option>
        </select>
        <input type="text" maxlength="8" class="name item-width list-name-for-select" id="list-name-for-select_1">
      </div>
 </td>
 <td align="center" width="30" bgcolor="#FFFFFF"><img src="images/modify1.gif" width="60%" style="cursor:hand" id="move_img1"></td>
 </tr>
</table>

<script>
function select1(id)
{
  var listName = document.getElementById('list-name-for-select_'+id);
  var listSelect = document.getElementById('list-select_'+id);
  listName.value=listSelect.value;
}

function select2(id)
{alert(id);
  var listName = document.getElementById('list-name-for-select_'+id);
  var listSelect = document.getElementById('list-select_'+id).onchange = function(e)
  {
   console.log(this)
   if(this.value)
   {
    listName.value = this.value + ' | ' + this.options[this.selectedIndex].text;
   }
   else
   {
    listName.value = ''
   }
  };
}
</script>
<div id="abc" style="position:absolute;left:-500px;top:-400px;z-index:999;">
 <table width="400" border="0" cellpadding="1" cellspacing="1" bgcolor="#CCCCCC">
  <tr>
     <td align="center" bgcolor="#000066" height="27"><strong><font color="#FFFFFF">序号</font></strong></td>
 <td align="center" bgcolor="#000066"><strong><font color="#FFFFFF">费用类型</font></strong></td>
 <td align="center" bgcolor="#000066"><strong><font color="#FFFFFF">欠费金额</font></strong></td>
 <td align="center" bgcolor="#000066"><strong><font color="#FFFFFF">收款金额</font></strong></td>
 <td align="center" bgcolor="#000066"><strong><font color="#FFFFFF">维护说明</font></strong></td>
  </tr>
  <tr>
     <td align="center" bgcolor="#FFFFFF" height="27">1</td>
     <td align="center" bgcolor="#FFFFFF">房租</td>
     <td align="center" bgcolor="#FFFFFF">10000</td>
     <td align="center" bgcolor="#FFFFFF"><input type="text" size="7" value="9000"></td>
     <td align="center" bgcolor="#FFFFFF"><input type="text" size="7"></td>
  </tr>
  <tr><td colspan="5" bgcolor="#FFFFFF" align="center" height="27"><input type="submit" value="保存数据"></td></tr>
 </table>
</div>
<!-- 层跟随鼠标位置显示 -->
<script type="text/javascript"> 
// window1改为window即可,层随鼠标点击移动
document.getElementById("move_img1").onclick = function(ev)
{ 
     var oEvent=ev||event; 
     var oDiv=document.getElementById('abc'); 
     oDiv.style.left=(oEvent.clientX+5)+'px';  // 指定创建的DIV在文档中距离左侧的位置 
     oDiv.style.top=(oEvent.clientY+10)+'px';  // 指定创建的DIV在文档中距离顶部的位置 
} 
</script> </body>
</html>
《程序天下：JavaScript实例自学手册》光盘源码
9.24 用JavaScript隐藏或显示表格列 9.25 滚动的表格 9.26 交换表的行 9.27 动态拖放表格的宽度 9.28 可输入内容的表格 9.29 可以分级的表格隐藏 9.30 动态创建表格并实现分页 9.31 删除表格指定行 9.32 设置表格的...
程序天下:JavaScript实例自学手册
9.24 用JavaScript隐藏或显示表格列 9.25 滚动的表格 9.26 交换表的行 9.27 动态拖放表格的宽度 9.28 可输入内容的表格 9.29 可以分级的表格隐藏 9.30 动态创建表格并实现分页 9.31 删除表格指定行 9.32 设置表格的...
仿CSDN鼠标移上去的显示DIV浮动层
在网页设计中，"仿CSDN鼠标移上去的显示DIV浮动层"是一种常见的交互设计技术，主要用于增强用户体验，提供更多的信息提示。这种效果常见于文章列表、菜单栏或者按钮等元素，当用户将鼠标悬停在某个元素上时，会有一...
在上传图片过程中显示的icon
4. **事件监听**：添加事件监听器以在图片开始上传时显示图标，上传完成后或出错时隐藏图标。Zepto.js提供了`.on()`方法来绑定事件处理器。 5. **错误处理**：为了提供良好的用户体验，当上传失败时，可以显示一个...
鼠标悬停显示大图
当用户将鼠标指针悬停在缩略图上时，通常会在鼠标旁边弹出一个预览窗口，显示该缩略图对应的全尺寸图片，即原图。这种技术在电子商务、摄影站点和博客中广泛使用。 实现这个功能的方法有很多种，这里我们将探讨几种...
JavaScript

87,993

社区成员

224,694

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章