网页特效:十字显现

  • 来源: 学赛网 作者: 若水   2008-05-04/11:28
  • 这是一个很Cool的效果,当你的鼠标指向连接时会有一个十字线出现。

    要完成此效果需要两个步骤

    第一步:把如下代码加入到<head>区域中

    <style type="text/css">
    #leftright{
    position:absolute;
    left:0;
    top:0;
    width:1px;
    height:1px;
    layer-background-color:black;
    background-color:#CC9900;
    z-index:100;
    font-size:0px;
    }
    #topdown { position:absolute;
    left:0;
    top:0;
    width:1px;
    height:1px;
    layer-background-color:black;
    background-color:#CC9900;
    z-index:100;
    font-size:0px;
    } a { color: #CC9900; text-decoration: none; cursor: default}
    a:hover { color: #FF0000; text-decoration: none; cursor: default}
    .article {
    BORDER-BOTTOM: black 1px solid; BORDER-LEFT: black 1px solid; BORDER-RIGHT: black 1px solid; BORDER-TOP: black 1px solid; FILTER: revealTrans(transition=23,duration=0.5) blendTrans(duration=0.5); POSITION: absolute; VISIBILITY: hidden
    ; padding-top: 3px; padding-right: 3px; padding-bottom: 3px; padding-left: 3px; color: #CC9900}
    </style>
    <script>
    function high(which2){
    theobject=which2
    highlighting=setInterval("highlightit(theobject)",50)
    }
    function low(which2){
    clearInterval(highlighting)
    which2.filters.alpha.opacity=40
    }
    function highlightit(cur2){
    if (cur2.filters.alpha.opacity<100)
    cur2.filters.alpha.opacity+=10
    else if (window.highlighting)
    clearInterval(highlighting)
    }
    function navChange(formName, popupName, target) {
    var popup = document[formName].elements[popupName];
    if (popup.options[popup.selectedIndex].value != "") {
      window.open(popup.options[popup.selectedIndex].value, target);
      popup.selectedIndex=0;
    }
    }
    function Show(divid) {
    divid.filters.revealTrans.apply();
    divid.style.visibility = "visible";
    divid.filters.revealTrans.play();
    }
    function Hide(divid) {
    divid.filters.revealTrans.apply();
    divid.style.visibility = "hidden";
    divid.filters.revealTrans.play();
    }
    function MM_openBrWindow(theURL,winName,features) { //v2.0
    window.open(theURL,winName,features);
    }
    </script>
    <script>
    function tmt_LayerSlider(targetNN, targetIE, x, y, step, delay) {
    var changed = false;
    if (document.layers) {
      target = eval(targetNN);
      if (eval(target.moving)) {
       clearTimeout(target.tmtSlide);
      }
      if (target.left > x) {
       target.left -= eval(step);
       changed = true;
      }
      if (target.left < x) {
       target.left += eval(step);
       changed = true;
      }
        if (target.top > y) {
       target.top -= eval(step);
       changed = true;
      }
      if (target.top < y) {
       target.top += eval(step);
       changed = true;
      }
      if (changed) {
       target.moving = true;
       target.tmtSlide = setTimeout("tmt_LayerSlider(\"" + targetNN + "\",\"" + targetIE + "\",\"" + x + "\",\"" + y + "\",\"" + step + "\",\"" + delay + "\")", delay);
      } else {
       target.moving = false;
      }
    } else {
      if (document.all) {
       IEobjStr = targetIE.replace("['", ".");
       target = eval(IEobjStr.replace("']", ""));
       if (eval(target.moving)) {
        clearTimeout(target.tmtSlide);
       }
       if (target.style.pixelLeft > x) {
        target.style.pixelLeft -= eval(step);
        changed = true;
       }
       if (target.style.pixelLeft < x) {
        target.style.pixelLeft += eval(step);
        changed = true;
       }
       if (target.style.pixelTop > y) {
        target.style.pixelTop -= eval(step);
        changed = true;
       }
       if (target.style.pixelTop < y) {
        target.style.pixelTop += eval(step);
        changed = true;
       }#p#分页标题#e#
       if (changed) {
        target.moving = true;
        target.tmtSlide = setTimeout("tmt_LayerSlider(\"" + targetNN + "\",\"" + targetIE + "\",\"" + x + "\",\"" + y + "\",\"" + step + "\",\"" + delay + "\")", delay);
       } else {
        target.moving = false;
       }
      }
    }
    }
    </script>

    第二步:把如下代码加入到<body>区域中

    <div id="leftright" style="width:expression(document.body.clientWidth-2)"></div>
    <div id="topdown" style="height:expression(document.body.clientHeight-2)"></div>
    <div id="Layer1" style="position:absolute; left:328px; top:216px; width:50px; height:20px; z-index:101; visibility: hidden" class="article">010101101010101010100101010101010
    </div>
    <div id="Layer2" style="position:absolute; left:328px; top:116px; width:50px; height:20px; z-index:102" class="article">10101110010110101010101010101</div>
    <p> </p>
    <p> </p>
    <p> </p>
    <table width="300" border="0" cellspacing="0" cellpadding="0" height="128">
    <tr>
    <td height="50" align="right" class="my001"><a href="#" onMouseOut="tmt_LayerSlider('document.layers[\'leftright\']','document.all[\'leftright\']','0','0','22','50');tmt_LayerSlider('document.layers[\'topdown\']','document.all[\'topdown\']','0','0','32','50');Hide(Layer2)" onMouseOver="tmt_LayerSlider('document.layers[\'leftright\']','document.all[\'leftright\']','0','150','22','50');tmt_LayerSlider('document.layers[\'topdown\']','document.all[\'topdown\']','260','0','32','50');Show(Layer2)" class="my001" onFocus="if(this.blur)this.blur()">http://js.cnzzxy.com
    </a></td>
    </tr>
    <tr>
    <td height="120" align="right"><a href="#" onMouseOut="tmt_LayerSlider('document.layers[\'leftright\']','document.all[\'leftright\']','0','0','22','50');tmt_LayerSlider('document.layers[\'topdown\']','document.all[\'topdown\']','0','0','32','50');Hide(Layer1)" onMouseOver="tmt_LayerSlider('document.layers[\'leftright\']','document.all[\'leftright\']','0','223','22','50');tmt_LayerSlider('document.layers[\'topdown\']','document.all[\'topdown\']','260','0','32','50');Show(Layer1)" onFocus="if(this.blur)this.blur()">linlin
    </a></td>
    </tr>
    </table>


    评论 {{userinfo.comments}}

    {{money}}

    {{question.question}}

    A {{question.A}}
    B {{question.B}}
    C {{question.C}}
    D {{question.D}}
    提交

    驱动号 更多