常用js效果(三)
2008-11-20 20:47 key_sky 阅读(469) 评论(0) 编辑 收藏 举报
大部分js摘录自梦想照进现实-鹏的Js整理
1.漂浮的图片 遇到边界反弹
Code<SCRIPT language=JavaScript>var brOK=false;
var mie=false;
var aver=parseInt(navigator.appVersion.substring(0,1));
var aname=navigator.appName;
function checkbrOK()
{if(aname.indexOf("Internet Explorer")!=-1)
{if(aver>=4) brOK=navigator.javaEnabled();
mie=true;
}
if(aname.indexOf("Netscape")!=-1)
{if(aver>=4) brOK=navigator.javaEnabled();}
}
var vmin=2;
var vmax=5;
var vr=2;
var timer1;
function Chip(chipname,width,height)
{this.named=chipname;
this.vx=vmin+vmax*Math.random();
this.vy=vmin+vmax*Math.random();
this.w=width;
this.h=height;
this.xx=0;
this.yy=0;
this.timer1=null;
}
function movechip(chipname)
{
if(brOK)
{eval("chip="+chipname);
if(!mie)
{pageX=window.pageXOffset;
pageW=window.innerWidth;
pageY=window.pageYOffset;
pageH=window.innerHeight;
}
else
{pageX=window.document.body.scrollLeft;
pageW=window.document.body.offsetWidth-8;
pageY=window.document.body.scrollTop;
pageH=window.document.body.offsetHeight;
}
chip.xx=chip.xx+chip.vx;
chip.yy=chip.yy+chip.vy;
chip.vx+=vr*(Math.random()-0.5);
chip.vy+=vr*(Math.random()-0.5);
if(chip.vx>(vmax+vmin)) chip.vx=(vmax+vmin)*2-chip.vx;
if(chip.vx<(-vmax-vmin)) chip.vx=(-vmax-vmin)*2-chip.vx;
if(chip.vy>(vmax+vmin)) chip.vy=(vmax+vmin)*2-chip.vy;
if(chip.vy<(-vmax-vmin)) chip.vy=(-vmax-vmin)*2-chip.vy;
if(chip.xx<=pageX)
{chip.xx=pageX;
chip.vx=vmin+vmax*Math.random();
}
if(chip.xx>=pageX+pageW-chip.w)
{chip.xx=pageX+pageW-chip.w;
chip.vx=-vmin-vmax*Math.random();
}
if(chip.yy<=pageY)
{chip.yy=pageY;
chip.vy=vmin+vmax*Math.random();
}
if(chip.yy>=pageY+pageH-chip.h)
{chip.yy=pageY+pageH-chip.h;
chip.vy=-vmin-vmax*Math.random();
}
if(!mie)
{eval('document.'+chip.named+'.top ='+chip.yy);
eval('document.'+chip.named+'.left='+chip.xx);
}
else
{eval('document.all.'+chip.named+'.style.pixelLeft='+chip.xx);
eval('document.all.'+chip.named+'.style.pixelTop ='+chip.yy);
}
chip.timer1=setTimeout("movechip('"+chip.named+"')",100);
}
}
function stopme(chipname)
{if(brOK)
{//alert(chipname)
eval("chip="+chipname);
if(chip.timer1!=null)
{clearTimeout(chip.timer1)}
}
} </SCRIPT>
<SCRIPT>
var mm;
function mm()
{checkbrOK();
mm=new Chip("mm",60,80);
if(brOK)
{ movechip("mm");
}
}
</SCRIPT>
</head>
<body onload=mm()>
<p> <DIV id=mm style="POSITION: absolute">
<a title="想要更多的特效吗？请点击~" href="http://www.xuemu.net/js.asp">
<img border="0" src="http://chenzujian.ik8.com/img/ad1.gif" width="100" height="100"></a></p>
2.数字选中放大
3.文本编辑器
Code<head>
<script>
var edit; //当前选择的文本编辑区域对象
var RangeType; //对象类别
function start() {
Editor.document.designMode="ON";
Editor.document.open();
Editor.document.write(ikj.value);
Editor.document.close();
fnInit()}
function setFocus() {
Editor.focus();
}
function selectRange(){
edit = Editor.document.selection.createRange();
RangeType = Editor.document.selection.type;
}
function execCommand(command,para) {
setFocus();
selectRange();
if (para=="")
edit.execCommand(command)
else
edit.execCommand(command, false, arguments[1]);
Editor.focus();
if (RangeType != "Control") edit.select();
}
function doSelectC(str,el) {
var Index = el.selectedIndex;
if (Index != 0)
{ el.selectedIndex = 0;
execCommand(str,el.options[Index].text);
}
}
function doSelectCl(str,el) {
var Index = el.selectedIndex;
if (Index != 0)
{ el.selectedIndex = 0;
execCommand(str,"<"+el.options[Index].value+">");
}
}
function fnInit(){
for (i=0; i<document.all.length; i++)
document.all(i).unselectable = "off";
getSystemFonts();
}
function getSystemFonts()
{
var a=dlgHelper.fonts.count;
var fArray = new Array();
var oOption = document.createElement("OPTION");
oOption.text = "字体";
oOption.value = "0";
selectFontName.add(oOption);
for (i = 1;i < dlgHelper.fonts.count;i++)
{
fArray[i] = dlgHelper.fonts(i);
var oOption = document.createElement("OPTION");
oOption.text = fArray[i];
oOption.Value = i;
selectFontName.add(oOption);
}
}
//////////////// 以下代码才是本文的重点，其他部分的代码只是为了满足运行的需要 /////////////////////
/*
****************************************
Created by Bound0 (bound0@tom.com)
http://bbs.blueidea.com/viewthread.php?tid=2661868
转载或应用时请保留此声明！
****************************************
*/
//格式化，保全script、textarea、xmp、pre和style内容
function formatfor(va) {
var t=va.replace(/\r/g,'');
t = t.replace(/(<(script|textarea|xmp|pre|style).*?>)([^\r]*?)(<\/\2>)/img,
function (){return arguments[1]+arguments[3].replace(/\n/g, "\r")+arguments[4]})
t = t.replace(/\n/g, "");
return t
}
function fontsize(el)
{var Index=el.selectedIndex
var addpre="<font size="+el.options[Index].value+">"
if(Index>7)addpre="<font style='font-size:"+el.options[Index].value+"pt'>"
var oSel = Editor.document.selection.createRange()
var sBookmark = oSel.getBookmark()
var oSelhtml=oSel.htmlText
if(oSelhtml!="")
{
//定位选中内容
var conts=oSelhtml
var textLength = Editor.document.body.innerText.length
oSel.moveStart("character", -1*textLength)
var contp=formatfor(oSel.htmlText)
var conta=formatfor(Editor.document.body.innerHTML)
var contpa=''
var partC=""
var partB=""
var partA=""
var m=0
m=conta.indexOf(contp.substr(0,3))
var f=contp.length
for(;f>0;f--)
{if(conta.substr(m,f)==contp.substr(0, f)){contpa=contp.substr(0,f);partC=conta.substr(m+f);break}}
var ko=contp.substr(f)
var kol=ko.length
var ty=conta.substr(m+f,kol)
var hu=""
for(var b=1;b<kol;b++)if(ko.substr(b)==ty.substr(0,kol-b)){hu=ko.substr(b);contpa+=hu;partC=partC.substr(kol-b);break}
var k=contpa.length
cont=conts.replace(/\n/g, "")
var u=cont.length
if(cont==contpa.substr(k-u)){partB=cont;partA=contpa.substr(0,k-u)}else{
for(u=cont.length;u>0;u--)
{if(cont.lastIndexOf(contpa.substr(k-u))!=-1){partB0=contpa.substr(k-u);partA0=contpa.substr(0,k-u);break}}
contt=formatfor(conts)
if(hu!="")if(contt.substr(contt.length-kol)==ko)contt=contt.substr(0,contt.length-kol)+hu
u=contt.length
var youm=contpa.lastIndexOf(contt)
if(youm!=-1){partB=contt;partA=contpa.substr(0,youm);partC=contpa.substr(youm+u)+partC}else{
for(;u>0;u--){if(contt.lastIndexOf(contpa.substr(k-u))!=-1){partB1=contpa.substr(k-u);partA1=contpa.substr(0,k-u);break}}
if(partB1.length>partB0.length){partB=partB1;partA=partA1}else{partB=partB0;partA=partA0}
}
}
if(partB.substr(partB.length-1)=="<"){partB=partB.substr(0,partB.length-1);partC="<"+partC}
if(partB.substr(partB.length-2)=="</"){partB=partB.substr(0,partB.length-2);partC="</"+partC}
//保护textarea、xmp、script和style的内容不被改变
var cook=[]
partA=partA.replace(/(<(script|textarea|xmp|style).*?>)[\s\S]*?<\/\2>/ig,
function (){co=cook.length
cook[co]=arguments[0];return "<cook"+co+">"})
var ook=""
partA=partA.replace(/(<(script|textarea|xmp|style).*?>)[\s\S]*?$/i,
function (){co=cook.length
ook=arguments[2]
cook[co]=arguments[0];return "<cook"+co+">"})
if(ook!=""){fd="(^[\\s\\S]*?<\/"+ook+">)"
jk=new RegExp(fd,["i"])
if(jk.test(partB)){jk.exec(partB)
co=cook.length
cook[co]=RegExp.$1
partB=partB.replace(jk,"<cook"+co+">")}}
partB=partB.replace(/(<(script|textarea|xmp|style).*?>)[\s\S]*?<\/\2>/ig,
function (){co=cook.length
cook[co]=arguments[0];return "<cook"+co+">"})
ook=""
partB=partB.replace(/(<(script|textarea|xmp|style).*?>)[\s\S]*?$/i,
function (){co=cook.length
ook=arguments[2]
cook[co]=arguments[0];return "<cook"+co+">"})
if(ook!=""){fd="(^[\\s\\S]*?<\/"+ook+">)"
jk=new RegExp(fd,["i"])
if(jk.test(partC)){jk.exec(partC)
co=cook.length
cook[co]=RegExp.$1
partC=partC.replace(jk,"<cook"+co+">")}}
partC=partC.replace(/(<(script|textarea|xmp|style).*?>)[\s\S]*?<\/\2>/ig,
function (){co=cook.length
cook[co]=arguments[0];return "<cook"+co+">"})
//处理<font>
var dol=[]
var dos=[]
var lon=[]
fd="<FONT([^>]*?)>"
jk=new RegExp(fd,["im"])
while(jk.test(partB)){ce=dol.length
jk.exec(partB)
dol[ce]=RegExp.$1
partB=partB.replace(jk,"<site"+ce+">")
}
ce=dol.length-1
for(;ce>-1;ce--)
{kjc="<site"+ce+">"
fd=kjc+'(.*?)<\/font>'
jk=new RegExp(fd,["im"])
if(jk.test(partB)){dos[dos.length]=ce
jk.exec(partB)
ko3=kjc+RegExp.$1+"</site"+ce+">"
partB=partB.replace(jk,ko3)
}else{lon[lon.length]=ce}
}
partB=partB.replace(/<\/font>/img,"<lonf>")
for(var c=dos.length-1;c>-1;c--)
{
uts=dol[dos[c]]
if(""==(uts.replace(/size=[0-7+]+/i,"").replace(/style=("|')FONT-SIZE: [0-9.]+.*;*("|')/im,"").replace(/[\s\n\r]+/mg,""))){partB=partB.replace("<site"+dos[c]+">","")
partB=partB.replace("</site"+dos[c]+">","")}else{partB=partB.replace("<site"+dos[c]+">","<font"+uts.replace(/ size=[0-7+]+/im,"").replace(/FONT-SIZE: [0-9.]+pt/im,"").replace(/ style=("|');*("|')/im,"")+">")
partB=partB.replace("</site"+dos[c]+">","</font>")}
}
//处理其他标签
var addend=""
var mio=[]
partB=partB.replace(/<([^<> ]*?) [^<>]*?style=[^<>]*?FONT-SIZE: [0-9.]+[^<>]*?>/img,
function (){notv="|select|input|option|object|"
if(notv.indexOf("|"+arguments[1].toLowerCase()+"|")==-1){
op=mio.length
mio[op]=arguments[0]
return "<opis"+op+">"}else{return arguments[0]}})
kba=["h1","h2","h3","h4","h5","h6","pre","button","listing","big","small","tt","code","kbd","samp","td","\/td","caption","\/caption","th","\/th","tr","\/tr","table","\/table","thead","\/thead","tbody","\/tbody","tfoot","\/tfoot"]
for(b in kba){
fd="<("+kba[b]+")[^<>]*?>"
jk=new RegExp(fd,["img"])
partB=partB.replace(jk,
function (){op=mio.length
mio[op]=arguments[0]
return "<opis"+op+">"})
}
//收尾工作
liming=[]
partB=partB.replace(/<(opis|site|lonf)([0-9]*)>/g,
function(){var op=liming.length
if(arguments[1]=="opis"){liming[op]=mio[parseInt(arguments[2])]}
if(arguments[1]=="site"){liming[op]="<font"+dol[parseInt(arguments[2])]+">"}
if(arguments[1]=="lonf"){liming[op]="</font>"}
return "<duan"+op+">"
})
if(liming.length>0){
partB=partB.replace(/^(.+?)(<duan0>)/m,function(){if(""!=arguments[1]){return addpre+arguments[1]+"</font>"+arguments[2]}
else{return arguments[0]}})
var op=liming.length-1
for(var kc=0;kc<op;kc++){
fd="(<duan"+kc+">)(.+?)(<duan"+(kc+1)+">)"
jk=new RegExp(fd,["m"])
partB=partB.replace(jk,
function(){if(""!=arguments[2]){return arguments[1]+addpre+arguments[2]+"</font>"+arguments[3]}
else{return arguments[0]}})}
fd="(<duan"+op+">)(.+?)$"
jk=new RegExp(fd,["m"])
partB=partB.replace(jk,function(){if(""!=arguments[2]){return arguments[1]+addpre+arguments[2]+"</font>"}
else{return arguments[0]}})
}
else{partB=addpre+partB+"</font>"
}
partB=partB.replace(/<duan([0-9]+)>/g,function(){return liming[parseInt(arguments[1])]})
var endtemp=partA+partB+partC
for(vof in cook)endtemp=endtemp.replace("<cook"+vof+">",cook[vof])
Editor.document.body.innerHTML=endtemp
var vrvd=Editor.document.selection.createRange()
vrvd.moveToBookmark(sBookmark)
vrvd.select()
}
else{
Editor.document.selection.createRange().pasteHTML(addpre+"</font>")
}Editor.focus()
el.blur()
el.selectedIndex=0}
</script>
</head>
<body SCROLL="no" bgcolor=d0d0c8 onload="start()" leftmargin=5 topmargin=5>
<OBJECT id=dlgHelper CLASSID="clsid:3050f819-98b5-11cf-bb82-00aa00bdce0b" width="0px" height="0px"></OBJECT>
<select id="select1" style="height: 18" onchange="doSelectCl('FormatBlock',this);this.returnValue=false;" name="select1" size="1">
<option selected value="">段落样式</option>
<option value="P">普通
<option value="H1">标题一
<option value="H2">标题二
<option value="H3">标题三
<option value="H4">标题四
<option value="H5">标题五
<option value="H6">标题六
<option value="p">段落
<option value="dd">定义
<option value="dt">术语定义
<option value="dir">目录列表
<option value="menu">菜单列表
<option value="PRE">已编排格式
</select>
<select style="height: 18"
onchange="doSelectC('FontName',this,'font face="'+this.value+'"')"
name="selectFontName"></select></td>
<select style="width: 60; height: 18" onchange="fontsize(this)" name="selectFontSize" size="1">
<option selected>字号</option>
<option value="7">一号
<option value="6">二号
<option value="5">三号
<option value="4">四号
<option value="3">五号
<option value="2">六号
<option value="1">七号
<option value=1>1 pt
<option value=2>2 pt
<option value=3>3 pt
<option value=4>4 pt
<option value=5>5 pt
<option value=6>6 pt
<option value=7>7 pt
<OPTION value=8>8 pt
<OPTION value=9>9 pt
<OPTION value=10>10 pt
<OPTION value=11>11 pt
<OPTION value=12>12 pt
<OPTION value=13>13 pt
<OPTION value=14>14 pt
<OPTION value=15>15 pt
<OPTION value=16>16 pt
<OPTION value=17>17 pt
<OPTION value=18>18 pt
<OPTION value=19>19 pt
<OPTION value=20>20 pt
<OPTION value=21>21 pt
<OPTION value=22>22 pt
<OPTION value=23>23 pt
<OPTION value=25>25 pt
<OPTION value=28>28 pt
<OPTION value=30>30 pt
<OPTION value=35>35 pt
<OPTION value=40>40 pt
<OPTION value=45>45 pt
<OPTION value=50>50 pt
<OPTION value=60>60 pt
<OPTION value=70>70 pt
<OPTION value=85>85 pt
<OPTION value=100>100 pt
<OPTION value=120>120 pt
<OPTION value=150>150 pt
<option value=200>200 pt
<option value=250>250 pt
<option value=300>300 pt
<option value=500>500 pt
<option value=900>900 pt
<option value=2000>2000 pt</select>
<P>
<IFRAME id="Editor" Name="Editor" style="WIDTH: 100%; HEIGHT: 95%"></IFRAME><textarea name=ikj style="display:none"><P><FONT style="FONT-SIZE: 15pt"><STRONG>Bound0 子确工作室</FONT> 生物信息相关业务简介</STRONG></P><TABLE cellSpacing=0 cellPadding=0 width="100%" border=0><TBODY><TR><TD><H2><FONT color=#ff0000>[多步生物信息查询的一步化]</FONT></H2><P>将繁琐的多步生物信息查询<font style='font-size:13pt'>合并为一步</font>，减少在各个网页间的手工跳转。<P>只要能够理清多步生物信息查询的流程就可能做到一步化。<BR><BR><H2><FONT color=#ff0000>[批量数据转录、整合]</FONT></H2><P>将大量零散的文档收录到数据库中或整理、转化为符合要求的格式。<P>例如：将数百个结构复杂的word文档内容收录到数据库中。</P></TD><TD><CENTER>
<SCRIPT type=text/javascript>
<!--
google_ad_client = "pub-2435639364513187";
google_ad_width = 200;
google_ad_height = 90;
google_ad_format = "200x90_0ads_al_s";
google_ad_channel ="";
google_color_border = "2BA94F";
google_color_bg = "80FF00";
google_color_link = "002E3F";
google_color_text = "000000";
google_color_url = "008000";
//-->
</SCRIPT>
<SCRIPT src="http://pagead2.googlesyndication.com/pagead/show_ads.js" type=text/javascript></SCRIPT>
<SCRIPT type=text/javascript>
<!--
google_ad_client = "pub-2435639364513187";
google_ad_width = 180;
google_ad_height = 60;
google_ad_format = "180x60_as_rimg";
google_cpa_choice = "CAAQyLDUlAIaCPMwSam7wGerKMD29IMB";
google_ad_channel = "";
//-->
</SCRIPT>
<SCRIPT src="http://pagead2.googlesyndication.com/pagead/show_ads.js" type=text/javascript></SCRIPT>
</CENTER></TD></TR></TBODY></TABLE><H2><FONT color=#ff0000>[定制Bound0 Eureka预选器数据库]</FONT></H2><P>利用Bound0 Eureka预选器数据库可以初步判断样品的成分，缩小进一步实验的处理范围，对接下来的实验环节做出调整，或预选出最佳的实验方案，从而缩短研究、开发的周期，节省人力物力。还可以初步验证某些假设推断，并有助于提出新的假设推断，构建新的假说。同时让交流和教学过程变得更简单、方便。<P>有关Bound0 Eureka预选器数据库核心技术的专利申请已被受理，专利申请号：200610077985.3。<P>定制Bound0 Eureka预选器数据库（Bound0 Eureka Preselector）的业务实质：<P>1、定制公共数据库内容的本地化整合。<BR>2、定制数据库查询方式和查询项目。<BR>3、定制分析、统计功能。<BR>4、定制数据共享功能。<BR>5、定制教学展示功能。<BR>6、定制其他辅助功能。<P>例如：Bound0酵母蛋白Eureka预选器数据库的数据内容整合了SGD数据库（Saccharomyces Genome Database，酵母基因组库<A href="http://www.yeastgenome.org/">http://www.yeastgenome.org/</A>）中的部分数据。共包含6713个蛋白的信息。<BR>Bound0酵母蛋白Eureka预选器数据库具有以下基本功能：<BR>（1）Eureka Preselector(主功能): 根据条件给出符合条件的蛋白质列表。根据蛋白质的特征与目标特征的接近程度对列表内的蛋白质进行排名。以网页形式输出、保存 Eureka 结果。对保存的结果进行对比分析。<BR>（2）以树状结构显示（treeview）蛋白质的各种生物学信息。<BR>（3）以搜索引擎形式，对描述蛋白质充当的细胞组分、参与的生物过程、分子功能等描述性特征的标准化术语（GO Term）提供注释和指导。<BR>（4）以搜索引擎形式，对蛋白质的各种ID、名称进行通译。<BR>（5）在安装了Bound0酵母蛋白Eureka预选器数据库的计算机上，实现自定义的eureka:// 协议。可以在用户自己的网页中以超级链接（文字链接、图片热点链接等）的方式动态地调用数据库中的内容进行演示。<BR>（6）自动生成上述演示所需要的链接代码。<BR>（7）独立发行（便于数据共享）的数据分析配件，可对以网页形式保存的 Eureka 结果进行处理。 </P><P><TABLE cellSpacing=0 cellPadding=0 width="100%" border=0><TBODY><TR><TD><H2><FONT color=#ff0000>[定制实验人员绩效考核系统]</FONT></H2><P>将团队从落后的纸面管理中解放出来。</P></TD><TD> </TD></TR></TBODY></TABLE></P><P><FONT style="BACKGROUND-COLOR: #ff0000" color=#ffffff><STRONG>以上业务更多详情请质询</STRONG></FONT><A href="mailto:bound0@tom.com"><FONT style="BACKGROUND-COLOR: #ff0000" color=#ffffff><STRONG>bound0@tom.com</STRONG></FONT></A></P></textarea></body>
4.透明的Div提示
Code<BODY>
<script language="JavaScript">
if ( had_tips != 1 ) {
var _ua = document.all ? ((navigator.userAgent.indexOf('MSIE 5') > 5) ? "ie5" : "ie4") : "foo";
if (_ua != "foo" ) {
if (typeof(_doc) == "undefined" || _doc == null) _doc = document;
var _tipx = 0;
var _tipy = 0;
var _tipOX = 10;
var _tipOY = 1;
var _tipWidth;
// Opacity=70 提示框背景透明度
_doc.write('<DIV ID="TIP__" STYLE="filter:Alpha(Opacity=70,style=1,Finishopacity=80);position:absolute;display:none;z-index:100"></DIV>');
_doc.onmousemove = tsai;
var _tip = _doc.all['TIP__'];
}
}
var had_tips = 1;
function tsaiannie (sMsg, sTitle, iWidth, iHeight, iBorder, sTFC, sTBC, sMFC, sMBC) {
_tipWidth = 180; // 提示框的寬度
var _tipBorder = 2, // 提示框边框的寬度
_tipTFC = "#FFF8F0",
_tipTBC = "#ff8c00", // 提示框边框的顏色
_tipMFC = "#3F3F38",
_tipMBC = "ffffff"; // 提示框背景的顏色
if (_ua == "foo") return;
_tip.innerHTML = '<TABLE CELLPADDING="'+_tipBorder+'" CELLSPACING="0" WIDTH="'+_tipWidth+'" BORDER="0" BGCOLOR="'+_tipTBC+'"><TR><TD>'
+ ((sTitle != null) ? '<TABLE CELLPADDING="0" CELLSPACING="0" WIDTH="100%" BORDER="0"><TR><TD STYLE="padding-top:2px;padding-bottom:2px;font:8pt Arial,Verdana,Tahoma;color:'+_tipTFC+'">'+sTitle+'</TD></TR></TABLE>' : '')
+ '<TABLE CELLPADDING="2" CELLSPACING="0" WIDTH="100%" BORDER="0" BGCOLOR="'+_tipMBC+'"><TR><TD STYLE="color:'+_tipMFC+';font:normal 8pt Arial,Verdana,Tahoma">'+sMsg+'</TD></TR></TABLE></TD></TR></TABLE>';
annie();
_tip.style.display = "";
}
function tsai() {
if (_ua == "ie4") {
_tipx = event.x;
_tipy = event.y;
} else if (_ua == "ie5") {
_tipx = (event.clientX + _tipOX + _tipWidth <= _doc.body.clientWidth) ?
(event.clientX + _doc.body.scrollLeft + _tipOX) :
(event.clientX + _doc.body.scrollLeft - _tipWidth - 5);
_tipy = event.clientY + _doc.body.scrollTop + _tipOY;
} else {
return;
}
if (_tip.style.display != "none") annie();
}
function annie() {
_tip.style.pixelTop = _tipy;
_tip.style.pixelLeft = _tipx;
}
function tsai900403 () {
_tip.style.display = "none";
}
document.write('<A HREF="http://www.wawaqin.com/" ONMOUSEOVER="tsaiannie(\'看到了<font color=#ff1493>效果</font>了吗？\' )" ONMOUSEOUT="tsai900403()" target="_blank">鼠标移过来看效果</A><DIV></DIV>');
</script>
</BODY>
5.地震效果
Code<script language="JavaScript">
function surfto(form) {
var myindex=form.select1.selectedIndex
if (form.select1.options[myindex].value != null) {
parent.main.location.href=form.select1.options[myindex].value;
} }
</script>//这段JS代码意为当前页面的浏览器地震//
<script language="JavaScript1.2">
function shake(n) {
if (window.top.moveBy) {
for (i = 10; i > 0; i--) {
for (j = n; j > 0; j--) {
window.top.moveBy(0,i);
window.top.moveBy(i,0);
window.top.moveBy(0,-i);
window.top.moveBy(-i,0);
} } }
alert("呀~~地震啦！没~~吓坏吧？^_*"); //这里设定地震后弹出的嬉戏性文字(据需随意)//
}
</script>
<script language="JavaScript">
function moyamoya(htmlfile) {
parent.main.location.href=htmlfile;}
</script>
6.对联广告
Code<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=gb2312" />
<title></title>
</head>
<body leftmargin="0" topmargin="0">
<script type="text/javascript">
window.onerror=function(){return true;};
var delta=0.115
var collection;
function floaters() {
this.items = [];
this.addItem = function(id,x,y,content)
{
document.write('<DIV id='+id+' style="Z-INDEX: 0; POSITION: absolute; width:80px; height:60px;left:'+(typeof(x)=='string'?eval(x):x)+';top:'+(typeof(y)=='string'?eval(y):y)+'">'+content+'</DIV>');
var newItem = {};
newItem.object = document.getElementById(id);
newItem.x = x;
newItem.y = y;
this.items[this.items.length] = newItem;
}
this.play = function()
{
collection = this.items
setInterval('play()',10);
}
}
function play()
{
if(screen.width<=800)
{
for(var i=0;i<collection.length;i++)
{
collection[i].object.style.display = 'none';
}
return;
}
for(var i=0;i<collection.length;i++)
{
var followObj = collection[i].object;
var followObj_x = (typeof(collection[i].x)=='string'?eval(collection[i].x):collection[i].x);
var followObj_y = (typeof(collection[i].y)=='string'?eval(collection[i].y):collection[i].y);
if(followObj.offsetLeft!=(document.body.scrollLeft+followObj_x)) {
var dx=(document.body.scrollLeft+followObj_x-followObj.offsetLeft)*delta;
dx=(dx>0?1:-1)*Math.ceil(Math.abs(dx));
followObj.style.left=followObj.offsetLeft+dx;
}
if(followObj.offsetTop!=(document.body.scrollTop+followObj_y)) {
var dy=(document.body.scrollTop+followObj_y-followObj.offsetTop)*delta;
dy=(dy>0?1:-1)*Math.ceil(Math.abs(dy));
followObj.style.top=followObj.offsetTop+dy;
}
followObj.style.display = '';
}
}
var theFloaters = new floaters();
theFloaters.addItem('followDiv5','document.body.clientWidth-135',0,'</a><br><a href="http://www.mimimama.com/clan.php?clanid=498" target="_blank"><img src="http://2046.mimimama.com/left.jpg" width="100" height="267" border="0" /></a>');
theFloaters.addItem('followDiv6',20,0,'<br><a href="http://www.mimimama.com/clan.php?clanid=498" target="_blank"><img src="http://2046.mimimama.com/right.jpg" width="100" height="267" border="0" /></a>');
theFloaters.play();
</script>
<P>111</P>
<P>222</P>
<P>333</P>
<P>444</P><P>111</P>
<P>222</P>
<P>333</P>
<P>444</P><P>111</P>
<P>222</P>
<P>333</P>
<P>444</P><P>111</P>
<P>222</P>
<P>333</P>
<P>444</P><P>111</P>
<P>222</P>
<P>333</P>
<P>444</P>
</body>
</html>
7.旋转变换文字
Code<SCRIPT language=javascript>
//luxiaoqing
Phrase="欢迎你的光临"
Balises=""
Taille=40;
Midx=100;
Decal=0.5;
Nb=Phrase.length;
y=-10000;
for (x=0;x<Nb;x++){
Balises=Balises + '<DIV Id=L' + x + ' STYLE="width:3;font-family: Courier New;font-weight:bold;position:absolute;top:40;left:50;z-index:0">' + Phrase.charAt(x) + '</DIV>'
}
document.write (Balises);
Time=window.setInterval("Alors()",10);
Alpha=5;
I_Alpha=0.05;
function Alors(){
Alpha=Alpha-I_Alpha;
for (x=0;x<Nb;x++){
Alpha1=Alpha+Decal*x;
Cosine=Math.cos(Alpha1);
Ob=document.all("L"+x);
Ob.style.posLeft=Midx+100*Math.sin(Alpha1)+50;
Ob.style.zIndex=20*Cosine;
Ob.style.fontSize=Taille+25*Cosine;
Ob.style.color="rgb("+ (27+Cosine*80+50) + ","+ (127+Cosine*80+50) + ",0)";
}
}
</SCRIPT>
8.逐个出现的文字
Code<script language=javascript>
var layers =document.layers,style=document.all,both=layers||style,idme=908601;
if(layers){layerRef='document.layers';styleRef ='';}if(style){layerRef='document.all';styleRef =
'.style';}
function writeOnText(obj,str){
if(layers)with(document[obj]){ document.open();document.write(str);document.close();}
if(style)eval(obj+'.innerHTML=str'); }
var dispStr=new Array("这是逐个出现的文字———junly!!");
var overMe=0;
function txtTyper(str,idx,idObj,spObj,clr1,clr2,delay,plysnd){
var tmp0=tmp1= '',skip=100;
if (both && idx<=str.length) {
if (str.charAt(idx)=='<'){ while(str.charAt(idx)!='>') idx++;idx++;}
if (str.charAt(idx)=='&'&&str.charAt(idx+1)!=' '){ while (str.charAt(idx)!= ';')idx++;idx++;}
tmp0 = str.slice(0,idx);
tmp1 = str.charAt(idx++);
if (overMe==0 && plysnd==1){
if (navigator.plugins[0]){
if(navigator.plugins["LiveAudio"][0].type=="audio/basic" && navigator.javaEnabled()){document.embeds
[0].stop();
setTimeout("document.embeds[0].play(false)",100);}
} else if (document.all){
ding.Stop();
setTimeout("ding.Run()",100);}
overMe=1;}else overMe=0;
writeOnText(idObj, "<span class="+spObj+"><font color='"+clr1+"'>"+tmp0+"</font><font color='"+clr2
+"'>"+tmp1+"</font></span>");
setTimeout("txtTyper('"+str+"', "+idx+", '"+idObj+"', '"+spObj+"', '"+clr1+"', '"+clr2+"', "+delay+" ,"+plysnd+")",delay);}}
function init(){txtTyper(dispStr[0], 0, 'ttl0', 'ttl1', 'red', '#99FF33', 300, 0);}
</script>
<DIV class=ttl1 id=ttl0></DIV>
<body bgcolor="#fef4d9" onload=init()>
9.左移代码
Code<div id=demo style="overflow:hidden;width:750;" align=center>
<table border=0 align=center cellpadding=1 cellspacing=1 cellspace=0 >
<tr>
<td valign=top bgcolor=ffffff id=marquePic1>
<table width='100%' border='0' cellspacing='0'><tr><td align=center><a href='#' target=_blank><img src="http://bbs.blueidea.com/logo.gif" width=120 height=80 border=0><br><br>11111111111111</a></td><td align=center><a href='#' target=_blank><img src=http://bbs.blueidea.com/logo.gif width=120 height=80 border=0><br><br>2222222222</a></td><td align=center><a href='#' target=_blank><img src=bbs.blueidea.com/logo.gif width=120 height=80 border=0><br><br>333333333</a></td><td align=center><a href='#' target=_blank><img src="bbs.blueidea.com/logo.gif" width=120 height=80 border=0><br><br>11111111111111</a></td><td align=center><a href='#' target=_blank><img src=http://www.haao.cn/logo.gif width=120 height=80 border=0><br><br>2222222222</a></td><td align=center><a href='#' target=_blank><img src=http://www.haao.cn/logo.gif width=120 height=80 border=0><br><br>333333333</a></td><td align=center><a href='#' target=_blank><img src="http://www.haao.cn/logo.gif" width=120 height=80 border=0><br><br>11111111111111</a></td><td align=center><a href='#' target=_blank><img src=http://www.haao.cn/logo.gif width=120 height=80 border=0><br><br>2222222222</a></td><td align=center><a href='#' target=_blank><img src=http://www.haao.cn/logo.gif width=120 height=80 border=0><br><br>333333333</a></td></tr></table>
</td>
<td id=marquePic2 valign=top></td>
</tr>
</table>
</div>
<script type="text/javascript">
var speed=50
marquePic2.innerHTML=marquePic1.innerHTML
function Marquee(){
if(demo.scrollLeft>=marquePic1.scrollWidth){
demo.scrollLeft=0
}else{
demo.scrollLeft++
}
}
var MyMar=setInterval(Marquee,speed)
demo.onmouseover=function() {clearInterval(MyMar)}
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
</script>
10.闪烁的超链
Code<html>
<head>
<script type="text/javascript">
function blinklink()
{
if (!document.getElementById('blink').style.color)
{
document.getElementById('blink').style.color="red"
}
if (document.getElementById('blink').style.color=="red")
{
document.getElementById('blink').style.color="black"
}
else
{
document.getElementById('blink').style.color="red"
}
timer=setTimeout("blinklink()",100)
}
function stoptimer()
{
clearTimeout(timer)
}
</script>
</head>
<body onload="blinklink()" onunload="stoptimer()">
<a id="blink" href="default.asp">Blinking link</a>
</body>
</html>
11.旋转导航文字圈
Code<body>
<style type="text/css">
BODY
{
background : #efefef;
font : 12px Verdana;
}
A { color : #e70 }
A:hover { text-decoration : none }
.spin
{
position : absolute;
visibility : hidden;
z-index : auto;
}
.spin A
{
font : 12px Verdana;
text-decoration : none;
}
.spin A:hover
{
text-decoration : underline overline;
}
</style>
<script language="JavaScript1.2">
function getPageSize()
{
this.x = document.getElementsByTagName('html').item(0).clientWidth||document.getElementsByTagName('html').item(0).offsetWidth||document.body.offsetWidth||innerWidth
this.y = document.getElementsByTagName('html').item(0).clientHeight||document.getElementsByTagName('html').item(0).offsetHeight||document.body.offsetHeight||innerHeight
this.x2 = parseInt(this.x/2)||0
this.y2 = parseInt(this.y/2)||0
this.sx = document.body.scrollWidth||0
this.sy = document.body.scrollHeight||0
}
var pg
var pi = 3.1415
function spinMenu(cls,rad,eSpd,rSpd,dir,x,y,noCt,runEx)
{
pg = new getPageSize()
this.cls = cls
this.rad = rad
this.eSpd = eSpd
this.rSpd = rSpd
this.dir = dir ? 1 : -1
this.x = x<0 ? pg.x2 : x
this.y = y<0 ? pg.y2 : y
this.runEx = runEx||0
this.noCt = noCt||0
this.r = 0 // radius flux
this.ex = 0 // expand timeout
this.ct = 0 // contract timeout
this.rt = 1 // rotate timeout
this.vis = 0 // visibility
this.rNum = 0 // rotational flux
this.rSpd2 = 0 // rSpd holder
this.exDone = 0 // expand complete?
this.ctDone = 1 // contract complete?
this.toFig = 0
this.atX = 0
this.atY = 0
this.url = 0
this.target = 0
eval(this.obj + "=this")
this.items = new Array()
this.el = document.getElementsByTagName('div')
for(i=0;(this.el.item(i));i++)
{
if(this.el.item(i).className==this.cls)
{
this.el.item(i).onmouseover = new Function(this.obj+'.stop()')
this.el.item(i).onmouseout = new Function(this.obj+'.rotate()')
this.el.item(i).onclick = new Function(this.obj+'.contract()')
this.items[this.items.length] = this.el.item(i)
}
}
delete this.el
for(i=0;(this.items[i]);i++)
{
if(!this.items[i].childNodes.item(0).nodeValue)
{
this.items[i].childNodes.item(0).onmouseover = new Function('status=this.href;return true')
this.items[i].childNodes.item(0).onmouseout = new Function('status=\'\';return true')
this.items[i].childNodes.item(0).onclick = new Function(this.obj+'.setURL(this.href,this.target);return false')
this.items[i].childNodes.item(0).onfocus = new Function('this.blur()')
}
}
return this
}
spinMenu.prototype.init = function()
{
this.hide()
this.place()
this.expand()
}
spinMenu.prototype.rotate = function()
{
if(this.rSpd)
{
this.rNum += pi/(1000/this.rSpd)*this.dir
if(this.exDone)
{
this.place()
clearTimeout(this.rt)
this.rt = setTimeout(this.obj+'.rotate()',20)
}
}
}
spinMenu.prototype.stop = function()
{
clearTimeout(this.rt)
this.rt = 0
}
spinMenu.prototype.expand = function()
{
if(this.exDone!=1)
{
this.ctDone=0
if(!this.vis) this.show()
if(this.runEx) eval(this.runEx)
if(this.ct!=0)
{
clearTimeout(this.ct)
this.ct = 0
}
if(this.r<this.rad)
{
this.r += this.eSpd
if(this.rSpd2==0) this.rSpd2 = this.rSpd
this.rSpd = this.eSpd*3
this.rotate()
this.place()
this.ex = setTimeout(this.obj+'.expand()',10)
}
else
{
this.ex = 0
this.rSpd = this.rSpd2
this.rSpd2 = 0
this.ctDone = 0
this.exDone = 1
this.rotate()
}
}
}
spinMenu.prototype.contract = function()
{
if(this.ctDone!=1&&!this.noCt)
{
this.exDone = 0
if(this.ex!=0)
{
clearTimeout(this.ex)
this.ex = 0
}
if(this.r>0)
{
this.r -= this.eSpd
if(this.rSpd2==0) this.rSpd2 = this.rSpd
this.rSpd = this.eSpd
this.rotate()
this.place()
this.ct = setTimeout(this.obj+'.contract()',10)
}
else
{
this.rSpd = this.rSpd2
this.rSpd2 = 0
this.rNum = 0
this.stop()
this.hide()
this.exDone = 0
this.ctDone = 1
this.goURL()
}
}
else this.goURL()
}
spinMenu.prototype.place = function()
{
for(i=0;(this.items[i]);i++)
{
this.atPt(i)
this.items[i].style.left = this.atX-(this.items[i].offsetWidth/2)+'px'
this.items[i].style.top = this.atY-(this.items[i].offsetHeight/2)+'px'
}
}
spinMenu.prototype.atPt = function(pt)
{
this.toFig = pi/(this.items.length/2)*(pt+this.rNum)
this.atX = parseInt(Math.cos(this.toFig)*this.r+this.x)
this.atY = parseInt(Math.sin(this.toFig)*this.r+this.y)
}
spinMenu.prototype.show = function()
{
for(i=0;(this.items[i]);i++)
{
this.items[i].style.display = 'block'
this.items[i].style.visibility = 'visible'
this.vis = 1
}
}
spinMenu.prototype.hide = function()
{
for(i=0;(this.items[i]);i++)
{
this.items[i].style.visibility = 'hidden'
this.items[i].style.display = 'none'
this.vis = 0
}
}
spinMenu.prototype.changeDir = function()
{
this.dir = this.dir==1 ? -1 : 1
}
spinMenu.prototype.setURL = function(url,target)
{
this.url = url
this.target = target
}
spinMenu.prototype.goURL = function()
{
if(this.url)
{
if(!this.target)
if(document.getElementsByTagName('base').length) this.target = document.getElementsByTagName('base').item(0).target
if(this.target)
{
if(this.target=='_blank') open(this.url)
else if(this.target=='_parent') parent.location = this.url
else if(this.target=='_top') top.location = this.url
else if(this.target.indexOf('_')<0)
{
if(eval('parent.'+this.target)) eval('parent.'+this.target+'.document.location=this.url')
else if(eval('top.'+this.target)) eval('top.'+this.target+'.document.location=this.url')
else open(this.url,this.target)
}
else location = this.url
}
else location = this.url
this.url = 0
}
}
</script>
<script language="JavaScript1.2" type="text/javascript">
function centerIt()
{
pg = new getPageSize()
menu.x = pg.x2-10
menu.y = pg.y2
}
function initSpinMenu()
{
menu = new spinMenu(
'spin', // className
120, // radius
12, // expand/contract speed
3, // rotational speed
1, // direction (cw=1,ccw=0)
-1, // origin x
-1, // origin y
0, // stay expanded?
0 // run before expand
)
menu.init()
}
onload=initSpinMenu
onresize=centerIt
</script>
<base target="newWin">
<div align="right"><a href="javascript:menu.expand()" target="_self">展开</a> | <a href="javascript:menu.contract()" target="_self">隐藏</a> | <a href="javascript:menu.stop()" target="_self">停止</a> | <a href="javascript:menu.rotate()" target="_self">旋转</a> | <a href="javascript:menu.changeDir()" target="_self">改变旋转方向</a></div>
<div class="spin"><a href="http://www.butong.net">网页特效库</a></div>
<div class="spin"><a href="http://www.butong.net/background/index.htm">背景特效</a></div>
<div class="spin"><a href="http://www.butong.net/moban/index.htm">整站模板</a></div>
<div class="spin"><a href="http://www.butong.net/navigation/index.htm">导航特效</a></div>
<div class="spin"><a href="http://www.butong.net/time/index.htm">时间特效</a></div>
<div class="spin"><a href="http://www.butong.net/img/index.htm">图象特效</a></div>
<div class="spin"><a href="http://www.butong.net/text/index.htm">文本特效</a></div> </body>
Code<style type="text/css">
ul#hovershow2{
list-style-type: none;
margin: 50px;
width:200px;
float: left;
display: inline;
clear: both;
}
ul#hovershow2 li{
float: left;
display: inline;
width:20px;
height: 20px;
margin: 2px;
}
ul#hovershow2 li a {
text-decoration: none;
display: block;
width:20px;
height:20px;
border:1px red solid;
background-color: White;
line-height: 20px;
font-size: 12px;
text-align: center;
}
ul#hovershow2 li a:hover{
position: absolute;
width:40px;
height: 40px;
line-height: 40px;
font-size: 32px;
z-index:100;
margin: -10px 0 0 -10px;
}
ul#hovershow2 li:hover + li a{
position: absolute;
width:30px;
height: 30px;
line-height: 30px;
font-size: 24px;
z-index:99;
margin: -5px 0 0 -5px;
}
</style>
</head>
<body>
<ul id="hovershow2">
<li><a href="1#" title="test"><span>1</span></a></li>
<li><a href="2#" title="test"><span>2</span></a></li>
<li><a href="3#" title="test"><span>3</span></a></li>
<li><a href="4#" title="test"><span>4</span></a></li>
<li><a href="5#" title="test"><span>5</span></a></li>
<li><a href="6#" title="test"><span>6</span></a></li>
<li><a href="7#" title="test"><span>7</span></a></li>
</ul>
</body>
