当前位置：文档之家› 浮动div代码

浮动div代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><HEAD><TITLE>随滚动条移动的层- </TITLE><META HTTP-EQUIV="Content-Type" CONTENT="text/html" charset="gb2312"><META NAME="Author" CONTENT="haiwa"><META NAME="homepage" CONTENT=""></HEAD><style><!--.div{position: absolute;border: 2px solid red;background-color: #EFEFEF;line-height:90px;font-size:12px;z-index:1000;}--></style><BODY><div id="Javascript.Div1" class="div" style="width: 240px; height:90px" align="center">正中... </div><SCRIPT LANGUAGE="JavaScript">function sc1(){document.getElementById("Javascript.Div1").style.top=(document.documentElement.scrollTop+( document.documentElement.clientHeight-document.getElementById("Javascript.Div1").offsetHei ght)/2)+"px";document.getElementById("Javascript.Div1").style.left=(document.documentElement.scrollLeft+ (document.documentElement.clientWidth-document.getElementById("Javascript.Div1").offsetWi dth)/2)+"px";}</SCRIPT><div id="Javascript.Div2" class="div" style="width: 240px; height:90px" align="center">左上... </div><SCRIPT LANGUAGE="JavaScript">function sc2(){document.getElementById("Javascript.Div2").style.top=(document.documentElement.scrollTop)+ "px";document.getElementById("Javascript.Div2").style.left=(document.documentElement.scrollLeft) +"px";}</SCRIPT><div id="Javascript.Div3" class="div" style="width: 240px; height:90px" align="center">左下... </div><SCRIPT LANGUAGE="JavaScript">function sc3(){document.getElementById("Javascript.Div3").style.top=(document.documentElement.scrollTop+ document.documentElement.clientHeight-document.getElementById("Javascript.Div3").offsetHei ght)+"px";document.getElementById("Javascript.Div3").style.left=(document.documentElement.scrollLeft) +"px";}</SCRIPT><div id="Javascript.Div4" class="div" style="width: 240px; height:90px" align="center">右上... </div><SCRIPT LANGUAGE="JavaScript">function sc4(){document.getElementById("Javascript.Div4").style.top=(document.documentElement.scrollTop)+ "px";document.getElementById("Javascript.Div4").style.left=(document.documentElement.scrollLeft+ document.documentElement.clientWidth-document.getElementById("Javascript.Div4").offsetWid th)+"px";}</SCRIPT><div id="Javascript.Div5" class="div" style="width: 240px; height:90px" align="center">右下... </div><SCRIPT LANGUAGE="JavaScript">function sc5(){document.getElementById("Javascript.Div5").style.top=(document.documentElement.scrollTop+ document.documentElement.clientHeight-document.getElementById("Javascript.Div5").offsetHei ght)+"px";document.getElementById("Javascript.Div5").style.left=(document.documentElement.scrollLeft+ document.documentElement.clientWidth-document.getElementById("Javascript.Div5").offsetWid th)+"px";}</SCRIPT><SCRIPT LANGUAGE="JavaScript"><!--function scall(){sc1();sc2();sc3();sc4();sc5();}window.onscroll=scall;window.onresize=scall;window.onload=scall;//--></SCRIPT><div style="position: absolute; top: 0px; left: 0px; width: 10000px; height: 4000px;"> </div> </BODY></HTML>超酷浮动代码:<html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><title>网页特效|/Js|---页面内的超级酷浮动窗口</title><style type='text/css'><!--a:visited{text-decoration:none;color:slategray;}a:hover{text-decoration:underline;color:slategray;}a:link{text-decoration:none;color:slategray;}--></style><script language=JScript><!--//可以打包为js文件;var x0=0,y0=0,x1=0,y1=0;var offx=6,offy=6;var moveable=false;var hover='orange',normal='slategray';//color;var index=10000;//z-index;//开始拖动;function startDrag(obj){if(event.button==1){//锁定标题栏;obj.setCapture();//定义对象;var win = obj.parentNode;var sha = win.nextSibling;//记录鼠标和层位置;x0 = event.clientX;y0 = event.clientY;x1 = parseInt(win.style.left);y1 = parseInt(win.style.top);//记录颜色;normal = obj.style.backgroundColor;//改变风格;obj.style.backgroundColor = hover;win.style.borderColor = hover;obj.nextSibling.style.color = hover;sha.style.left = x1 + offx;sha.style.top = y1 + offy;moveable = true;}}//拖动;function drag(obj){if(moveable){var win = obj.parentNode;var sha = win.nextSibling;win.style.left = x1 + event.clientX - x0; win.style.top = y1 + event.clientY - y0; sha.style.left = parseInt(win.style.left) + offx; sha.style.top = parseInt(win.style.top) + offy; }}//停止拖动;function stopDrag(obj){if(moveable){var win = obj.parentNode;var sha = win.nextSibling;var msg = obj.nextSibling;win.style.borderColor = normal;obj.style.backgroundColor = normal;msg.style.color = normal;sha.style.left = obj.parentNode.style.left; sha.style.top = obj.parentNode.style.top; obj.releaseCapture();moveable = false;}}//获得焦点;function getFocus(obj){if(obj.style.zIndex!=index){index = index + 2;var idx = index;obj.style.zIndex=idx;obj.nextSibling.style.zIndex=idx-1;}}//最小化;function min(obj){var win = obj.parentNode.parentNode;var sha = win.nextSibling;var tit = obj.parentNode;var msg = tit.nextSibling;var flg = msg.style.display=="none";if(flg){win.style.height = parseInt(msg.style.height) + parseInt(tit.style.height) + 2*2; sha.style.height = win.style.height;msg.style.display = "block";obj.innerHTML = "0";}else{win.style.height = parseInt(tit.style.height) + 2*2;sha.style.height = win.style.height;obj.innerHTML = "2";msg.style.display = "none";}}//关闭;function cls(obj){var win = obj.parentNode.parentNode;var sha = win.nextSibling;win.style.visibility = "hidden";sha.style.visibility = "hidden";}//创建一个对象;function xWin(id,w,h,l,t,tit,msg){index = index+2;this.id = id;this.width = w;this.height = h;this.left = l;this.top = t;this.zIndex = index;this.title = tit;this.message = msg;this.obj = null;this.bulid = bulid;this.bulid();}//初始化;function bulid(){var str = ""+ "<div id=xMsg" + this.id + " "+ "style='"+ "z-index:" + this.zIndex + ";"+ "width:" + this.width + ";"+ "height:" + this.height + ";"+ "left:" + this.left + ";"+ "top:" + this.top + ";"+ "background-color:" + normal + ";" + "color:" + normal + ";"+ "font-size:10px;"+ "font-family:Verdana;"+ "position:absolute;"+ "cursor:default;"+ "border:2px solid " + normal + ";" + "' "+ "onmousedown='getFocus(this)'>"+ "<div "+ "style='"+ "background-color:" + normal + ";"+ "width:" + (this.width-2*2) + ";"+ "height:20;"+ "color:white;"+ "' "+ "onmousedown='startDrag(this)' "+ "onmouseup='stopDrag(this)' "+ "onmousemove='drag(this)' "+ "ondblclick='min(this.childNodes[1])'"+ ">"+ "<span style='width:" + (this.width-2*12-4) + ";padding-left:3px;'>" + this.title + "</span>"+ "<span style='width:12;border-width:0px;color:white;font-family:webdings;' onclick='min(this)'>0</span>"+ "<span style='width:12;border-width:0px;color:white;font-family:webdings;' onclick='cls(this)'>r</span>"+ "</div>"+ "<div style='"+ "width:100%;"+ "height:" + (this.height-20-4) + ";"+ "background-color:white;"+ "line-height:14px;"+ "word-break:break-all;"+ "padding:3px;"+ "'>" + this.message + "</div>"+ "</div>"+ "<div style='"+ "width:" + this.width + ";"+ "height:" + this.height + ";"+ "top:" + this.top + ";"+ "left:" + this.left + ";"+ "z-index:" + (this.zIndex-1) + ";"+ "position:absolute;"+ "background-color:black;"+ "filter:alpha(opacity=40);"+ "'>by wildwind</div>";document.body.insertAdjacentHTML("beforeEnd",str);}//--></script><script language='JScript'><!--function initialize(){var a = new xWin("1",160,200,200,200,"Message","xWin <br> A Cool Pop Div Window<br>Version:1.0<br>2002-8-13");var b = new xWin("2",240,200,100,100,"Wildwind's Msgbox","Welcome to visited my personal website:<br><a href=/wildcitytarget=_blank></a><br>and u can also sign my guestbook at:<br><a href=/wildcity/gbooktarget=_blank>/gbook</a><br><br>thx!!! =)...");var c = new xWin("3",200,160,250,50,"Copyright","Copyright by <ahref='mailto:wildwind_zz@'>Wildwind</a>!");}window.onload = initialize;//--></script></head><body onselectstart='return false' oncontextmenu='return false' scroll='no'> </body></html>。

相关主题

相关文档推荐：