.box{

            position: relative;

        }

        #left{

            width:310px;

            height:310px;

            border: 1px solid blueviolet;

        }

        #buttom{

            width: 310px;

            height: 40px;

            margin-top: 10px;

        }

        #buttom .small{

            border: 1px solid wheat;

            float: left;

            margin-right: 5px;

        }

        #right{

            width: 400px;

            height: 310px;;

            position: absolute;

            top:;

            left:320px;

            border: 1px solid #ccc;

            display: none;

            overflow: hidden;

        }

        #right img{

            position: absolute;

            top:;

            left:;

        }

     <script>

         function $(id){

             return document.getElementById(id);

         }

         window.onload = function () {

             var left = $('left');

             var button = $('buttom');

             var right = $('right');

             button.onmouseover = function (e) {

                 var e = e||window.event;//兼容事件

                 var imgobj = e.srcElement|| e.target; //获得目标事件源，即图片 ,ie下srcElement,火狐下target

                 if(imgobj.nodeName == 'IMG'){  //当目标事件源是图片时

 //                    alert(imgobj.src);

                     var names = imgobj.src; //获得图片路径

                     console.log(names);

                     console.log(names.lastIndexOf('/'));//获得/的角标位

                     console.log(names.substring(names.lastIndexOf('/'))); //从角标位开始截至最后为图片名

                     var imgOldName = names.substring(names.lastIndexOf('/'));

                     var imgNewName = imgOldName.replace('1','2'); // 从改名来换路径

                     console.log(imgNewName);

                     left.innerHTML = '<img src=img'+imgNewName +'>';

                 }

             };

             //右边图片显示逻辑

             left.onmouseover = function () {

                 right.style.display ='block';

                 var leftimg = left.getElementsByTagName('img')[0];

                 var names = leftimg.src;

                 var imgoldname = names.substring(names.lastIndexOf('/'));

                 var imgNewName = imgoldname.replace('2','3');

                 right.innerHTML = "<img src=img"+imgNewName+">";

                 var rightImg = right.getElementsByTagName('img')[0];

                 //添加移动事件

                 this.onmousemove = function (e) {

                     var e = e||window.event;

                     var l = e.offsetX|| e.layerX; //相对于事件源位置的兼容写法

                     var r = e.offsetY|| e.layerY;

                     //根据比例来定位大图坐标

                     rightImg.style.left = l/left.offsetWidth*(right.offsetWidth-rightImg.offsetWidth)+"px";

                     rightImg.style.top = r/left.offsetHeight*(right.offsetHeight-rightImg.offsetHeight)+"px";

                 }

             }

             //离开事件

             left.onmouseout = function () {

                 right.style.display = 'none';

             }

         }

     </script>