图片局部放大效果实现

  作为菜鸟的我,来到这里开始学习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;

好了,慢慢学习吧~

加油!

你可能感兴趣的:(图片)