js弹出div层

最新推荐文章于 2022-09-08 15:36:15 发布

mingWar

最新推荐文章于 2022-09-08 15:36:15 发布

阅读量4.6k

点赞数

分类专栏： JS 文章标签： div function scroll server html url

本文链接：https://blog.csdn.net/mingWar/article/details/5269523

版权

JS 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

<title>无标题页</title>

<script type="text/javascript" src="jquery-1.2.6.pack.js"></script>
<script>
$(function(){

$("#d1").click(
function(){ $("#Div1").slideDown("slow",function(){alert('slow');}) }
);
})
</script>
<script type="text/javascript" >
function CsdnUserCard() {
this.hot = false;

this.div_card = document.createElement("div");
this.div_card.id="a1";
this.id="a1";
with (this.div_card.style) {

  borderStyle = "none";
  borderWidth = "0";
  display = "none";
width = "357px";
     height = "194px";
  position = "absolute";
  textAlign = "left";
  background = "transparent url(bgUserCard.gif) no-repeat scroll 0 0";
  fontFamily = "Verdana,Arial,Helvetica,sans-serif";
}
this.div_card.card = this;

document.body.appendChild(this.div_card);
this.table_card1= document.createElement("div");
with (this.table_card1.style) {

  top = "12px";
  left = "56px";
  position = "relative";
  width = "280px";

     wordBreak="break-all";
     wordWrap="break-word";
}
this.table_card1.innerHTML="mingwarmingwarmingwarmingwarmingwarmingwarmingwarmingwarmingwarmingwar";

this.div_card.appendChild(this.table_card1);
}

CsdnUserCard.prototype.close = function() {

this.div_card.style.display = "none";
if (typeof this.onclose == "function") this.onclose(this);
}

CsdnUserCard.prototype.show = function(left, top) {

this.div_card.style.left = left + "px";
this.div_card.style.top = top + "px";
    var id1="#"+currentUserCard.id;
$(id1).slideDown("slow");
}
var currentUserCard = null;
function showUserCard(sender, username) {

if (!currentUserCard) {

  currentUserCard = new CsdnUserCard();
}
var point = absolutePoint(sender);
currentUserCard.owner = sender;
currentUserCard.show(point.x + 65, point.y);

currentUserCard.mouseover = function(e) {
  var element = typeof event != "undefined" ? event.srcElement : e.target;
  var hotCard = false;
  while (element) {
   hotCard = element == currentUserCard.owner || element == currentUserCard.div_card;
   if (hotCard) break;
   element = element.parentNode;
  }
  if (!hotCard) {

   currentUserCard.close();
  }
}

}
/// <summary>
/// 获得元素的绝对坐标
/// </summary>
/// <param name="element">HTML元素</param>
function absolutePoint(element) {
var result = { x: element.offsetLeft, y: element.offsetTop };
element = element.offsetParent;
while (element) {
  result.x += element.offsetLeft;
  result.y += element.offsetTop;
  element = element.offsetParent;
}
return result;
}
function usercardClose()
{
currentUserCard.close();
}
</script>

</head>
<body>
    <form id="form1" runat="server">
    <div id="dddd">
    <div id="d1">fdsfds</div>
     <div id="Div1" style="display:none;">asgdghfhg</div>


       <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br />

   <center>
    <img src="2_just4.jpg" title="mingwar用户自定义头像" alt="mingwar用户头像" οnmοuseοut="usercardClose();" οnmοuseοver="try{showUserCard(this,'just4')}catch(ex){};" />
    </center>

    </div>
    </form>
</body>
</html>