• 经典的JavaScript效果


    Q: 实现双击自动滚屏.
    A: 将以下代码添加到需要自动滚屏的页面上

    <s cript Language="Javas cript">
    var currentpos, timer;
    function initialize(){
    timer = setInterval("scrollwindow()", 1);
    }
    function sc(){
    clearInterval(timer);
    }
    function scrollwindow(){
    currentpos = document.body.scrollTop;
    window.scroll(0, ++currentpos);
    if(currentpos != document.body.scrollTop){
    sc();
    }
    }
    document.onmousedown = sc;
    document.ondblclick = initialize;
    </s cript>

    Q: 鼠标特效 。
    A: 鼠标放到链接上就会出现一个说明框,里面有滚动的文字说明

    <a href="http://www.baidu.com" target="_blank" onMouseOver="helpor_net_show(this,event,' 这里是百度的主页 ')" onMouseOut="helpor_net_hide()"> 把鼠标放上来试试
    <div id="tooltip2" style="position:absolute;visibility:hidden;clip:rect(0 150 50 0);150px;background-color:seashell">
    <layer name="nstip" width="1000px" bgColor="seashell"></layer>
    </div>
    <SCRIPT language="JavaScript">
    <!--
    if (!document.layers&&!document.all)
    event="test"
    function helpor_net_show(current,e,text){

    if (document.all&&document.readyState=="complete"){
    document.all.tooltip2.innerHTML='<marquee style="border:1px solid #3399ff">'+text+'</marquee>'
    document.all.tooltip2.style.pixelLeft=event.clientX+document.body.scrollLeft+10
    document.all.tooltip2.style.pixelTop=event.clientY+document.body.scrollTop+10
    document.all.tooltip2.style.visibility="visible"
    }

    else if (document.layers){
    document.tooltip2.document.nstip.document.write(' '+text+' ')
    document.tooltip2.document.nstip.document.close()
    document.tooltip2.document.nstip.left=0
    currentscroll=setInterval("scrolltip()",100)
    document.tooltip2.left=e.pageX+10
    document.tooltip2.top=e.pageY+10
    document.tooltip2.visibility="show"
    }
    }
    function helpor_net_hide(){
    if (document.all)
    document.all.tooltip2.style.visibility="hidden"
    else if (document.layers){
    clearInterval(currentscroll)
    document.tooltip2.visibility="hidden"
    }
    }

    function scrolltip(){
    if (document.tooltip2.document.nstip.left>=-document.tooltip2.document.nstip.document.width)
    document.tooltip2.document.nstip.left-=5
    else
    document.tooltip2.document.nstip.left=150
    }
    //-->
    </SCRIPT>

    Q: 文本随机输出,可以用来作公告栏 。
    A: 脚本说明 :
    第一步 : 把如下代码加入 <head> 区域中
    <SCRIPT LANGUAGE="JavaScript">
    <!-- Original: Tarjei Davidsen (the@rescueteam.com) -->

    <!-- This script and many more are available free online at -->
    <!-- The JavaScript Source!! http://javascript.internet.com -->

    <!-- Begin
    var max=0;
    function textlist() { i++:textlist.arguments[i]; max }
    tl = new textlist(
    " 随着 INTERNET 时代的逐步到来 , 人们对网络的认识与感知越来越深刻 ",
    " 上网主要是进行 web 页面浏览,所以 web 页面的精彩程度对一个网站的生 ",
    " 人通过制作个人主页展现自己的才华,而且,由于出现了多种制作网页的软件 ",
    " 但是,光用软件就成制作出你想要的各种页面效果吗?答案肯定是否定的但是,光用软件就成制作出你想要的各种页面效果吗?答案肯定是否定的 ",
    "JavaScript 是 Netscape( 网景 ) 公司首先推出的一种针对 WEB 页面的解释型语 "
    );

    var x = 0; pos = 0;
    var l = tl[0].length;
    function textticker() {
    document.tickform.tickfield.value = tl[x].substring(0, pos) + "_";
    if(pos++ == l) {
    pos = 0;
    setTimeout("textticker()", 2000);
    if(++x == max) x = 0;
    l = tl[x].length;
    } else
    setTimeout("textticker()", 50);
    }
    // End -->
    </script>
    </HEAD>


    第二步 : 把如下代码加入 <body> 区域中
    <form name=tickform>
    <textarea name=tickfield rows=3 cols=38 style="background-color: rgb(0,0,0); color: rgb(255,255,255); cursor: default; font-family: Arial; font-size: 12px" wrap=virtual>The news will appear here when the page has finished loading.
    </textarea>
    </form>


    第三步 : 把 <body> 改为
    <body bgcolor="#fef4d9" OnLoad="textticker()">

    Q: 进入页面自动弹出的欢迎致词,个人网站可加......
    A: 今天在公司网站上抓的,进入页面自动弹出的欢迎致词,个人网站可加上不免没有加好呀。加的位置应该可以看懂吧。
    <html>
    <head>
    </head>
    <body>
    </body>
    <script language="vbscript">
    <!--
    MsgBox"欢迎光临我的网站!"
    -->
    </script>
    </html>

    Q: 页面自动刷新说明 。
    A: 当你做网页时,是不是有的时候想让你的网页自动不停刷新,或者过一段时间自动跳转到另外一个你自己设定的页面?其实实现这个效果非常地简单,而且这个效果甚至不能称之为特效。你只要把如下代码加入你的网页中就可以了。

    1,页面自动刷新:把如下代码加入<head>区域中<meta http-equiv="refresh" content="20">,其中20指每隔20秒刷新一次页面.

    2,页面自动跳转:把如下代码加入<head>区域中<meta http-equiv="refresh" content="20;url=http://www.163.com">,其中20指隔20秒后跳转到http://www.163.com页面。

    Q: 鼠标箭头变十字架代码(对一些特殊的网页有用) .
    A: 你们自己试试效果就知道了.

    <script language="JavaScript1.2">
    <!--
    if (document.all&&!window.print){
    leftright.style.width=document.body.clientWidth-2
    topdown.style.height=document.body.clientHeight-2
    }
    else if (document.layers){
    document.leftright.clip.width=window.innerWidth
    document.leftright.clip.height=1
    document.topdown.clip.width=1
    document.topdown.clip.height=window.innerHeight
    }
    function followmouse1(){
    //move cross engine for IE 4+
    leftright.style.pixelTop=document.body.scrollTop+event.clientY+1
    topdown.style.pixelTop=document.body.scrollTop
    if (event.clientX<document.body.clientWidth-2)
    topdown.style.pixelLeft=document.body.scrollLeft+event.clientX+1
    else
    topdown.style.pixelLeft=document.body.clientWidth-2
    }
    function followmouse2(e){
    //move cross engine for NS 4+
    document.leftright.top=e.y+1
    document.topdown.top=pageYOffset
    document.topdown.left=e.x+1
    }
    if (document.all)
    document.onmousemove=followmouse1
    else if (document.layers){
    window.captureEvents(Event.MOUSEMOVE)
    window.onmousemove=followmouse2
    }
    function regenerate(){
    window.location.reload()
    }
    function regenerate2(){
    setTimeout("window.onresize=regenerate",400)
    }
    if ((document.all&&!window.print)||document.layers)
    //if the user is using IE 4 or NS 4, both NOT IE 5+
    window.onload=regenerate2
    //-->
    </script>
    <style>
    <!--
    #leftright, #topdown{
    position:absolute;
    left:0;
    top:0;
    1px;
    height:1px;
    layer-background-color:#B0D0F8;
    background-color:#00eeff;
    z-index:100;
    font-size:1px;
    }
    -->
    </style>

    【貼上】然後切換到您的網頁,按『Ctrl+V』將剛剛複製的程式碼貼在</head>之前。


    <div id="leftright" style="expression(document.body.clientWidth-2)">
    </div>
    <div id="topdown" style="height:expression(document.body.clientHeight-2)">
    </div>

    【貼上】然後切換到您的網頁,按『Ctrl+V』將剛剛複製的程式碼貼在<body>之後任何位置。

    【修改程式碼】
    若想改改線的顏色,那就改background-color:#00eeff;這部份,後面的顏色碼就行了。

    Q: 网站鼠标点击有烟花效果的代码 .
    A: <SCRIPT LANGUAGE="JavaScript1.2">
    <!-- Begin
    var ver = navigator.appVersion;
    var dom = document.getElementById ? 1 : 0;
    var ie5 = (ver.indexOf("MSIE 5") > -1 && dom) ? 1 : 0;
    var n = (document.layers);
    var ie = (document.all);

    var sparksAflyin = 0;
    var totalSparks = 0;
    var sparksOn = 1;
    function initMouseEvents() {
    if (n) document.captureevents(event.mousedown | event.mousemove) }
    function mouseDown(e) { i++):eval('anim_'+i+'_x[j]+mousex'); document.body.offsetheight+document.body.scrolltop:document.body.offsetHeight
    +document.body.scrollTop-30; document.body.offsetwidth+document.body.scrollleft:document.body.offsetWidth
    +document.body.scrollLeft-30; document.all.sdiv'+i+'.style.top:tempy; document.layers.sdiv'+i+'.left:tempx; document.layers.sdiv'+i+'.top:tempy;
    totalsparks++= = ( }
    if (totalSparks == 10) {
    sparksAflyin = 0;
    totalSparks = 0;
    }
    }
    function SHOW(divName){
    if (document.all)
    eval('document.all.'+divName+'.style.visibility = "visible";');
    else if (document.layers)
    eval('document.layers["'+divName+'"].visibility = "visible";');
    }
    function HIDE(divName){
    if (document.all)
    eval('document.all.'+divName+'.style.visibility = "hidden";');
    else if (document.layers)
    eval('document.layers["'+divName+'"].visibility = "hide";');
    }
    anim_0_x=new Array(20,20,10,0,0,0,0,0,0,0,0,0);
    anim_0_y=new Array(-20,-40,-60,-80,-60,-40,-20,0,20,40,60,80);
    anim_1_x=new Array(20,20,17,36,60,78,90,92,93,98,108,120,133,152,181);
    anim_1_y=new Array(-20,-20,-33,-38,-38,-27,-2,25,51,84,113,141,162,212,253);
    anim_2_x=new Array(20,20,2,3,4,5,6,7,8,9,10,12,13,15,18);
    anim_2_y=new Array(-20,-20,-33,-38,-38,-27,-2,25,51,84,113,141,162,212,253);
    anim_3_x=new Array(-20,-20,-2,-1,7,10,18,35,60,102,94,94,93,97,108,111,117,127);
    anim_3_y=new Array(-20,-25,-64,-89,-104,-150,-173,-197,-213,-199,-151,-101,-66,-17,27,87,140,189);
    anim_4_x=new Array(-20,-20,-10,-39,-30,-69,-64,-138,-154,-200,-181,-209,-191,-207,-203,-213,-202,-221,-211);
    anim_4_y=new Array(-20,-20,-28,-51,-79,-100,-135,-154,-193,-183,-149,-134,-89,-60,8,51,107,157,201);
    anim_5_x=new Array(-20,-29,-51,-72,-105,-133,-164,-189,-209,-229,-247,-270,-279,-282,-283,-283,-285,-286,-288);
    anim_5_y=new Array(-20,-55,-86,-116,-154,-183,-205,-217,-217,-198,-169,-120,-44,-8,40,87,144,190,248);
    anim_6_x=new Array(-20,-20,-7,14,44,79,143,186,217,226,234,244,250,259,265,274);
    anim_6_y=new Array(-20,-21,-72,-113,-139,-166,-188,-181,-126,-68,-3,54,134,187,215,257);
    anim_7_x=new Array(20,20,-3,-9,-13,-27,-33,-44,-54,-66,-77,-95,-107,-136,-150,-160,-164,-168,-171,-172,-172,-176,-175);
    anim_7_y=new Array(-20,-26,-43,-63,-89,-116,-145,-169,-201,-222,-240,-253,-254,-245,-220,-195,-160,-124,-81,-53,-26,19,68);
    anim_8_x=new Array(-20,20,-35,39,0,45,-1,24,-15,14,-20,35,-18,38,-11,16,49,64,81,93,100,103,109);
    anim_8_y=new Array(-20,-20,-32,-42,-62,-76,-89,-107,-132,-147,-173,-180,-192,-209,-236,-193,-119,-73,-24,51,95,130,188);
    anim_9_x=new Array(-20,-51,-89,-110,-165,-191,-228,-240,-259,-271,-277,-281,-287);
    anim_9_y=new Array(-20,-20,-35,-37,-34,-16,10,47,105,150,189,227,273);
    // End -->
    </script>

    <body bgcolor="#fef4d9" OnLoad="initMouseEvents()">

    <div id="sparks">
    <div id="sDiv0" style="position:absolute; visibility: hidden;"><font face="arial black" color="red">a </div>
    <div id="sDiv1" style="position:absolute; visibility: hidden;"><font face="arial black" color="yellow">b </div>
    <div id="sDiv2" style="position:absolute; visibility: hidden;"><font face="arial black" color="blue">c </div>
    <div id="sDiv3" style="position:absolute; visibility: hidden;"><font face="arial black" color="red">d </div>
    <div id="sDiv4" style="position:absolute; visibility: hidden;"><font face="arial black" color="orange">e </div>
    <div id="sDiv5" style="position:absolute; visibility: hidden;"><font face="arial black" color="white">f </div>
    <div id="sDiv6" style="position:absolute; visibility: hidden;"><font face="arial black" color="green">g </div>
    <div id="sDiv7" style="position:absolute; visibility: hidden;"><font face="arial black" color="skyblue">h </div>
    <div id="sDiv8" style="position:absolute; visibility: hidden;"><font face="arial black" color="yellow">i </div>
    <div id="sDiv9" style="position:absolute; visibility: hidden;"><font face="arial black" color="white">j </div>
    </div>

    Q: 文本随机输出,可以用来作公告栏,一个字一个字的输出,不错。。。
    A: 脚本说明:
    第一步:把如下代码加入<head>区域中
    <SCRIPT LANGUAGE="JavaScript">
    <!-- Original: Tarjei Davidsen (the@rescueteam.com) -->

    <!-- This script and many more are available free online at -->
    <!-- The JavaScript Source!! http://javascript.internet.com -->

    <!-- Begin
    var max=0;
    function textlist() {
    max=textlist.arguments.length;
    for (i=0; i<max; i++)
    this[i]=textlist.arguments[i];
    }
    tl = new textlist(
    " 随着INTERNET时代的逐步到来,人们对网络的认识与感知越来越深刻",
    "上网主要是进行web页面浏览,所以web页面的精彩程度对一个网站的生",
    "人通过制作个人主页展现自己的才华,而且,由于出现了多种制作网页的软件",
    "但是,光用软件就成制作出你想要的各种页面效果吗?答案肯定是否定的但是,光用软件就成制作出你想要的各种页面效果吗?答案肯定是否定的",
    "JavaScript是Netscape(网景)公司首先推出的一种针对WEB页面的解释型语"
    );

    var x = 0; pos = 0;
    var l = tl[0].length;
    function textticker() {
    document.tickform.tickfield.value = tl[x].substring(0, pos) + "_";
    if(pos++ == l) {
    pos = 0;
    setTimeout("textticker()", 2000);
    if(++x == max) x = 0;
    l = tl[x].length;
    } else
    setTimeout("textticker()", 50);
    }
    // End -->
    </script>
    </HEAD>


    第二步:把如下代码加入<body>区域中
    <form name=tickform>
    <textarea name=tickfield rows=3 cols=38 style="background-color: rgb(0,0,0); color: rgb(255,255,255); cursor: default; font-family: Arial; font-size: 12px" wrap=virtual>The news will appear here when the page has finished loading.</textarea>
    </form>


    第三步:把<body>改为
    <body bgcolor="#fef4d9" OnLoad="textticker()">

  • 相关阅读:
    EF6学习
    jQuery中each的用法之退出循环和结束本次循环
    Convert.ToInt16(s);int.Parse(s);和(int)s的区别
    .net网站部署winserver2008R2 iis浏览只显示目录浏览
    二维数组按某列排序
    XML文件的操作
    .net中 IOC DI
    .net在Oracle数据库中为In条件查询防止sql注入参数化处理
    测试代码耗时的时间段(.net)
    沙箱测试
  • 原文地址:https://www.cnblogs.com/befer/p/4943515.html
Copyright © 2020-2023  润新知