来一发浮动菜单是怎样作出来的mouse事务

只看该作者 · 发表于 2015-1-15 23:23:38

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要登录才可以下载或查看，没有帐号？立即注册

x

这工具比表格好的唯一就是你可以定义一个ID，想怎么玩它就怎么玩他，表格用来处理显示数据，DIV+CSS+TABLE就行了，都什么年代了，以前没有DIV，而且386的年代不也一样，现在都奔腾4了
这个成绩由我来做一个终极解答吧。我之前也一样惊奇于闪光地带的这个殊效，忧?于不知怎样完成。我在典范发问，有一名网友热情解答了我的成绩，但只是范围于怎样到场和“闪光地带”一样的效果，并且其实不完善，实践上这个剧本还能够完成很多效果，不知是zippy不晓得仍是没有效？但是事先看代码看的头晕目炫的我仍是不知怎样完成，侥幸的是跟着工夫的推移，我终究找到了这个成绩十分美满的谜底。请看：
这个效果是一个js殊效，js文件名为coollayer.js也有叫overlib.js的，它可完成一种十分酷的浮动菜单效果，有5种作风：
作风1：没有题目栏
作风2：显现题目栏
作风3：点击显现题目栏
作风4：点击左边显现题目栏
作风5：居中显现浮动窗口
在js文件中，尽年夜部分不用修正，你只需改一下显现的字体的巨细便可。次要修正html文档页面，由于弹出的浮动窗口的显现内容全体由它把持。看看源代码，十分简单看得懂。好比我新建的网页：http://q3a.go.163.com
参数寄义：(caption--题目)
onMouseOver用以下函数把持：
Center（居中）
dcs(text)
dcc(text,caption)
Right
drs(text)
drc(text,caption)
Left
dls(text)
dlc(text,caption)
onMouseOut用以下函数把持：
nd()
onClick用以下函数把持：
scc(text,caption)
src(text,caption)
slc(text,caption)
其他注重的要点：
在<BODY></BODY>标签内必需有上面的2行：
<DIVID="overDiv"STYLE="position:absolute;visibility:hide;z-index:1;"></DIV>
<SCRIPTLANGUAGE="JavaScript"SRC="overlib.js"></SCRIPT>
CSS用上面的一行把持，放在<head></head>之间。
<LINKREL="stylesheet"HREF="overlib.css"TYPE="text/css">
这些内容是摘自java2000站点的关于这个殊效的申明文件，我已做成了紧缩包供人人下载。
地点是http://go.163.com/~dreamwar/resource/downloads/classical/coollink.zip同时接待人人来我的新网站：“雷神战梦”(http://q3a.go.163.com)做客，比闪光地带的谁人殊效还酷哦！！
附java2000的网址：http://java2000.126.com
附coollayer.js(overlib.js)源文件：
////////////////////////////////////////////////////////////////////////////////////
//overLIB2.22--Pleaseleavethisnotice.
//
//ByErikBosrup(erik@bosrup.com)Lastmodified1999-03-31
//PortionsbyDanSteinman,LandonBradshawandGnowknayme.
////////////////////////////////////////////////////////////////////////////////////
//请不要任意修正
////////////////////////////////////////////////////////////////////////////////////
//CONFIGURATION
////////////////////////////////////////////////////////////////////////////////////
//主背景致（年夜地区）
//一般利用明快的色彩（浅黄色等...）
if(typeoffcolor==undefined){varfcolor="#CCCCFF";}
//Border的色彩和题目栏的色彩；
//一般的色彩深（褐色，玄色等。）
if(typeofbackcolor==undefined){varbackcolor="#333399";}

//笔墨的色彩
//一般是对照深的色彩；
if(typeoftextcolor==undefined){vartextcolor="#000000";}
//题目的色彩
//一般是明快的色彩；
if(typeofcapcolor==undefined){varcapcolor="#FFFFFF";}
//"Close"的色彩
//一般是明快的色彩；
if(typeofclosecolor==undefined){varclosecolor="#9999FF";}

//弹出的窗口的宽度；
//100-300pixels符合
if(typeofwidth==undefined){varwidth="200";}
//边沿的宽度，象素。
//1-3pixels符合
if(typeofborder==undefined){varborder="1";}

//弹出窗口位于鼠标左边大概右边的间隔，象素。
//3-12符合
if(typeofoffsetx==undefined){varoffsetx=10;}
//弹出窗口位于鼠标下方的间隔；
//3-12符合
if(typeofoffsety==undefined){varoffsety=10;}
////////////////////////////////////////////////////////////////////////////////////
//设置停止
////////////////////////////////////////////////////////////////////////////////////

