求悬浮代码

发布网友发布时间：2022-04-29 16:07

共2个回答

热心网友时间：2022-04-26 14:22

<html>

<head>

<title>web reference</title>

<script language="JavaScript1.2" type="text/javascript">

var maxmnus = 5

function opTab(){

var mnu = document.getElementById("menubar")

var arrdiv = document.getElementById("arrow")

var arrtxt = document.getElementById("arr")

if((mnu.style.display != "block") || (mnu.style.display == "")){

mnu.style.display = "block"

arrdiv.style.pixelLeft = mnu.style.width.substring(0 , mnu.style.width.length - 2)

arrtxt.innerText = "3";

} else {

mnu.style.display = "none"

arrtxt.innerText = "4";

arrdiv.style.pixelLeft = 0;

}

event.cancelBubble = true;

}

function toggleMenu(el){

for(var i = 0;i < maxmnus;i++) document.getElementById(document.getElementById("c" + i).menu).style.display = "none";

if(el.status == "closed"){

el.status = "open"

document.getElementById(el.menu).style.display = "block";

} else {

el.status = "closed"

}

}

function toggleSub(e){

el = document.getElementById(e)

if(el.status == "closed"){

el.style.display = "block";

el.status = "open"

} else {

el.style.display = "none";

el.status = "closed"

}

event.cancelBubble = true;

}

</script>

<style type="text/css">

#menubar{
position:absolute;top:0px;left:0px;display:none;font-family:Verdana,Helvetica,Arial;font-weight:700;font-size:10px;cursor:hand;z-index:5;background-image:url();background-repeat:repeat-y;filter:progid:DXImageTransform.Microsoft.gradient(enabled='true',gradientType='1',startColorstr='#2644b2', endColorstr='#e7e8f1');}

