仓酷云

 找回密码
 立即注册
搜索
热搜: 活动 交友 discuz
查看: 1553|回复: 12
打印 上一主题 下一主题

[DIV+CSS] 来一发浮动菜单是怎样作出来的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 | 只看该作者

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

声明块由一个一个的声明组成,声明由属性和值组成,属性和值用冒号隔开,分号结束。
}
}</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
上一页123下一页


有了CSS,我们不再需要用FONT标签或者透明的1pxGIF图片来控制标题,改变字体颜色,字体样式等等
精灵巫婆 该用户已被删除
板凳
 楼主| 发表于 2015-1-16 00:39:51 | 只看该作者

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

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是集网页制作和管理网站于一身的所见即所得网页编辑器,在编辑时能同时看到源码和设计界面,非常方便新手学习制作网页。
乐观 该用户已被删除
5#
发表于 2015-1-26 23:20:46 | 只看该作者
还是在Dreamweaver所见即所得添加链接是,可以选中文字或图片然后按下shift键不放鼠标拖出箭头直接指向文件即可。这是比较简单的也是常用的方之一。
柔情似水 该用户已被删除
6#
发表于 2015-2-5 04:21:16 | 只看该作者
还是在Dreamweaver所见即所得添加链接是,可以选中文字或图片然后按下shift键不放鼠标拖出箭头直接指向文件即可。这是比较简单的也是常用的方之一。
海妖 该用户已被删除
7#
发表于 2015-2-11 05:06:18 | 只看该作者
可以使用 CSS 检查工具进行设计。
小魔女 该用户已被删除
8#
发表于 2015-3-1 22:20:13 | 只看该作者
学Dreamweaver技术的过程其实是一个增加信心的过程。
透明 该用户已被删除
9#
发表于 2015-3-11 01:33:21 | 只看该作者
布局表格、绘制层、制作CSS样式表等,这些内容迷糊了我的视线,真是没想到制作一个精巧别致的网页是如此的困难,可是心有不甘。
老尸 该用户已被删除
10#
发表于 2015-3-17 18:11:47 | 只看该作者
Dreamweaver8中文版(dw)是由Macromedia公司开发的一款所见即所得的网页编辑器。和二维动画设计软件FLASH,专业网页图像设计软件FIREWORKS,并称为“网页三剑客”。
admin 该用户已被删除
11#
发表于 2015-3-24 21:36:26 | 只看该作者
Adobe Dreamweaver(前称Macromedia Dreamweaver)是Adobe公司的著名网站开发工具。
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|Archiver|手机版|仓酷云 鄂ICP备14007578号-2

GMT+8, 2024-12-29 07:14

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表