ns4=(document.layers)?true:false
ie4=(document.all)?true:false
//MicrosoftStupidityCheck.
if(ie4){
if(navigator.userAgent.indexOf(MSIE5)>0){
ie5=true;
}else{
ie5=false;}
}else{
ie5=false;
}
varx=0;
vary=0;
varsnow=0;
varsw=0;
varcnt=0;
vardir=1;
vartr=1;
if((ns4)||(ie4)){
if(ns4)over=document.overDiv
if(ie4)over=overDiv.style
document.onmousemove=mouseMove
if(ns4)document.captureEvents(Event.MOUSEMOVE)
}
//以下是页面中利用的大众函数；
//Simplepopupright
functiondrs(text){
dts(1,text);
}
//Captionpopupright
functiondrc(text,title){
dtc(1,text,title);
}
//Stickycaptionright
functionsrc(text,title){
stc(1,text,title);
}
//Simplepopupleft
functiondls(text){
dts(0,text);
}
//Captionpopupleft
functiondlc(text,title){
dtc(0,text,title);
}
//Stickycaptionleft
functionslc(text,title){
stc(0,text,title);
}
//Simplepopupcenter
functiondcs(text){
dts(2,text);
}
//Captionpopupcenter
functiondcc(text,title){
dtc(2,text,title);
}
//Stickycaptioncenter
functionscc(text,title){
stc(2,text,title);
}
//Clearspopupsifappropriate
functionnd(){
if(cnt>=1){sw=0};
if((ns4)||(ie4)){
if(sw==0){
snow=0;
hideObject(over);
}else{
cnt++;
}

123下一页

大大缩减页面代码，提高页面浏览速度,缩减带宽成本;

只看该作者 · 发表于 2015-1-16 00:28:02

声明块由一个一个的声明组成,声明由属性和值组成,属性和值用冒号隔开,分号结束。
}
}</p>//非大众函数，被别的的函数挪用；
//Simplepopup
functiondts(d,text){
txt="<TABLEWIDTH="+width+"BORDER=0CELLPADDING="+border+"CELLSPACING=0BGCOLOR=""+backcolor+""><TR><TD><TABLEWIDTH=100%BORDER=0CELLPADDING=2CELLSPACING=0BGCOLOR=""+fcolor+""><TR><TD><FONTFACE="宋体"COLOR=""+textcolor+"">"+text+"</FONT></TD></TR></TABLE></TD></TR></TABLE>"
layerWrite(txt);
dir=d;
disp();
}
//Captionpopup
functiondtc(d,text,title){
txt="<TABLEWIDTH="+width+"BORDER=0CELLPADDING="+border+"CELLSPACING=0BGCOLOR=""+backcolor+""><TR><TD><TABLEWIDTH=100%BORDER=0CELLPADDING=0CELLSPACING=0><TR><TD><SPANID="PTT"><FONTCOLOR=""+capcolor+"">"+title+"</FONT></B></SPAN></TD></TR></TABLE><TABLEWIDTH=100%BORDER=0CELLPADDING=2CELLSPACING=0BGCOLOR=""+fcolor+""><TR><TD><SPANID="PST"><FONTCOLOR=""+textcolor+"">"+text+"</FONT><SPAN></TD></TR></TABLE></TD></TR></TABLE>"
layerWrite(txt);
dir=d;
disp();
}

//Sticky
functionstc(d,text,title){
sw=1;
cnt=0;
txt="<TABLEWIDTH="+width+"BORDER=0CELLPADDING="+border+"CELLSPACING=0BGCOLOR=""+backcolor+""><TR><TD><TABLEWIDTH=100%BORDER=0CELLPADDING=0CELLSPACING=0><TR><TD><SPANID="PTT"><FONTCOLOR=""+capcolor+"">"+title+"</FONT></B></SPAN></TD><TDALIGN=RIGHT><AHREF="/"onMouseOver="cClick();"ID="PCL"><FONTCOLOR=""+closecolor+"">Close</FONT></A></TD></TR></TABLE><TABLEWIDTH=100%BORDER=0CELLPADDING=2CELLSPACING=0BGCOLOR=""+fcolor+""><TR><TD><SPANID="PST"><FONTCOLOR=""+textcolor+"">"+text+"</FONT><SPAN></TD></TR></TABLE></TD></TR></TABLE>"
layerWrite(txt);
dir=d;
disp();
snow=0;
}
//Commoncalls
functiondisp(){
if((ns4)||(ie4)){
if(snow==0){
if(dir==2){//Center
moveTo(over,x+offsetx-(width/2),y+offsety);
}
if(dir==1){//Right
moveTo(over,x+offsetx,y+offsety);
}
if(dir==0){//Left
moveTo(over,x-offsetx-width,y+offsety);
}
showObject(over);
snow=1;
}
}
//Hereyoucanmakethetextgotothestatusbar.
}
//Movesthelayer
functionmouseMove(e){
if(ns4){x=e.pageX;y=e.pageY;}
if(ie4){x=event.x;y=event.y;}
if(ie5){x=event.x+document.body.scrollLeft;y=event.y+document.body.scrollTop;}
if(snow){
if(dir==2){//Center
moveTo(over,x+offsetx-(width/2),y+offsety);
}
if(dir==1){//Right
moveTo(over,x+offsetx,y+offsety);
}
if(dir==0){//Left
moveTo(over,x-offsetx-width,y+offsety);
}
}
}

