您的位置：首页 > Web前端 > JavaScript

jsp页面的div层的弹出效果

2014-11-20 16:19 295 查看

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>

<head>

<meta name="GENERATOR" content="Microsoft FrontPage 6.0">

<meta name="ProgId" content="FrontPage.Editor.Document">

<meta http-equiv="Content-Type" content="text/html; charset=gb2312">

<title>new page</title>

<script type="text/javascript" language="javascript">

function crertdiv(_parent,_element,_id,_css){//创建层

var newObj = document.createElement(_element);

if(_id && _id!="")newObj.id=_id;

if(_css && _css!=""){

newObj.setAttribute("style",_css);

newObj.style.cssText = _css;

}

if(_parent && _parent!=""){

var theObj=getobj(_parent);

var parent = theObj.parentNode;

if(parent.lastChild == theObj){

theObj.appendChild(newObj);

}

else{

theObj.insertBefore(newObj, theObj.nextSibling);

}

}

else document.body.appendChild(newObj);

}

function getobj(o){//获取对象

return document.getElementById(o)

}

var swtemp=0,objtemp;

function showdiv(inputid,inputlist){//显示层

if (swtemp==1){getobj(objtemp+"mydiv").style.display="none";}

var text_list=inputlist.split(",")

if (!getobj(inputid+"mydiv")){//若尚未创建就建之

var divcss="font-size:12px;color:#00f;position:absolute;left:"+(getobj(inputid).offsetLeft+0)+"px;top:"+(getobj(inputid).offsetTop+25)+"px;border:1px
solid red"

crertdiv("","div",inputid+"mydiv",divcss);//创建层"mydiv"

//alert(document.getElementById("mydiv").outerHTML)

crertdiv(inputid+"mydiv","ul",inputid+"myul");//创建ul

for (var i=0,j=text_list.length;i<j;i++){//创建"text_list"li

crertdiv(inputid+"myul","li",inputid+"li"+i,"background:#fff");

getobj(inputid+"li"+i).innerHTML=text_list;

}

crertdiv(inputid+"myul","li",inputid+"li"+j,"color:#f00;background:#fff");//创建"clear"li

getobj(inputid+"li"+j).innerHTML="clear";

getobj(inputid+"mydiv").innerHTML +="<style type='text/css'>#"+inputid+"mydiv ul {padding:0px;margin:0;}#"+inputid+"mydiv
ul li{list-style-type:none;padding:5px;margin:0;float:left;CURSOR: pointer;}</style>"

for (var i=0;i<=j;i++){

getobj(inputid+"li"+i).onmouseover=function(){this.style.background="#eee";clearTimeout(timer)}

getobj(inputid+"li"+i).onmouseout=function(){this.style.background="#fff"}

}

}

var newdiv=getobj(inputid+"mydiv")

newdiv.onclick=function(){hiddiv(event,inputid);}

newdiv.onmouseout=function(){Mout(this)}

newdiv.onmouseover=function(){clearTimeout(timer)}

getobj(inputid).onmouseout=function(){Mout(newdiv)}

newdiv.style.display="block";

swtemp=1;

objtemp=inputid;

}

var timer

function Mout(o){

timer=setTimeout(function(){o.style.display="none";},300)

swtemp=0;

}

function hiddiv(e,inputid){

e=e||window.event;

ev=e.target||e.srcElement;

v=ev.innerText||ev.textContent;

if (v!="clear")getobj(inputid).value=v;else getobj(inputid).value=""

getobj(inputid+"mydiv").style.display="none";

}

</script>

</head>

<body>

<br>

<br>

<br>

<br>

<input id="mytext" type="text"onclick="showdiv(this.id,this.list)" list="文本框,弹出层,值赋"/>

<br>

<br>

<script>

var list="文本框2,弹出层2,值赋2,文本框2-1,弹出层2-1,值赋2-1"

</script>

<input id="mytext2" type="text" onClick="showdiv(this.id,list)"/>

<input type="hidden" value="点击,弹出,显示,消失,实现" id="list">

<input id="mytext3" type="text" onMouseOver="showdiv(this.id,getobj('list').value)"/>

</body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航