位置：首页>> 网络编程>> JavaScript>> 主页移动背景代码

主页移动背景代码

作者：sunny　来源：经典论坛　发布时间：2009-11-16 17:54:00　

标签：移动,背景,JavaScript

1、把这段拷到DW里，存成HTML文件。

<HTML>
<HEAD>
<TITLE>move background</TITLE>
<META content="text/html; charset=gb2312" http-equiv=Content-Type>
<script language="javaScript" type="text/javascript" src="movebg.js"></script>
<style type="text/css">

</style>
</HEAD>
<BODY
bgColor=#F0F4F3 leftmargin="0" topmargin="0">
<DIV id=Lwegbild
style="CLIP: rect(0px 100px 100px 0px); HEIGHT: 300; LEFT: 92px; POSITION: absolute; TOP: 47px; WIDTH: 200; Z-INDEX: 74; visibility: visible" >
<table width="200" border="0" cellspacing="0" cellpadding="0" height="300">
    <tr>
      <td width="100" valign="top" align="left" height="100"> 11111111111111111</td>
      <td width="100" height="100" align="left" valign="top"> 222222222222222222</td>
    </tr>
    <tr>
      <td width="100" height="100" align="left" valign="top">33333333333333333</td>
      <td width="100" height="100" valign="top" align="left">444444444444444444</td>
    </tr>
    <tr>
      <td width="100" height="100" valign="top" align="left">55555555555555555</td>
      <td width="100" height="100" valign="top" align="left">666666666666666666</td>
    </tr>
</table>
</DIV>
<div id="Layer2" style="position:absolute; left:44px; top:46px; width:164px; height:274px; z-index:76">
<table width="100％" border="0" cellspacing="0" cellpadding="0">
    <tr>
      <td><a href="#" onMouseOver=YY_wf(0,0)>1</a> </td>
    </tr>
    <tr>
      <td><a href="#" onMouseOver=YY_wf(1,0)>2</a> </td>
    </tr>
    <tr>
      <td><a href="#" onMouseOver=YY_wf(0,1)>3</a> </td>
    </tr>
    <tr>
      <td><a href="#" onMouseOver=YY_wf(1,1)>4</a> </td>
    </tr>
    <tr>
      <td><a href="#" onMouseOver=YY_wf(0,2)>5</a> </td>
    </tr>
    <tr>
      <td><a href="#" onMouseOver=YY_wf(1,2)>6</a> </td>
    </tr>
</table>
</div>
</body>
</html>

1、把这段存成js文件，取名movebg.js，和上面的放在同一个文件夹。

