根据鼠标位置显示div内容

zengshaotao

浏览: 787273 次
性别:
来自: 上海

最近访客更多访客>>

njdccy

AK1343794853

chehaoj

jstl1point0

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

JQuery

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@ page contentType="text/html; charset=GBK" pageEncoding="GBK" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" rev="stylesheet" href="/ent/gb/css/common.css" type="text/css" media="screen" />
<link rel="stylesheet" rev="stylesheet" href="/ent/gb/css/table.css" type="text/css" media="screen" />
<script language="javascript" src="/ent/js/jquery-1.6.2.min.js"></script>
<script language='javascript'><!--

$(function(){

//添加一行
$("#addline").click(function(){
  var addStr = "";
  addStr = "<tr>"+
     "<td>输入控件</td>"+
     "<td><input type='text' name='textName' value='textName' /></td>"+
      "</tr>";

  $("#div_table").append(addStr);
});

//删除一行
$("#delline").click(function(){
   $("#div_table>tbody>tr:last").remove();
});

//鼠标移入移出
$("#move_div").hover(function(e){
  var page_x = e.pageX;
  var page_y = e.pageY;
  $("#no_style").css({"left":page_x+"px","top":page_y+"px"});
  $("#no_style").fadeTo("slow",1);
},function(){
  $("#no_style").hide(1000);
});
})
</script>

            <form action="/ent/main" method="post" name="form1" id="form1">

              <table width="100%" border="0" cellspacing="0" cellpadding="0" class="table_com_ie10" align="center">
                <tr >
                  <td class="thList">境外账号</td>
                  <td class="thList">开户银行BIC</td>
                  <td class="thList">账户名称</td>
                  <td class="thList">币种</td>
                  <td class="thList">开户行国别</td>
                  <td class="thList">开户日期</td>
                  <td class="thList">维护日期</td>
                  <td class="thList">记录状态</td>
                </tr>
                 <tr >
                  <td><a href="#" id="move_div">境外账号</a></td>
                  <td>开户银行BIC</td>
                  <td>账户名称</td>
                  <td>币种</td>
                  <td>开户行国别</td>
                  <td>开户日期</td>
                  <td>维护日期</td>
                  <td>记录状态</td>
                </tr>
              </table>

               <table width="100%" border="0" cellspacing="0" cellpadding="0" align="center">
                <tr>
                  <td height="10"></td>
                </tr>
              <tr>
                  <td><hr /></td>
                </tr>
              </table>

              <fieldset >
              <legend>div的高度和宽度自适应</legend>
                <div id="div_height_auto" style="border-width:5px; border-color:Black; width:400px">
       <table id="div_table" border="1" cellspacing="0" cellpadding="0" align="center">
       <tbody>
                   <tr>
                     <td height="10">输入控件</td>
                     <td height="10"><input type="text" name="textName" value="textName" /></td>
                   </tr>
                   </tbody>
                   <tfoot>
                   <tr>
                      <td height="10"><input type="button" id="addline" name="addline" value="添加一行" /></td>
                      <td height="10"><input type="button" id="delline" name="delline" value="删除一行" /></td>
                    </tr>
                   </tfoot>
                 </table>
           </div>
     </fieldset>
     <hr />另外的div


            </form>

---------------------div的display属性值为none时是不占用页面空间的。
<div id="no_style" style="display:none;width:400px;height:100px;border:1px solid blue;background-color:green">
      <table width="100%" border="0" cellspacing="0" cellpadding="0" align="center">
                <tr >
                  <td class="thList">收款账号</td>
                  <td class="thList">收款户名</td>

                </tr>
                 <tr >
                  <td>6996865896536589</td>
                  <td>中国工商银行</td>
                </tr>
                   <tr >
                  <td>9995685896536740</td>
                  <td>浦东发展银行</td>
                </tr>
              </table>
        </div>
        -------------------
</body>
</html>

css：

/*div高度自适应*/
#div_height_auto{
border-width:5px;
border-color:Black;
height:auto !important;
height:100px;/*初始化高度*/
min-height:100px;/*最低高度是200px*/
z-index:1;
}
#no_style{
position:absolute;
z-index:999;
}

分享到：

left join多个表 | spring五种事务配置方式（转）

2013-05-27 10:30
浏览 1042
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论