首页 »Javascript教程 » 网页特效网页代码收集 »正文网页特效网页代码收集来源: 发布时间:星期日, 2008年9月21日 浏览:610次 评论:0
希望大家有好的也推荐 虽然很多关于js的站但我收藏的都是实用性最高的。不要花哨的。 滚动条 CODE: [Copy to clipboard] 1．overflow内容溢出时的设置（设定被设定对象是否显示滚动条） overflow-x水平方向内容溢出时的设置 overflow-y垂直方向内容溢出时的设置 以上三个属性设置的值为visible(默认值)、scroll、hidden、auto。 2．scrollbar-3d-light-color立体滚动条亮边的颜色（设置滚动条的颜色） scrollbar-arrow-color上下按钮上三角箭头的颜色 scrollbar-base-color滚动条的基本颜色 scrollbar-dark-shadow-color立体滚动条强阴影的颜色 scrollbar-face-color立体滚动条凸出部分的颜色 scrollbar-highlight-color滚动条空白部分的颜色 scrollbar-shadow-color立体滚动条阴影的颜色 我们通过几个实例来讲解上述的样式属性： 1.让浏览器窗口永远都不出现滚动条 没有水平滚动条 <body style="overflow-x:hidden"> 没有垂直滚动条 <body style="overflow-y:hidden"> 没有滚动条 <body style="overflow-x:hidden;overflow-y:hidden">或<body style="overflow:hidden"> 2.设定多行文本框的滚动条 没有水平滚动条 <textarea style="overflow-x:hidden"></textarea> 没有垂直滚动条 <textarea style="overflow-y:hidden"></textarea> 没有滚动条 <textarea style="overflow-x:hidden;overflow-y:hidden"></textarea> 或<textarea style="overflow:hidden"></textarea> 3.设定窗口滚动条的颜色 设置窗口滚动条的颜色为红色<body style="scrollbar-base-color:red"> scrollbar-base-color设定的是基本色，一般情况下只需要设置这一个属性就可以达到改变滚动条颜色的目的。 加上一点特别的效果： <body style="scrollbar-arrow-color:yellow;scrollbar-base-color:lightsalmon"> 4.在样式表文件中定义好一个类，调用样式表。 <style> .coolscrollbar{scrollbar-arrow-color:yellow;scrollbar-base-color:lightsalmon;} </style> 这样调用： <textarea class="coolscrollbar"></textarea> 无边框窗口代码 制作无边框页面的代码 CODE: [Copy to clipboard] //第一步:把如下代码加入<head></head>区域中 <script language=Javascript> minimizebar="minimize.gif"; //视窗右上角最小化「按钮」的图片 minimizebar2="minimize2.gif"; //滑鼠悬停时最小化「按钮」的图片 closebar="close.gif"; //视窗右上角关闭「按钮」的图片 closebar2="close2.gif"; //滑鼠悬停时关闭「按钮」的图片 icon="icon.gif"; //视窗左上角的小图标 function noBorderWin(fileName,w,h,titleBg,moveBg,titleColor,titleWord,scr) //定义一个弹出无边视窗的函数，能数意义见下面「参数说明」，实际使用见最後的实例。 /* ------------------参数说明------------------- fileName ：无边视窗中显示的文件。 w ：视窗的宽度。 h ：视窗的高度。 titleBg ：视窗「标题栏」的背景色以及视窗边框颜色。 moveBg ：视窗拖动时「标题栏」的背景色以及视窗边框颜色。 titleColor ：视窗「标题栏」文字的颜色。 titleWord ：视窗「标题栏」的文字。 scr ：是否出现卷轴。取值yes/no或者1/0。 -------------------------------------------- */ { var contents="<html>"+ "<head>"+ "<title>"+titleWord+"</title>"+ "<META http-equiv=\"Content-Type\" content=\"text/html; charset=gb2312\">"+ "<object id=hhctrl type='application/x-oleobject' classid='clsid:adb880a6-d8ff-11cf-9377-00aa003b7a11'><param name='Command' value='minimize'></object>"+ "</head>"+ "<body topmargin=0 leftmargin=0 scroll=no onselectstart='return false' ondragstart='return false'>"+ " <table height=100% width=100% cellpadding=0 cellspacing=1 bgcolor="+titleBg+" id=mainTab>"+ " <tr height=18 style=cursor:default; onmousedown='x=event.x;y=event.y;setCapture();mainTab.bgColor=\""+moveBg+"\";' onmouseup='releaseCapture();mainTab.bgColor=\""+titleBg+"\";' onmousemove='if(event.button==1)self.moveTo(screenLeft+event.x-x,screenTop+event.y-y);'>"+ " <td width=18 align=center><img height=12 width=12 border=0 src="+icon+"></td>"+ " <td width="+w+"><span style=font-size:12px;color:"+titleColor+";font-family:宋体; position:relative;top:1px;>"+titleWord+"</span></td>"+ " <td width=14><img border=0 width=12 height=12 alt=最小化 src="+minimizebar+" onmousedown=hhctrl.Click(); onmouseover=this.src='"+minimizebar2+"' onmouseout=this.src='"+minimizebar+"'></td>"+ " <td width=13><img border=0 width=12 height=12 alt=关闭 src="+closebar+" onmousedown=self.close(); onmouseover=this.src='"+closebar2+"' onmouseout=this.src='"+closebar+"'></td>"+ " </tr>"+ " <tr height=*>"+ " <td colspan=4>"+ " <iframe name=nbw_v6_iframe src="+fileName+" scrolling="+scr+" width=100% height=100% frameborder=0></iframe>"+ " </td>"+ " </tr>"+ " </table>"+ "</body>"+ "</html>"; pop=window.open("","_blank","fullscreen=yes"); pop.resizeTo(w,h); pop.moveTo((screen.width-w)/2,(screen.height-h)/2); pop.document.writeln(contents); if(pop.document.body.clientWidth!=w||pop.document.body.clientHeight!=h) //如果无边视窗不是出现在纯粹的IE视窗中 { temp=window.open("","nbw_v6"); temp.close(); window.showModalDialog("about:<"+"script language=Javascript>window.open('','nbw_v6','fullscreen=yes');window.close();"+"</"+"script>","","dialogWidth:0px;dialogHeight:0px"); pop2=window.open("","nbw_v6"); pop2.resizeTo(w,h); pop2.moveTo((screen.width-w)/2,(screen.height-h)/2); pop2.document.writeln(contents); pop.close(); } } </script> //第二步:把如下代码加入<body></body>区域中 <a href=#none onclick=noBorderWin('rate.htm','400','240','#000000','#333333','#CCCCCC','一个无边视窗的测试例子','yes');>open〈/a〉 让新窗口总在一个窗口弹出 新开一个的窗口（name=screen） 再在这个窗口内打开链接（target=screen） 网页内容顶格 CODE: [Copy to clipboard] <BODY leftMargin=0 topMargin=0 marginwidth="0" marginheight="0" > 横向不间断滚动广告 CODE: [Copy to clipboard] <script language="Javascript"> imgArr=new Array() imgArr[0]="<a href=# onmouseMove='Javascript:outHover=true' onMouseover='Javascript:outHover=true' onMouseout='Javascript:outHover=false;mvStart()'><img src=http://image0.sina.com.cn/images/bizsite/promote/l/lisababy6617.gif border=0></a>" imgArr[1]="<a href=# onmouseMove='Javascript:outHover=true' onMouseover='Javascript:outHover=true' onMouseout='Javascript:outHover=false;mvStart()'><img src=http://image0.sina.com.cn/images/bizsite/promote/t/testool4434.gif border=0></a>" imgArr[2]="<a href=# onmouseMove='Javascript:outHover=true' onMouseover='Javascript:outHover=true' onMouseout='Javascript:outHover=false;mvStart()'><img src=http://image0.sina.com.cn/images/bizsite/promote/s/sxyuda6549.gif border=0></a>" imgArr[3]="<a href=# onmouseMove='Javascript:outHover=true' onMouseover='Javascript:outHover=true' onMouseout='Javascript:outHover=false;mvStart()'><img src=http://image0.sina.com.cn/images/bizsite/promote/q/qeji4041.gif border=0></a>" imgArr[4]="<a href=# onmouseMove='Javascript:outHover=true' onMouseover='Javascript:outHover=true' onMouseout='Javascript:outHover=false;mvStart()'><img src=http://image0.sina.com.cn/images/bizsite/promote/i/ieasytraining3984.gif border=0></a>" imgArr[5]="<a href=# onmouseMove='Javascript:outHover=true' onMouseover='Javascript:outHover=true' onMouseout='Javascript:outHover=false;mvStart()'><img src=http://image0.sina.com.cn/images/bizsite/promote/t/trainings1442.gif border=0></a>" imgArr[6]="<a href=# onmouseMove='Javascript:outHover=true' onMouseover='Javascript:outHover=true' onMouseout='Javascript:outHover=false;mvStart()'><img src=http://image0.sina.com.cn/images/bizsite/promote/r/renhebj002indexasp2486.gif border=0></a>" imgArr[7]="<a href=# onmouseMove='Javascript:outHover=true' onMouseover='Javascript:outHover=true' onMouseout='Javascript:outHover=false;mvStart()'><img src=http://image0.sina.com.cn/images/bizsite/promote/e/efeedlink6085.gif border=0></a>" imgArr[8]="<a href=# onmouseMove='Javascript:outHover=true' onMouseover='Javascript:outHover=true' onMouseout='Javascript:outHover=false;mvStart()'><img src=http://image0.sina.com.cn/images/bizsite/promote/k/kaixingou5811.gif border=0></a>" imgArr[9]="<a href=# onmouseMove='Javascript:outHover=true' onMouseover='Javascript:outHover=true' onMouseout='Javascript:outHover=false;mvStart()'><img src=http://image0.sina.com.cn/images/bizsite/promote/h/9happyindex8htm5912.gif border=0></a>" imgArr[10]="<a href=# onmouseMove='Javascript:outHover=true' onMouseover='Javascript:outHover=true' onMouseout='Javascript:outHover=false;mvStart()'><img src=http://image0.sina.com.cn/images/bizsite/promote/c/chinaroom6034.gif border=0></a>" var moveStep=4 //步长，单位：pixel var moveRelax=100 //移动时间间隔，单位：ms ns4=(document.layers)?true:false var displayImgAmount=4 //视区窗口可显示个数 var divWidth=125 //每块图片占位宽 var divHeight=60 //每块图片占位高 疯狂代码 var startDnum=0 var nextDnum=startDnum+displayImgAmount var timeID var outHover=false var startDivClipLeft var nextDivClipRight function initDivPlace(){ if (ns4){ for (i=0;i<displayImgAmount;i++){ eval("document.divOuter.document.divAds"+i+".left="+divWidth*i) } for (i=displayImgAmount;i<imgArr.length;i++){ eval("document.divOuter.document.divAds"+i+".left="+divWidth*displayImgAmount) } }else{ for (i=0;i<displayImgAmount;i++){ eval("document.all.divAds"+i+".style.left="+divWidth*i) } for (i=displayImgAmount;i<imgArr.length;i++){ eval("document.all.divAds"+i+".style.left="+divWidth*displayImgAmount) } } } function mvStart(){ timeID=setTimeout(moveLeftDiv,moveRelax) } function mvStop(){ clearTimeout(timeID) } function moveLeftDiv(){ if (ns4){ for (i=0;i<=displayImgAmount;i++){ eval("document.divOuter.document.divAds"+parseInt((startDnum+i)%imgArr.length)+".left=document.divOuter.document.divAds"+parseInt((startDnum+i)%imgArr.length)+".left-moveStep") } startDivClipLeft=parseInt(eval("document.divOuter.document.divAds"+startDnum+".clip.left")) nextDivClipRight=parseInt(eval("document.divOuter.document.divAds"+nextDnum+".clip.right")) if (startDivClipLeft+moveStep>divWidth){ eval("document.divOuter.document.divAds"+nextDnum+".clip.right="+divWidth) eval("document.divOuter.document.divAds"+startDnum+".left="+divWidth*displayImgAmount) eval("document.divOuter.document.divAds"+parseInt((nextDnum+1)%imgArr.length)+".left=document.divOuter.document.divAds"+nextDnum+".left+"+divWidth) eval("document.divOuter.document.divAds"+parseInt((nextDnum+1)%imgArr.length)+".clip.left=0") startDnum=(++startDnum)%imgArr.length nextDnum=(startDnum+displayImgAmount)%imgArr.length startDivClipLeft=moveStep-(divWidth-startDivClipLeft) nextDivClipRight=moveStep-(divWidth-nextDivClipRight) }else{ eval("document.divOuter.document.divAds"+nextDnum+".clip.left=0") startDivClipLeft+=moveStep nextDivClipRight+=moveStep } eval("document.divOuter.document.divAds"+startDnum+".clip.left="+startDivClipLeft) eval("document.divOuter.document.divAds"+nextDnum+".clip.right="+nextDivClipRight) }else{ for (i=0;i<=displayImgAmount;i++){ eval("document.all.divAds"+parseInt((startDnum+i)%imgArr.length)+".style.left=document.all.divAds"+parseInt((startDnum+i)%imgArr.length)+".style.pixelLeft-moveStep") } startDivClipLeft=parseInt(eval("document.all.divAds"+startDnum+".currentstyle.clipLeft")) nextDivClipRight=parseInt(eval("document.all.divAds"+nextDnum+".currentstyle.clipRight")) if (startDivClipLeft+moveStep>divWidth){ eval("document.all.divAds"+nextDnum+".style.clip='rect(0,"+divWidth+","+divHeight+",0"+")'") eval("document.all.divAds"+startDnum+".style.left="+divWidth*displayImgAmount) eval("document.all.divAds"+parseInt((nextDnum+1)%imgArr.length)+".style.left=document.all.divAds"+nextDnum+".style.pixelLeft+"+divWidth) startDnum=(++startDnum)%imgArr.length nextDnum=(startDnum+displayImgAmount)%imgArr.length startDivClipLeft=moveStep-(divWidth-startDivClipLeft) nextDivClipRight=moveStep-(divWidth-nextDivClipRight) }else{ startDivClipLeft+=moveStep nextDivClipRight+=moveStep } eval("document.all.divAds"+startDnum+".style.clip='rect(0,"+divWidth+","+divHeight+","+startDivClipLeft+")'") eval("document.all.divAds"+nextDnum+".style.clip='rect(0,"+nextDivClipRight+","+divHeight+",0)'") } if (outHover){ mvStop() }else{ mvStart() } } function writeDivs(){ if (ns4){ document.write("<ilayer name=divOuter width=750 height="+divHeight+">") for (i=0;i<imgArr.length;i++){ document.write("<layer name=divAds"+i+">") document.write(imgArr[i]+" ") document.write("</layer>") } document.write("</ilayer>") document.close() for (i=displayImgAmount;i<imgArr.length;i++){ eval("document.divOuter.document.divAds"+i+".clip.right=0") } }else{ document.write("<div id=divOuter style='position:relative' width=750 height="+divHeight+">") for (i=0;i<imgArr.length;i++){ document.write("<div id=divAds"+i+" style='position:absolute;clip:rect(0,"+divWidth+","+divHeight+",0)'>") document.write(imgArr[i]+" ") document.write("</div>") } document.write("</div>") for (i=displayImgAmount;i<imgArr.length;i++){ eval("document.all.divAds"+i+".style.clip='rect(0,0,"+divHeight+",0)'") } } } </script> <BODY onload=Javascript:mvStart()> <SCRIPT language=Javascript>writeDivs();initDivPlace();</SCRIPT> 电击图片弹出无边自定义窗口 CODE: [Copy to clipboard] <a href="#"><img src="image/tx.gif" alt="傲博知识库" width="16" height="16" hspace=10 border=0 onClick="MM_openBrWindow('tx.htm','tx','status=yes,scrollbars=yes,width=280,height=45')"></a> 无边框对话框窗口可以在myie中弹出 CODE: [Copy to clipboard] <script Language="Javascript"> function 页面名称(WINwidth, WINheight) { showx = event.screenX - event.offsetX - 4 - WINwidth ; // + deltaX; showy = event.screenY - event.offsetY + 18; // + deltaY; newWINwidth = WINwidth + 4 + 18; var features = 'dialogWidth:' + newWINwidth + 'px;' + 'dialogHeight:' + WINheight + 'px;' + 'dialogLeft:' + showx + 'px;' + 'dialogTop:' + showy + 'px;' + 'directories:no; localtion:no; menubar:no; status=no; toolbar=no;scrollbars:no;Resizeable=no'; var endtarget = "弹出页面.htm"; // window.open(endtarget, '', ''); window.showModalDialog(endtarget, " ", features); } </script> CODE: [Copy to clipboard] <input name="image" type=image onClick="页面名称(230, 35);return false;" src="代替按扭的图片.gif" alt="鼠标经过显示的文字" width="16" height="16" > Java代码容错 CODE: [Copy to clipboard] <SCRIPT LANGUAGE="Javascript"> <!-- Hide function killErrors() { return true; } window.onerror = killErrors; // --> </SCRIPT> Flash透明 CODE: [Copy to clipboard] <PARAM NAME="wmode" value="transparent"> 0
相关文章读者评论发表评论 |
 |
专注于互联网--专注于架构 |
最新标签 网站地图 文章索引 Rss订阅 |
