在購物網站的展示頁面中常常能看到跟隨滑鼠移動而移動焦點的放大鏡效果，實現這種效果的方法很多，這裡給出一種。
你需要一張大圖和一張縮小尺寸的小圖，小圖在介面中顯示，大圖用來構造放大效果。

<div id="mirror"></div>
    <div id="pic">
        <img src="E:/com/front_end/source/middle_About.jpg">
    </div>

這裡的圖片是小圖的路徑。
下面是css程式碼

<style type="text/css">
        body
 
 *{margin: 0;padding: 0;}
        #mirror{position: absolute;overflow: hidden;height: 200px;width: 200px;border-radius: 110px;border:10px black solid;background-image:url("E:/com/front_end/source/middle_About1.jpg");}
</style>

其中用border-radius和border給放大鏡加上圓形邊框，半徑是根據div的寬高加上邊框寬度((200+10+10)/2)算好的。mirror塊的背景圖是大圖，超出的部分不顯示，這樣在塊外的部分就是原來的小圖，裡面是大圖，就形成放大效果。定位設定成絕對定位，就可以在接下來的js程式碼中改變它的top和left來讓它隨著滑鼠移動了。
接下來是js程式碼，要實現的功能有：根據滑鼠移動移動放大鏡div塊(clientX,clientY,top和left)；通過設定background-posiiton來使mirror塊裡的背景始終是它“遮蓋的地方”。值得注意的地方是background-position的計算(需要加負號)以及在滑鼠移動事件發生時獲取事件要小小的跨一下瀏覽器，需要event和window.event都能被監聽到。

<script type="text/javascript">
        var mirror = document.getElementById("mirror");
        function moving(e){
            var x = e.clientX;
            var y = e.clientY;
            var mirrorHeight = mirror.offsetHeight;
            var mirrorWidth = mirror.offsetWidth;
            var
 
 picHeight = document.getElementById("pic").getElementsByTagName("img")[0].offsetHeight;
            var picWidth = document.getElementById("pic").getElementsByTagName("img")[0].offsetWidth;
            if(x <= picWidth && y <= picHeight && x >= -picWidth && y>= -picHeight){
                mirror.style.left = x - mirrorWidth/2 + "px";
                mirror.style.top = y - mirrorHeight/2 + "px";
                var bl = 2*mirror.offsetLeft;
                var bt = 2*mirror.offsetTop;
                mirror.style.backgroundPosition = "-"+(bl+mirrorWidth/2)+"px "+"-"+(bt+mirrorHeight/2)+"px";
            }
        }
        window.onmousemove = function(e){
            var e = e?e:window.event;
            moving(e);
        }
    </script>

效果還是可以看的：