.indicator{
color:#b24426;font-family:Webdings;font-weight:bold;font-size:10px;}

.r1{
position:relative;top:10px;left:5px;width:213px;color:#e7e8f1;border-left:#e7e8f1 2px outset;border-top:#e7e8f1 2px outset;border-right:#e7e8f1 2px outset;border-bottom:#e7e8f1 2px outset;padding-left:5px;padding-top:1px;adding-right:5px;padding-bottom:1px;background-image:url();background-repeat:repeat-y;filter:progid:DXImageTransform.Microsoft.gradient(enabled='true',gradientType='1',startColorstr='#2644b2', endColorstr='#e7e8f1');}

.submenu1{
position:relative;top:0px;left:0px;height:95%;width:100%;border-left:#e0f8e3 2px inset;border-top:#e0f8e3 2px inset;border-right:#e0f8e3 2px inset;border-bottom:#e0f8e3 2px inset;padding-left:3px;padding-top:3px;padding-right:3px;padding-bottom:3px;display:none;color:#2644b2;font-family:Verdana,Helvetica,Arial;font-weight:700;font-size:10px;background-color:#cff1d4;background-image:url();background-repeat:repeat-y;filter:progid:DXImageTransform.Microsoft.gradient(enabled='true',gradientType='1',startColorstr='#bec1e4', endColorstr='#e7e8f1');}

.submenu2{
position:relative;top:0px;left:0px;width:90%;border-left:#e0f8e3 3px groove;border-top:#e0f8e3 3px groove;border-right:#e0f8e3 3px groove;border-bottom:#e0f8e3 3px groove;padding-left:3px;padding-top:3px;padding-right:3px;padding-bottom:3px;margin-top:4px;display:none;background-color:#cff1d4;color:#2644b2;font-family:Verdana,Helvetica,Arial;font-weight:700;font-size:10px;background-image:url();background-repeat:repeat-y;filter:progid:DXImageTransform.Microsoft.gradient(enabled='true',gradientType='1',startColorstr='#bec1e4', endColorstr='#e7e8f1');}

.pulltab{
position:absolute;top:0px;left:0px;height:100%;width:20px;padding-left:2px;cursor:hand;color:#2644b2;font-family:Webdings;font-weight:bold;font-size:10px;z-index:5;background-image:url();background-repeat:repeat-y;filter:progid:DXImageTransform.Microsoft.gradient(enabled='true',gradientType='1',startColorstr='#e7e8f1', endColorstr='#2644b2');}

.inner{
height:100%;width:100%;}

.mtab{
position:relative;top:0px;

.btninner{
height:100%;width:100%;}

.fr{
position:absolute;top:0px;left:30px;}

</style>

</head>

<body scroll="no">

<div id="menubar" style="; HEIGHT: expression(document.body.offsetHeight); WIDTH: 223px">

<div id="c0" class="r1" onclick="toggleMenu(this)" status="closed" menu="m0">

<div id="cbtn" class="btninner">Behaviors</div>

<div class="mtab">

<table id="m0" class="submenu1" align="center" border="0" cellspacing="0" cellpadding="0">

<tr><td onclick="opTab();">DHTML Behaviours</td></tr>

<tr><td onclick="opTab();">HTC Reference</td></tr>

<tr><td onclick="opTab();">Element Behaviors</td></tr>

<tr><td onclick="toggleSub('m0s0');">ViewLink Overview<span class="indicator">6</span>

<table id="m0s0" class="submenu2" align="center" border="0" cellspacing="0" cellpadding="0" status="closed">

<tr><td onclick="opTab();">ViewLink CSS Inheritance</td></tr>

</table></td></tr>

<tr><td onclick="opTab();">Default Behaviors Reference</td></tr>

<tr><td onclick="opTab();">Behaviors Library</td></tr>

<tr><td onclick="opTab();">Using DHTML behaviors</td></tr>

<tr><td onclick="opTab();">Implementing DHTML Behaviors in Script Using HTML Components</td></tr>

</table>

</div>

</div>

<div id="c1" class="r1" onclick="toggleMenu(this)" status="closed" menu="m1">

<div id="cbtn" class="btninner">CSS</div>

<div>

<table id="m1" class="submenu1" align="center" border="0" cellspacing="0" cellpadding="0">

<tr><td onclick="opTab();">A Coast-to-Coast Cascade of Style Sheets</td></tr>

<tr><td onclick="opTab();">Using Cascading Style Sheets</td></tr>

<tr><td onclick="opTab();">Controlling Presentation with Measurement and Location Properties</td></tr>

<tr><td onclick="opTab();">A User's Guide to Style Sheets</td></tr>

<tr><td onclick="opTab();">Cascading Style Sheets in Internet Explorer 4.0</td></tr>

<tr><td onclick="opTab();">New in CSS, Level 2</td></tr>

<tr><td onclick="opTab();">CSS Positioning</td></tr>

<tr><td onclick="opTab();">Linked Style Sheets</td></tr>

<tr><td onclick="opTab();">Using Vertical Layout in Internet Explorer 5.5</td></tr>

<tr><td onclick="opTab();">CSS Attributes Reference</td></tr>

<tr><td onclick="opTab();">CSS Length Units Reference</td></tr>

<tr><td onclick="opTab();">Tips</td></tr>

</table>

</div>

</div>

<div id="c2" class="r1" onclick="toggleMenu(this)" status="closed" menu="m2">

<div id="cbtn" class="btninner">DHTML</div>

<div>

<table id="m2" class="submenu1" align="center" border="0" cellspacing="0" cellpadding="0">

<tr><td>DHTML 1</td></tr>

<tr><td>DHTML 2</td></tr>

<tr><td>DHTML 3</td></tr>

<tr><td>DHTML 4</td></tr>

<tr><td>DHTML 5</td></tr>

<tr><td>DHTML 6</td></tr>

<tr><td>DHTML 7</td></tr>

<tr><td>DHTML 8</td></tr>

<tr><td>DHTML 9</td></tr>

<tr><td>DHTML 10</td></tr>

<tr><td>DHTML 11</td></tr>

<tr><td>DHTML 12</td></tr>

</table>

</div>

</div>

<div id="c3" class="r1" onclick="toggleMenu(this)" status="closed" menu="m3">

<div id="cbtn" class="btninner">DOM</div>

<div>

<table id="m3" class="submenu1" align="center" border="0" cellspacing="0" cellpadding="0">

<tr><td>DOM 1</td></tr>

<tr><td>DOM 2</td></tr>

<tr><td>DOM 3</td></tr>

<tr><td>DOM 4</td></tr>

<tr><td>DOM 5</td></tr>

<tr><td>DOM 6</td></tr>

<tr><td>DOM 7</td></tr>

<tr><td>DOM 8</td></tr>

<tr><td>DOM 9</td></tr>

<tr><td>DOM 10</td></tr>

<tr><td>DOM 11</td></tr>

<tr><td>DOM 12</td></tr>

</table>

</div>

</div>

<div id="c4" class="r1" onclick="toggleMenu(this)" status="closed" menu="m4">

<div id="cbtn" class="btninner">HTML</div>

<div>

<table id="m4" class="submenu1" align="center" border="0" cellspacing="0" cellpadding="0">

<tr><td>HTML 1</td></tr>

<tr><td>HTML 2</td></tr>

<tr><td>HTML 3</td></tr>

<tr><td>HTML 4</td></tr>

<tr><td>HTML 5</td></tr>

<tr><td>HTML 6</td></tr>

<tr><td>HTML 7</td></tr>

<tr><td>HTML 8</td></tr>

<tr><td>HTML 9</td></tr>

<tr><td>HTML 10</td></tr>

<tr><td>HTML 11</td></tr>

<tr><td>HTML 12</td></tr>

</table>

</div>

</div>

</div>

<div id="arrow" class="pulltab" onclick="opTab()"><table class="inner"><tr><td id="arr" valign="middle">4</td></tr></table></div>

<div id="fr" name="fr" class="fr">

<h2>左侧的变化菜单</h2>

<p>This menu is specifically designed for IE5.5+, there will be a version for N6+ and Mozilla 0.9.2 soon</p>

<ol>

<li>Click on the bar to the left to open or close the menu</li>

<li>Clicking on any menu item would normally display a page here and/or show a submenu indicated by a down arrow at Jon Steele's suggestion</li>

<li>The fourth item of the "Behavoirs" menu, "Viewlink Overview" has a sub-menu.</li>

<li>No menu will remain open if another is clicked</li>

<li>Clicking on the same menu item toggles it open or closed accordingly</li>

<li>Selection of a link closes the menu automatically</li>

<li>The IE 5.5 version, uses no images, the colouration is from a behavior that requires 5.5</li>

<li>The 5.0 version uses 2 small jpg but are of lesser quality.</li>

<li>This menu is designed, primarily, for dynamic page. The adat for the page would either be placed here via XML or arrays or document/write method.

</ol>

</div>

热心网友时间：2022-04-26 15:40

javascript结合 DIV层就可以做到了。下面是他的源代码

/******************************************************************************
Loveyuki's BLOG- Common Moles for L-Blog
Modified by: Loveyuki (http://www.loveyuki.com)
Based upon: http://www.cnzzz.com
*******************************************************************************/

var sPop = null;
var postSubmited = false;

document.write("<style type='text/css'id='defaultPopStyle'>");
document.write(".cPopText { font-family: Tahoma, 宋体; background-color: #FFFFCC; border: 1px #000000 solid; font-size: 11px; padding-right: 4px; padding-left: 4px; height: 20px; padding-top: 2px; padding-bottom: 2px; visibility: hidden; filter: Alpha(Opacity=80)}");

document.write("</style>");
document.write("<div id='popLayer' style='position:absolute;z-index:1000' class='cPopText'></div>");

var flag=false;
function DrawImage(ImgD){
var image=new Image();
image.src=ImgD.src;
if(image.width>0 && image.height>0){
flag=true;
if(image.width>=400){
ImgD.width=400;
ImgD.height=(image.height*400)/image.width;
}else{
ImgD.width=image.width;
ImgD.height=image.height;
}
}
}

function showPopupText() {
var o=event.srcElement;
MouseX=event.x;
MouseY=event.y;
if(o.alt!=null && o.alt!="") { o.pop=o.alt;o.alt="" }
if(o.title!=null && o.title!=""){ o.pop=o.title;o.title="" }
if(o.pop) { o.pop=o.pop.replace("\n","<br>"); o.pop=o.pop.replace("\n","<br>"); }
if(o.pop!=sPop) {
sPop=o.pop;
if(sPop==null || sPop=="") {
popLayer.style.visibility="hidden";
} else {
if(o.dyclass!=null) popStyle=o.dyclass
else popStyle="cPopText";
popLayer.style.visibility="visible";
showIt();
}
}
}

function showIt() {
popLayer.className=popStyle;
popLayer.innerHTML=sPop;
popWidth=popLayer.clientWidth;
popHeight=popLayer.clientHeight;
if(MouseX+12+popWidth>document.body.clientWidth) popLeftAdjust=-popWidth-24
else popLeftAdjust=0;
if(MouseY+12+popHeight>document.body.clientHeight) popTopAdjust=-popHeight-24
else popTopAdjust=0;
popLayer.style.left=MouseX+12+document.body.scrollLeft+popLeftAdjust;
popLayer.style.top=MouseY+12+document.body.scrollTop+popTopAdjust;
}

function ctlent(obj) {
if(postSubmited == false && (event.ctrlKey && window.event.keyCode == 13) || (event.altKey && window.event.keyCode == 83)) {
if(this.document.input.topicsubmit) this.document.input.topicsubmit.disabled = true;
if(this.document.input.replysubmit) this.document.input.replysubmit.disabled = true;
if(this.document.input.editsubmit) this.document.input.editsubmit.disabled = true;
this.document.input.submit();
}
}

function checkall(form) {
for(var i = 0;i < form.elements.length; i++) {
var e = form.elements[i];
if (e.name != 'chkall') e.checked = form.chkall.checked;
}
}

function runEx(cod1) {
cod=document.all(cod1)
var code=cod.value;
if (code!=""){
var newwin=window.open('','','');
newwin.opener = null
newwin.document.write(code);
newwin.document.close();
}
}

var flag=false;
function DrawImage(ImgD){
var image=new Image();
image.src=ImgD.src;
if(image.width>0 && image.height>0){
flag=true;
if(image.width>=518){
ImgD.width=518;
ImgD.height=(image.height*518)/image.width;
}else{
ImgD.width=image.width;
ImgD.height=image.height;
}
}
}
document.onmouseover=showPopupText;

求 悬浮 代码

求悬浮代码