当前位置: 代码迷 >> JavaScript >> javascript代码有关问题 -功能实现漫游的自由浮动层
  详细解决方案

javascript代码有关问题 -功能实现漫游的自由浮动层

热度:116   发布时间:2012-10-13 11:38:17.0
javascript代码问题 --功能实现漫游的自由浮动层
HTML code

<html>
<head>
    <script language = 'javascript'>
    function MM_swapImgRestore()
    {
        var i, x, a = document.MM_sr;
        for(i = 0; a && i<a.length && (x=a[i]) && x.oSrc; i++)
        {
            x.src = x.oSrc;
        }
    }
    function MM_preloadImages()
    {
        var d = document;
        if(d.images)
        {
            if(!d.MM_p)
            {
                d.MM_p = new Array();
            }
            var i, j = d.MM_p.length, a = MM_preloadImages.arguments;
            for(i=0; i<a.length; i++)
            {
                if(a[i].indexOf("#") != 0)
                {
                    d.MM_p[j] = new Image;
                    d.MM_p[j++].src = a[i];
                }
            }
        }
    }
    function MM_swapImage()
    {
        var i, j = 0, x, a = MM_swapImage.arguments;
        document.MM_sr = new Array;
        for(i=0; i<(a.length - 2); i += 3)
        {
            if((x = MM_findObj(a[i])) != null)
            {
                document.MM_sr[j++] = x;
                if(!x.oSrc)
                {
                    x.oSrc = x.src;
                }
                x.src = a[i+2];
            }
        }
    }
    </script>
</head>
<body>
    <script language = 'javascript'>
        var step = 2;
        var delay = 30;
        var height = 0;
        var Hoffset = 0;
        var Woffset = 0;
        var yon = 0;
        var kon = 0;
        var pause = true;
        var interval;
        var name = navigator.appName;
        if(name == "Microsoft Internet Explorer")
        {
            name = true;
        }
        else
        {
            name = false;
        }
        var xPos = 20;
        if(name)
        {
            var yPos = document.body.clientHeight;
        }
        else
        {
            var yPos = window.innerHeight;
        }
        function changePos()
        {
            if(name)
            {
                width = document.body.clientWidth;
                height = document.body.clinetHeight;
                Hoffset = img.offsetHeight;
                Woffset = img.offsetWidth;
                img.style.left = xPos + document.body.scrollLeft;
                img.style.top = yPos + document.body.scrollTop;
            }
            else
            {
                width = window.innerHeight;
                height = window.innerWidth;
                Hoffset = document.img.clip.height;
                Woffset = document.img.clip.width;
                document.img.pageY = yPos + window.pageYOffset;
                document.img.pageX = xPos + window.pageXOffset;
            }
            if(yon)
            {
                yPos = yPos + step;
            }
            else
            {
                yPos = yPos - step;
            }
            if(yPos < 0)
            {
                yon = 1;
                yPos = 0
            }
            if(yPos >= (height - Hoffset))
            {
                yon = 0;
                yPos = (height - Hoffset);
            }
            if(xon)
            {
                xPos = xPos + step;
            }
            else
            {
                xPos = xPos - step;
            }
            if(xPos < 0)
            {
                xon = 1;
                xPos = 0;
            }
            if(xPos >= (width - Woffset))
            {
                xon = 0;
                xPos = (width - Woffset);
            }
        }
        function start()
        {
            if(name)
            {
                document.img.visibility = "visible";
            }
            else
            {
                document.img.visibility = "visible";
            }
            interval = setInterval('changePos()', delay);
        }
        function pauseResume()
        {
            if(pause)
            {
                clearInterval(interval);
                pause = false;
            }
            else
            {
                interval = setInterval('changePos()', delay);
                pause = true;
            }
            
        }
        start();
        function stop()
        {
            clearInterval(interval);
            pause = false;
        }
    </script>
    <div id = "img" onMouseOver = "javascript:stop()" onMouseOut = "javascript:start()" style = "position:absolute; width:191px; height:55px; left:119px; top:4px">
    <a href = "#" onMouseOut = "MM_swapImgRestore()" onMouseOver = "MM_swapImage('a02', '', 'picture.gif', 1)"></a>
    <a href = "#" onMouseOut = "MM_swapImgRestore()" onMouseOver = "MM_swapImage('Image_FL2', '', 'picture.gif', 1)"><img name = "Image_FL2" border = "0" src = "picture.gif" width = "180" height = "60" usemap = "#Image_FL2Map">
        <map name = "Image_FL2Map">
            <area shape = "rect" coords = "4, -4, 166, 28" href = "http://www.pku.edu.cn" target = "blank">
            <area shape = "rect" coords = "6, 29, 164, 55" href = "http://www.tsinghua.edu.cn" target = "blank">
        </map>
    </a>
    </div>
</body>

</html>


 
  相关解决方案