图片局部放大效果实现

　　作为菜鸟的我，来到这里开始学习javascript感到非常兴奋啊！

因为js可以实现很多我想实现的页面效果，而这些是我以前只是知道，不知道自己可以怎么写的。

好了，刚才看到宿舍一哥们班的老师上课写的一个图片局部放大的js效果，学来了，而且自己改进了很多。

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
    #toolbar
    {
        width:300px;
        height:300px;
        position:absolute;
        display:none;
        overflow:hidden;
    }
    </style>
    <script type="text/javascript">
        window.onload = function () {
            var vtoolbar = document.getElementById("toolbar");
            var vsmallImg = document.getElementById("sImg");
            //小图片的鼠标移动事件
            vsmallImg.onmousemove = function () {

                //获取鼠标偏移量
                var xOffset = event.offsetX;
                var yOffset = event.offsetY;

                //创建详细图
                var ImgBar = document.createElement("img");
                ImgBar.src = this.src; //路径为当前图片路径

                //清空Div
                if (vtoolbar.innerHTML) {
                    vtoolbar.innerHTML = "";
                }
                vtoolbar.appendChild(ImgBar);
                vtoolbar.style.display = "block";
                vtoolbar.style.left = event.clientX + 50 + "px";
                vtoolbar.style.top = event.clientY + 50 + "px";
                //设置图片偏移量
                ImgBar.style.marginLeft = -xOffset * 10+100;
                ImgBar.style.marginTop = -yOffset * 10+100;
            }
            //鼠标离开清空Div
            vsmallImg.onmouseout = function () {
                //alert("out");
                vtoolbar.innerHTML = "";
                vtoolbar.style.display = "none";
            }
        }
    </script>
</head>
<body>
<div id="toolbar"">
</div>
<div style="width:100px ; margin:0 auto; margin-top:200px;">
<img id="sImg" src="images/caoyi.jpg" height="120" width="160"/>
</div>
</body>
</html>

 不过还是有很多问题的，比如这里怎么才能自动获取原图片的长宽呢？

在偏移量的设置时是：局部图片.marginLeft=-1*(鼠标当前偏移量)*倍数+常数；

这里的倍数是：原始图片/缩略图

常数是偏移点相对局部图Div的偏移量：Div/2;

好了，慢慢学习吧~

加油！

posted @ 2012-07-26 21:17  hello*boy  阅读(3498)  评论(0)    收藏  举报