45IT.COM- 电脑学习从此开始!
DIY硬件教程攒机经验装机配置
设计Photoshop网页设计特效
系统注册表DOS系统命令其它
存储主板显卡外设键鼠内存
维修显卡CPU内存打印机
WinXPVistaWin7unix/linux
CPU光驱电源/散热显示器其它
修技主板硬盘键鼠显示器光驱
办公ExcelWordPowerPointWPS
编程数据库CSS脚本PHP
网络局域网QQ服务器
软件网络系统图像安全
页面导航: 首页 > 设计学院 > 网页特效 >

带漂亮注释文字的衔接!

电脑软硬件应用网 45IT.COM 时间:2005-12-30 18:53 作者:45IT收集

步驟一、複製程式碼至<head></head>之間


  代码: 
<style TYPE="text/css">
BODY {OVERFLOW:scroll;OVERFLOW-X:hidden}
.DEK {POSITION:absolute;VISIBILITY:hidden;Z-INDEX:200;}
</style> 
 


步驟二、複製程式碼到<body>之後


  代码:   
<DIV ID="dek" CLASS="dek"></DIV>

<SCRIPT TYPE="text/javascript">
<!--
Xoffset=15;    // 小窗出現的位置與文字的 X 距離
Yoffset= 10;    // 小窗出現的位置與文字的 Y 距離

var nav,old,iex=(document.all),yyy=-1000;
if(navigator.appName=="Netscape"){(document.layers)?nav=true:old=true;}

if(!old){
var skn=(nav)?document.dek:dek.style;
if(nav)document.captureEvents(Event.MOUSEMOVE);
document.onmousemove=get_mouse;
}

function popup(msg,wsize,bdcolor,bak,timx){
var content="<TABLE "+"width="+wsize+" BORDER=1 "+"BORDERCOLOR="+bdcolor+" CELLPADDING=3 CELLSPACING=0 "+"BGCOLOR="+bak+"><TD ALIGN=center><FONT "+"COLOR="+timx+" SIZE=2>"+msg+"</FONT></TD></TABLE>";
if(old){alert(msg);return;} 
else{yyy=Yoffset;
if(nav){skn.document.write(content);skn.document.close();skn.visibility="visible"}
if(iex){document.all("dek").innerHTML=content;skn.visibility="visible"}
}
}

function get_mouse(e){
var x=(nav)?e.pageX:event.x+document.body.scrollLeft;skn.left=x+Xoffset;
var y=(nav)?e.pageY:event.y+document.body.scrollTop;skn.top=y+yyy;
}

function kill(){
if(!old){yyy=-1000;skn.visibility="hidden";}
}

//-->
</SCRIPT> 
 


步驟三、複製到網頁中欲呈現特效的位置


  代码:    
<a href="index.htm" ONMOUSEOVER="popup('你要输入的注释内容','100','#ffc0c0','#FFcccc','#cc3300')"; ONMOUSEOUT="kill()">【图片或衔接文字】</a> 
 


可修改项目


  引用: 
<a href="index.htm" ONMOUSEOVER="popup('你要输入的注释内容','100','#ffc0c0','#FFcccc','#cc3300')"; ONMOUSEOUT="kill()">【图片或衔接文字】
藍色是浮動視窗的大小、紅色部分分別為浮動視窗的(外框,背景及文字)的色彩 


 

顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------
无法在这个位置找到: baidushare.htm
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
验证码:点击我更换图片
推荐知识