// aspxhome.com
//
//weg1
function YY_wf (yy_x,yy_y){
yyLayerScroll('document.layers[\'Lwegbild\']','document.all[\'Lwegbild\']',1, yy_x*100, yy_y*100, 0, 0,1,1);
}
// Mover
// Mv ist fuer Soehne
var mv_end = 0;
var daLayer = 'Lperson';
var Mperson = 0;
var mv_step = 23;
var mr_step = 23;
var mv_to = 11;
var lage =-1;
function YY_mv(wohinx, isx, wohiny, isy){
if (document.layers||document.all){
      if(!Mperson){}else{clearTimeout(Mperson)}
    if(document.layers){
      if(!isx)isx=document.layers[daLayer].top;
      isx+=mv_step;
      document.layers[daLayer].top = isx;
    }
    if(document.all) {
      if(!isx)isx=document.all[daLayer].style.pixelTop;
      isx+=mv_step;
      document.all[daLayer].style.pixelTop = isx;
    }
    if(isx<wohinx){Mperson = setTimeout("YY_mv("+wohinx+","+isx+")", mv_to)}
}
}
function YY_mr(wohinx, isx, wohiny, isy){
if (document.layers||document.all){
      if(!Mperson){}else{clearTimeout(Mperson)}
    if(document.layers){
      if(!isx)isx=document.layers[daLayer].top;
      isx=isx-mr_step;
      if(isx>=wohinx)document.layers[daLayer].top = isx;
    }
    if(document.all) {
      if(!isx)isx=document.all[daLayer].style.pixelTop;
        isx=isx-mr_step;
      if(isx>=wohinx)document.all[daLayer].style.pixelTop = isx;
    }
    if(isx>=wohinx){
      Mperson = setTimeout("YY_mr("+wohinx+","+isx+")", mv_to)
    }
}
}
// navbar zurueck
var yyNavScrollBack=0;
function YY_c_r(nix, was){
if(was){yyNavScrollBack=was}else
    if(!yyNavScrollBack){yyNavScrollBack=0}
    status=yyNavScrollBack;
YY_c (0,yyNavScrollBack);
}
// CallScroller
function yyLayerScroll(targetNN, targetIE, delay, ex, ey, dx, dy, sx, sy, yyX, yyY) {
    //status=(debug++) + ' ' + ex
    if (document.layers) {
        target = eval(targetNN);
        var ct = target.clip.top;
        var cb = target.clip.bottom;
        var cl = target.clip.left;
        var cr = target.clip.right;
        yyY=Math.abs(Math.round((ct-ey)/sy));
        dy=Math.round(-(ct-ey)/yyY);
        yyX=Math.abs(Math.round((cl-ex)/sx));
        dx=Math.round(-(cl-ex)/yyX);
        if(yyX<1){dx=0}else{yyX--};
        if(yyY<1){dy=0}else{yyY--};
         var t = target.top;
         target.clip.top = ct + (dy);
         target.clip.bottom = cb + (dy);
         target.top = t - (dy);
         var l = target.left;
         target.clip.left = cl + dx;
         target.clip.right = cr + dx;
         target.left = l - dx;
     }else {
        if (document.all) {
            IEobjStr = targetIE.replace("['", ".");
            target = eval(IEobjStr.replace("']", ""));
            //yyIsScroll = -target.style.pixelTop+124;
              if (target.style.clip) {
                  var clipv = target.style.clip.split("rect(")[1].split(")")[0].split("px");
                  var ct = Number(clipv[0]);
                  var cr = Number(clipv[1]);
                  var cb = Number(clipv[2]);
                  var cl = Number(clipv[3]);
                  var l = target.style.pixelLeft;
                  var t = target.style.pixelTop;
              }
            yyY=Math.abs(Math.round((ct-ey)/sy));
            dy=Math.round(-(ct-ey)/yyY);
            yyX=Math.abs(Math.round((cl-ex)/sx));
            dx=Math.round(-(cl-ex)/yyX);
            if(yyX<1)dx=0;
            if(yyY<1)dy=0;
            ncl = cl + dx;
            nct = ct + dy;
            ncr = cr + dx;
            ncb = cb + dy;
            target.style.pixelTop = t - dy;
            target.style.pixelLeft = l - dx;
            eval("target.style.clip = 'rect(' + nct + ' ' + ncr + ' ' + ncb + ' ' + ncl +')'");
            yyY--;
            yyX--;
    }
   }
   clearTimeout(target.yyScroller);
   if(yyY>0||yyX>0){
       target.yyScroller = setTimeout("yyLayerScroll(\"" + targetNN + "\",\"" + targetIE + "\"," + delay + "," + ex+ "," + ey+ "," + dx+ "," + dy + "," +sx + "," + sy + "," + yyX + "," + yyY+ ")", delay);
     }
     else
      {if(lage>-1){YY_Einrasten(lage);}}
}

3、js说明

function YY_wf (yy_x,yy_y){
yyLayerScroll('document.layers[\'Lwegbild\']','document.all[\'Lwegbild\']',1, yy_x*100, yy_y*100, 0, 0,1,1);
}

修改这段就可以达到你要的效果，Lwegbild是你要移动的层。
yy_x*100和yy_y*100分别是x、y轴的移动距离，当YY_wf(1,2)时，
就是向右移动1*100像素，想下移动2*100像素。最后的1，1分别是x、y轴的移动速度。那个0，0我忘了， :D :D :D自己试试，影响不大。

投稿

主页移动背景代码

猜你喜欢