设为首页收藏本站

就爱编程论坛

 找回密码
 注册

人人连接登陆

无需注册,直接登录

用新浪微博连接

一步搞定

QQ登录

只需一步,快速开始

查看: 535|回复: 0
打印 上一主题 下一主题

主页javascript特效19则 [复制链接]

Rank: 9Rank: 9Rank: 9

  • TA的每日心情
    无聊
    2025-5-27 03:37:20
  • 签到天数: 366 天

    [LV.9]以坛为家II

    论坛先锋 学习至圣 荣誉成员 论坛元老 活跃之星 终极领袖

    我玩的应用:

    跳转到指定楼层
    楼主
    发表于 2011-6-24 23:51:17 |只看该作者 |倒序浏览
    1 不让页面嵌套在其他框架结构里
     
    如果你不想让你的页面被嵌套在其他框架结构里,你可以在你的页面相应位置加入下面几行
    代码即可。(此处略去相应位置其它HTML代码)

    < head > < script language="JavaScript" > if(self!=top){top.location=self.locati
    on;} < /script > < /head >


    2 不让页面脱离相应的框架结构
     
    如果你不想让你的页面脱离相应的框架结构,也只要在相应页面中加入下面代码。(此处同
    样略去相应位置其它HTML代码)

    < head > < script language="JavaScript" > if(self==top){self.location.href="url"
    ;} < /script > < /head >

    ---- 这里的url应该设置成你网页中定义相应框架结构的页面地址。


    3 在新的窗口中打开页面
     
    你还可以设置在新的窗口中打开你的页面,而不是用你的页面替换原有页面。

    window.open("url","windowName","windowFeatures")


    4 让网页具备浏览器识别适应功能
     
    让网页具备浏览器识别适应功能

    ---- 随着网络的技术发展,动态网页已被Netscape和Microsoft分别引入应用,但在标准应
    用中有相当大的分歧,往往必须分别为它们俩分别编写不同的HTML页面,同时兼顾不支持动
    态网页的浏览器。用下面的JavaScript可以解决这个问题。

    < script language="JavaScript" > function testBrowser(){ ie=((navigator.appName=
    ="Microsoft. Internet Explorer")&& (parseInt(navigator.appVision) >=4)) ns=((nav
    igator.appName=="Netscape")&& (parseInt(navigator.appVision) >=4)) if(ie){self.l
    ocation.href="index_ie.html";} if(ns){self.location.href="index_ns.html";} } < /
    script > 同时,还必须在该页面的BODY 中还要加入对程序的调用: < body >

    ---- 这个调用在网页被加载时激活,如果浏览器是IE4.0或更高版本,浏览器就加载相应 i
    ndex_ie.html;如果浏览器是Netscape 4.0或更高版本,浏览器就加载相应 index_ns.html
    ;如果两种情况都不满足,浏览器就停留在现在的页面。


    5 对表单进行校验
     
     
    < script language="JavaScript" > function checkForm(){ if (document.userInfo.use
    rName.value==""){ alert(“用户名必须输入:”) return false;} if (document.user
    Info.userEmail.value.indexOf( @ )==-1){ alert("请输入正确的电子邮件地址!”);
    return false;} }< /script > 同时,在表单的提交项中必须加入对该程序的调用: < fo
    rm action="YOUR_CGI" >

    ---- 如果还有更多的调查项目,则可以设置更多更严格的校验条件,使你的表单取得更有效
    更准确的结果。


    6 栏目导航
     
     
    < form name="siteGuide" > < stlect name="siteList" > < optio
    n selected value="#" >请选择栏目< /option > < option value="http://www.ciw.com.c
    n" > 中国计算机报< /option > < option value="http://www.ccw.com.cn > 计算机世界
    < /option > < /select > < /form >

    ---- 这里,我们还可以把JavaScript独立出来作为一个函数进行调用,甚至加以扩展,以实
    现更多的功能。


    7 动态图片广告更换显示
     
     
    < script language="JavaScript" > function loadBanner(){ setTimer=setTimeout("cha
    ngeBanner()",5000); listCode=0; listBanner=new Arrey(2) listBanner[0]=new Imag
    e(400,40) listBanner[0].src="banner_0.gif" listBanner[1]=new Image(400,40) l
    istBanner[1].src="banner_1.gif" } function changeBanner(){ listCode=listCode+1
    if(listCode=="2"){listCode=0} bannerSrc="banner_"+listCode+".gif" document.adBa
    nner.src=bannerSrc setTimer=setTimeout("changeBanner()",5000); } function change
    Link(){ if(listCode==0){adLink="http://www.netease.com} if(listCode==1){adLink=
    "http://www.chinabyte.com} self.location=adLink }< /script > 同时,为了确保效果
    ,建议在网页的 Body中激活相应JavaScript函数。 < body >

    还要在页面相应放置广告图片的地方放置以下代码, < a href="JavaScript:changeLink()
    " > < img src="banner_o.gif" border="0" name="adBanner" width="400" height="40"
    alt="动态广告图片" >< /a >

    ---- 为了适应你的需要,你还可以添加更多的图片项进去,只要调整相应的语句和相应的参
    数,就可以满足你的更高要求了。


    8 鼠标感应动画标签
     
    制作鼠标感应动画标签   <script LANGUAGE="JavaScript">

    j=document.images;

    if (j)

    {

    button00=new Image(); button00.src="image.gif"; button001=new Image(); button001
    .src="image11.gif"; button01=new Image(); button01.src="image2.gif"; button011=n
    ew Image(); button011.src="image21.gif"; button02=new Image(); button02.src="ima
    ge3.gif"; button021=new Image(); button021.src="image31.gif"; }

    function img_act(p) {if (j) {on = eval (p + "1.src"); document<p>.src = on;} }

    function img_inact(p) {if (j) {off = eval (p + ".src"); document<p>.src = off; }
    }

    // --></script>

    以上首先按顺序定义显示图片和覆盖图片的路径名称,共定义了三对随鼠标接触而变化的图片
    ,其中的imageX.gif即为图片的相对路径。

    再将下列代码加入<body>和</body>之间你需要的地方: <table CELLSPACING="0" CELLPAD
    DING="0" WIDTH="1%"> <tr> <td>

    <a href="url1">

    <img src="image1.gif" name="button00" border="0" WIDTH="50" HEIGHT="27"> </a>

    <a href="url2"> <img src="image2.gif" name="button01" border="0" WIDTH="50" HEIGHT="27"> </
    a>

    <a href="hahatest.htm"> <img src="image3.gif" name="button02" border="0" WIDTH="50" HEIGHT=
    "27"> </a>

    </td> </tr> </table>

    注释:  这是在href中插入已经定义好的javascript图象变化,而被变化的是有name="but
    tonxx"的图片,当鼠标上移到图片上是该图片的src就由被定义为buttonxx的src变为被定义
    为buttonxx+1的src。因此产生了变化效果。


    9 按次序在同一位置变换图象
     

    <html> <head> <title>按次序在同一位置变换图象(适用于4.0版本的浏览器)</title> <
    SCRIPT LANGUAGE="JavaScript"> var totalLayersInLoop=3;     //上面这句说明总共
    定义三个图象层,在下面的语句中通过j avascript前后显示不同的层以达到图象变换的效果
    var layerNumShowing=1;     //初始显示第一层

    function init(){     if (navigator.appName == "Netscape") { layerStyleRef="l
    ayer."; layerRef="document.layers"; styleSwitch="";     }else{ layerStyleRef
    ="layer.style."; layerRef="document.all"; styleSwitch=".style"; } }     //以上
    这段使script适合于不同的浏览器解释

    function showPreviousLayer(){ var layerNumToShow=layerNumShowing-1; if (layerNum
    ToShow < 1){layerNumToShow=totalLayersInLoop;} hideLayer(eval( "layer  + layerNu
    mShowing+ " )); showLayer(eval( "layer  + layerNumToShow+ " )); layerNumShowing=
    layerNumToShow; }     //以上这段定义一个function,使图象位置向前一层显示

    function showNextLayer(){ var layerNumToShow=layerNumShowing+1; if (layerNumToSh
    ow > totalLayersInLoop){layerNumToShow=1;} hideLayer(eval( "layer  + layerNumSho
    wing+ " )); showLayer(eval( "layer  + layerNumToShow+ " )); layerNumShowing=laye
    rNumToShow; }     //以上这段定义一个function,使图象位置向后一层显示

    function showLayer(layerName){ eval(layerRef+ <" +layerName+ ">  +styleSwitch+ .
    visibility="visible" ); } //定义显示图层的function

    function hideLayer(layerName){ eval(layerRef+ <" +layerName+ ">  +styleSwitch+ .
    visibility="hidden" ); }     //定义隐藏图层的function

    </SCRIPT> <STYLE TYPE="text/css"> <!-- 定义图层一的位置 --> #layer1 {position: a
    bsolute; z-index: 10; visibility: visible; left: 150px; top: 80px;} <!-- 定义图层
    二的位置 --> #layer2 {position: absolute; z-index: 20; visibility: hidden; left:
    150px; top: 80px;} <!-- 定义图层三的位置 --> #layer3 {position: absolute; z-ind
    ex: 30; visibility: hidden; left: 150px; top: 80px;} <!-- 定义控制层的位置 --> #
    loopControls {position: absolute; z-index: 40; visibility: visible; left: 20px;
    top: 20px;}

    </STYLE>

    </head> <body bgcolor="#000000" link="orange" vlink="tan" text="white">

    <!--置入图层--> <!--layer 1--> <div id="layer1" > <IMG SRC="layer1.jpg" WIDTH=10
    0 HEIGHT=50 BORDER=0><BR> 这是图层一 </div>

    <!--layer 2--> <div id="layer2" > <IMG SRC="layer2.jpg" WIDTH=100 HEIGHT=50 BORD
    ER=0><BR> 这是图层二 </div>

    <!--layer 3--> <div id="layer3" > <IMG SRC="layer3.jpg" WIDTH=100 HEIGHT=50 BORD
    ER=0><BR> 这是图层三 </div>

    <!--置入控制区位置--> <div id="loopControls" > <a href="javascript:showNextLayer
    ()">向后浏览</a> <BR>
    <a href="javascript:showPreviousLayer()">向前浏览</a> <BR> </div>

    </body> </html>


    10 彩虹特效
     

    主持人:Arky:mailto:arky@188.net

    彩虹特效   近来在网上见到一个非常棒的javascrip特效,用来创建彩虹字,其效果完全
    可以和javaapplet媲美,而且解释速度更快,我将源代码附录在下面: <html> <head> <ti
    tle>用javascrip创建的彩虹字</title> <META HTTP-EQUIV="Content-Type" CONTENT="tex
    t/html; CHARSET=gb2312"> <script language="JavaScript"> <!-- Hide the script fro
    m old browsers --

    // Michael P. Scholtis (mpscho@planetx.bloomu.edu) // All rights reserved. Janu
    ary 15, 1996 // You may use this JavaScript example as you see fit, as long as t
    he // information within this comment above is included in your script.

    function MakeArray(n){   this.length=n;   for(var i=1; i<=n; i++) this[i]=i-
    1;   return this }

    hex=new MakeArray(16); hex[11]="A"; hex[12]="B"; hex[13]="C"; hex[14]="D
    "; hex[15]="E"; hex[16]="F";

    function ToHex(x){   var high=x/16; // Changes a int to hex (in the range 0 to
    255)   var s=high+""; //1   s=s.substring(0,2); //2 the combination of these a
    re the same as the trunc function   high=parseInt(s,10); //3   var left=hex[h
    igh+1]; // left part of the hex-value   var low=x-high*16; // calculate the re
    st of the values   s=low+""; //1   s=s.substring(0,2); //2 the combination of
    these are the same as the trunc function   low=parseInt(s,10); //3   var right
    =hex[low+1]; // right part of the hex-value   var string=left+""+right; // ad
    d the high and low together   return string; }

    function rainbow(text){   text=text.substring(3,text.length-4); // gets rid of
    the HTML-comment-tags   color_d1=255; // any value in  begin  0 to 255   mul=c
    olor_d1/text.length;   for(i=0;i<text.length;i++){    color_d1=255*Math.sin(
    i/(text.length/3)); // some other things you can try>> "=255-mul*i" to fade out,
    //"=mul*i" to fade in, or try "255*Math.sin(i/(text.length/3))"    color_h1=
    ToHex(color_d1);    color_d2=mul*i;    color_h2=ToHex(color_d2);    doc
    ument.write("<FONT COLOR= #FF"+color_h1+color_h2+" > //"+text.substring(i,i+1)+
    </FONT> );   } }

    // --End Hiding Here --> </script>

    </head> <body bgcolor="ffffff"> <center>


    <hr width=100%> <SCRIPT LANGUAGE="JavaScript"> <!--   {rainbow("-->用javascrip创
    建的彩虹字<!__");} //--> </SCRIPT> <hr width=100%> </center> </body> </HTML>


    11 声音播放控制
     

    用javascript进行声音播放控制 <html> <head> <title>用javascript进行声音播放控制</
    title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <scr
    ipt language="JavaScript"> <!-- //定义一个声音播放控制的function, 需注意Netscape
    和IE对script的解释各不相同 function MM_controlSound(sndAction,sndObj) {  if (ev
    al(sndObj) != null) {   if (navigator.appName== Netscape )    eval(sndObj+(
    (sndAction== stop )? .stop() : .play(false) ));   else if (eval(sndObj+".FileN
    ame"))     eval(sndObj+((sndAction== stop )? .stop() : .run() ));  } } //-->
    </script> </head>

    <body> <!-- 开始控制声音播放 --> <embed name= MM_controlSound1  src= sound.wav  
    loop=false autostart=false mastersound hidden=true width=0 height=0></embed> <!-
    - 用onMouseOver控制声音播放 --> <a href="#"> 当鼠标移到这儿时会播放声音</a> </body> </html>

     


    12 按时问好
     
    function SayHello(){ var today = new Date(); var hours = today.getHours(); var m
    inutes = today.getMinutes(); var string = "嗨!您好,现在是: "; string =string+hou
    rs+" 点 "+minutes+" 分;"; if(hours==0) alert(string + "已经是午夜零点多了, 哇你
    的精神好好嗳! .^."); if(hours==1) alert(string + "己经是午夜壹点 多啦!还在游荡哪
    ?再不睡,明儿个要钓鱼喽!"); if(hours==2) alert(string + "己经是午夜贰点 多了,在找
    什么东东吗?要不要帮忙?"); if(hours==3) alert(string + "己经是午夜叁点 多了喔!还没
    睡?真是现代网络夜猫子!^_^"); if(hours==4) alert(string + "己经是午夜肆点 多了,真
    不困哪?佩服!佩服!"); if(hours==5) alert(string + "这么早起床? 还是彻夜未眠呀?");
    if(hours==6) alert(string + "早晨好! 新的一天又开始啦!"); if(hours==7) alert(st
    ring + "早安! 早饭可很重要哦,吃饱没有?"); if(hours>7 && hours<11) alert(string +
    "早!又是忙碌的一天,祝行事顺利!"); if(hours==11) alert(string + "快中午啦, 饿不
    饿?可别胡弄自己呀!"); if(hours==12) alert(string + "中午喽!吃饱没有? 是准备 猫一
    小觉 ,还是出去晒晒太阳?"); if(hours>12 && hours<15) alert(string + "下午是 最容
    易犯困的时候,可要提起精神哦。"); if(hours==15) alert(string + "来杯下午茶吧! 休
    息是为了走更远的路嘛!"); if(hours>15 && hours<18) alert(string + "又开始 期待下课
    /班了吧?不过一定要今日事,今日毕呦!"); if(hours==18) alert(string + "在加班还是休
    息, 身体可是第一位的啊。"); if(hours==19) alert(string + "吃了吗?别忘了 抽点时间
    跟爱人聊聊天!"); if(hours==20) alert(string + "不爱看电视吧? 太闷?来我这里就对啦
    !"); if(hours>20 && hours<23) alert(string + "晚上好! 是不是开始泡网啦?我这儿是最
    佳选择!"); if(hours==23) alert(string + "快午夜了, 要不要来块点心;注意身体别太辛
    苦了?"); } SayHello();


    13 超级返回
     
    <body> 与 </body> 之间必要的地方加入如下代码: <form> <p><input type="button" va
    lue="返回到前一页"></p> </form>


    14 窗口自动上卷
     
    <head>中加入以下代码: <script language="JavaScript"> <!-- var position = 0; fun
    ction scroller() { if (position !=700 ) { position++; scroll(0,position); clearT
    imeout(timer); var timer = setTimeout("scroller()",50); timer; } } // --> </scri
    pt> 再在BODY中加上onload="scroller()"即可以实现了


    15 跑马灯
     
    跑马灯(1)

    <HTML> <HEAD> <TITLE>跑马灯</TITLE> <SCRIPT Language="JavaScript"> var msg="欢迎
    光临本报编辑部"; var interval = 100; seq = 0; function Scroll() { document.tmFor
    m.tmText.value = msg.substring(0, seq+1); seq++; if ( seq >= msg.length ) { seq
    = 0 }; window.setTimeout("Scroll();", interval ); } </SCRIPT> <BODY > <FORM Name=tmForm> <INPUT Type=Text Name=tmText Size=45> </FORM> </BODY
    > </HTML>


    16 变脸
    <form name="myForm"> <p><input type="text" name="input" value="嘿,你好." size="2
    0"> <input type="button" value="点我一下,看看输入框中有什么变化":)"> </form>

    17 引用外部javascript
    引用外部javascript <script language="JavaScript" src="javascript.js"> </script>

    18 java图形变量的定义
    java图形变量的定义 img = new image(71,21); img.src = "image/home2.gif"

    19 将本站加入收藏夹
    将本站加入收藏夹 <form> <input TYPE="BUTTON" VALUE="将本站加入收藏夹"http://personal.hb.cninfo.net/~hqse" target=_blank>http://personal.hb.cninfo.net/~hqse, [指南针]贺庆
    生个人主页 )" class="p1"> </form>
    分享到: QQ空间QQ空间 腾讯微博腾讯微博 腾讯朋友腾讯朋友
    分享分享0 收藏收藏0 支持支持0 反对反对0 分享到人人 转发到微博
    [img=http://mail.qq.com/cgi-bin/qm_share?t=qm_mailme&email=fRUcHhYWGAQ9GxIFEBwUEVMeEhA]http://rescdn.qqmail.com/zh_CN/htmledition/images/function/qm_open/ico_mailme_02.png[/img]

    使用道具 举报

    您需要登录后才可以回帖 登录 | 注册 人人连接登陆

    晴云孤魂's Blog|就爱编程搜帖|手机版|Archiver|就爱编程论坛     

    GMT+8, 2025-7-4 12:06 , Processed in 0.101425 second(s), 27 queries .

    Powered by Discuz! X2

    © 2001-2011 Comsenz Inc.

    回顶部