首页 | IT新闻 | 硬件 | 操作系统 | 开发 | 网络编程 | 数据库 | 热门框架 | 网络安全 | 组网 | 建站指南 | 网页制作 | 特效 | 实用技巧 | 服务器 | 办公 | QQ | 探索 | 社区

  • 技术部落
  • 部落首页 > 网页特效 > 正文
  • 图片变化效果
      2007-2-25  来源:网络资源  编辑:Jsbulo  热度:

    脚本说明:
    把如下代码加入<body>区域中
    <a name="logoAnchor"> </a>
    <div id="logo" style="position:absolute;visibility:visible;">
    <img name="logoIm" src="003.jpg">
    </div>

    <SCRIPT LANGUAGE="JavaScript1.2">
    <!-- Begin
    function BrowserCheck() {
    var b = navigator.appName;
    if (b == "Netscape") this.b = "NS";
    else if (b == "Microsoft Internet Explorer") this.b = "IE";
    else this.b = b;
    this.v = parseInt(navigator.appVersion);
    this.NS = (this.b == "NS" && this.v >= 4);
    this.NS4 = (this.b == "NS" && this.v == 4);
    this.NS5 = (this.b == "NS" && this.v == 5);
    this.IE = (this.b == "IE" && this.v >= 4);
    this.IE4 = (navigator.userAgent.indexOf(’MSIE 4’) > 0);
    this.IE5 = (navigator.userAgent.indexOf(’MSIE 5’) > 0);
    if (this.IE5 || this.NS5) this.VER5 = true;
    if (this.IE4 || this.NS4) this.VER4 = true;
    this.oldVer = (! this.VER5 && ! this.VER4) ? true : false;
    this.min = (this.NS || this.IE);
    }
    is = new BrowserCheck()
    var myLogo = (is.NS4) ? document.layers["logo"] : document.all["logo"].style;
    var logoWidth = (is.NS4) ? document.logo.document.logoIm.width : document.logoIm.width;
    var logoHeight = (is.NS4) ? document.logo.document.logoIm.height : document.logoIm.height;
    var halfHeight = logoHeight / 2;
    var windowWidth = (is.NS4) ? window.innerWidth - 16 : document.body.offsetWidth - 20;
    var halfWidth = logoWidth / 2;
    var cliplogoHeightor = (is.NS4) ?
    ’myLogo.clip.top = 0;’ +
    ’myLogo.clip.right = right;’ +
    ’myLogo.clip.bottom = logoHeight;’ +
    ’myLogo.clip.left = left; ’
    :
    ’str="rect(0 " + right + " " + logoHeight + " " + left + ")";’ +
    ’myLogo.clip = str; ’
    var clipLogoVert = (is.NS4) ?
    ’myLogo.clip.top = up;’ +
    ’myLogo.clip.right = logoWidth;’ +
    ’myLogo.clip.bottom = dn;’ +
    ’myLogo.clip.left = 0; ’
    :
    ’str="rect(" + up + " " + logoWidth + " " + dn + " 0)";’ +
    ’myLogo.clip = str;’
    var right = logoWidth, left = 0;
    var cnt = 0, up = halfHeight, dn = halfHeight, upDown;
    var logoWidth, logoHeight;
    // ---------------  User modifiable variables  ----------------------

    //if useAnchorPosition is true logo will be positioned where you put the "logoAnchor"
    //set to false to center logo - also set myLogo.top to desired position

    var useAnchorPosition = false;   // set to false to set your own logo position below
    if (! useAnchorPosition) {
    myLogo.left = ((windowWidth / 2) - (logoWidth / 2));  // centers logo - comment out if using line below
    //myLogo.left = 100;  // remove ’//’ to set left position
    myLogo.top = 200;  // sets logo top
    }
    var scrollInc = 5; // sets # of pixels to scroll in 1 time frame
    var scrollSpeed = 10; // sets the scroll speed
    // ------------------------------------------------------------------
    function scrollLogo() {
    if (cnt == 0) {
    up-- ; dn++;
    if (up < -10) {
    right = logoWidth;
    left = 0;
    upDown = -scrollInc;
    cnt++;
    }
    eval(clipLogoVert);
    }
    if (cnt == 1) {
    right +=  upDown;
    left -= upDown;
    if (right < halfWidth-40) {
    right = halfWidth;
    left = halfWidth;
    upDown = scrollInc;
    cnt++;
    }
    eval(cliplogoHeightor);
    }
    if (cnt == 2) {
    right +=  upDown;
    left -= upDown;
    if (right > logoWidth+20) {
    right = logoWidth;
    left = 0;
    up = 0;
    dn = logoHeight;
    cnt++;
    }
    eval(cliplogoHeightor);
    }
    if (cnt == 3) {
    up++;
    dn--;
    if (dn < halfHeight - 10) {
    up = halfHeight;
    dn = halfHeight;
    right = logoWidth;
    left = 0;
    upDown = scrollInc;
    cnt = 0;
    }
    eval(clipLogoVert)
    }
    setTimeout("scrollLogo()", scrollSpeed);
    }
    if (! is.oldVer)window.onload = init;
    function init() {
    positionLogo();
    scrollLogo();
    }
    var L, T;
    var pos = (is.NS4) ? pos = document.anchors[’logoAnchor’] : document.all[’logoAnchor’];
    var posStr = (is.NS4) ?  ’L = pos.x ; T = pos.y’ : ’L = pos.offsetLeft; T = pos.offsetTop’;
    function positionLogo() {
    if (! useAnchorPosition) return;
    eval(posStr);
    myLogo.top = T;
    myLogo.left = L;
    }
    //  End -->
    </script>
    </td>
    </tr>
    </table>

    相关链接