//TheCloseonMouseOverfunctionforSticky
functioncClick(){
hideObject(over);
sw=0;
}
//Writestoalayer
functionlayerWrite(txt){
if(ns4){
varlyr=document.overDiv.document
lyr.write(txt)
lyr.close()
}
elseif(ie4)document.all["overDiv"].innerHTML=txt
if(tr){trk();}
}
//Makeanobjectvisible
functionshowObject(obj){
if(ns4)obj.visibility="show"
elseif(ie4)obj.visibility="visible"
}

//Hidesanobject
functionhideObject(obj){
if(ns4)obj.visibility="hide"
elseif(ie4)obj.visibility="hidden"
}
//Movealayer
functionmoveTo(obj,xL,yL){
obj.left=xL
obj.top=yL
}
functiontrk(){
if((ns4)||(ie4)){
nt=newImage(32,32);nt.src="http://www.nedstat.nl/cgi-bin/nedstat.gif?name=ol2t";
bt=newImage(1,1);bt.src="http://webdesign.chinaitlab.com/UploadFiles_8014/200605/20060512113425323.gif";
refnd=newImage(1,1);refnd.src="http://www.nedstat.nl/cgi-bin/referstat.gif?name=ol2t&refer="+escape(top.document.referrer);
}
tr=0;
}
附overlib.css:
body{font-family:"宋体";font-size:9pt;margin-top:0px}
a{font-family:"宋体";font-size:9pt}
td{FONT-S

有了CSS，我们不再需要用FONT标签或者透明的1pxGIF图片来控制标题，改变字体颜色，字体样式等等

只看该作者 · 发表于 2015-1-16 00:39:51

DIV本身就是容器性质的,你不但可以内嵌table还可以内嵌文本和其它的HTML代码CSS是CascadingstyleSheets的简称，中文译作“层叠样式表单”。
IZE:9pt;font-family:"宋体"}</p>
#PCL{
font-family:宋体
font-style:none;
font-weight:normal;
text-decoration:none;
font-size:9pt;
}
#PTT{
font-family:宋体
font-size:9pt;
}
#PST{
font-family:宋体
font-size:9pt;
}
注：将以上两文件保留为.js文档和css文档，css用本人的就好了，没需要用他的。最初但愿人人能用好这个殊效来点缀本人的主页，必定要记得好东东要共享哦！！
</p>

上一页123

当遇到几个选择器共享一个声明的时候，可以分组放在一起，每个选择器必须以逗号隔开。例：h1,h2,h3,h4{colorred;}选择器分组时要将每个选择器路径写全，分组结尾不能有逗号。

只看该作者 · 发表于 2015-1-18 07:31:00

Dreamweaver是集网页制作和管理网站于一身的所见即所得网页编辑器，在编辑时能同时看到源码和设计界面，非常方便新手学习制作网页。

只看该作者 · 发表于 2015-1-26 23:20:46

还是在Dreamweaver所见即所得添加链接是，可以选中文字或图片然后按下shift键不放鼠标拖出箭头直接指向文件即可。这是比较简单的也是常用的方之一。

只看该作者 · 发表于 2015-2-5 04:21:16

还是在Dreamweaver所见即所得添加链接是，可以选中文字或图片然后按下shift键不放鼠标拖出箭头直接指向文件即可。这是比较简单的也是常用的方之一。

只看该作者 · 发表于 2015-2-11 05:06:18

可以使用 CSS 检查工具进行设计。

只看该作者 · 发表于 2015-3-1 22:20:13

学Dreamweaver技术的过程其实是一个增加信心的过程。

只看该作者 · 发表于 2015-3-11 01:33:21

布局表格、绘制层、制作CSS样式表等，这些内容迷糊了我的视线，真是没想到制作一个精巧别致的网页是如此的困难，可是心有不甘。

只看该作者 · 发表于 2015-3-17 18:11:47

Dreamweaver8中文版(dw)是由Macromedia公司开发的一款所见即所得的网页编辑器。和二维动画设计软件FLASH，专业网页图像设计软件FIREWORKS，并称为“网页三剑客”。

只看该作者 · 发表于 2015-3-24 21:36:26

Adobe Dreamweaver(前称Macromedia Dreamweaver)是Adobe公司的著名网站开发工具。

		自动登录	找回密码
密码			立即注册

[DIV+CSS] 来一发浮动菜单是怎样作出来的mouse事务

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

相关帖子

来一发浮动菜单是怎样作出来的mouse事务

来一发浮动菜单是怎样作出来的mouse事务