Что в этом коде не так?
Все доброго времени суток. Подскажите пожалуйста, где ошибки и что не так с кодом, и как это исправить. Есть код сдвига по svg изображение. При прокрутки колесом и увеличении изображения с мощью этого кода, сдвигать можно только в право, в верх и в низ, а влево нельзя. Получается что нет возможности двигаться влево по изображению, и увидеть что там слева, можно только увеличив изображения до начальных размеров. Вот сам этот код отвевающий за сдвиг:
<script> var imgMover = {press: false, offX:0, offY:0,x0:0,y0:0,x1:0,y1:0}; $("#imgMove").bind("mousedown",function(e){ imgMover.x0 = e.clientX; imgMover.y0 = e.clientY; imgMover.press = true; e.preventDefault(); }); $(window).bind("mousemove",function(e){ if(!imgMover.press) return false; imgMover.x1 = imgMover.x0; imgMover.y1 = imgMover.y0; imgMover.x0 = e.clientX; imgMover.y0 = e.clientY; var offx = parseInt($("#moved").position().left) + parseInt(imgMover.x0 - imgMover.x1); var offy = parseInt($("#moved").position().top) + parseInt(imgMover.y0 - imgMover.y1); $("#moved").css({ "left": offx, "top": offy }); if($("#moved").position().top>0) $("#moved").css({"top":0}); if($("#moved").position().left>0) $("#moved").css({"left":0}); if($("#moved").position().top < -($("#moved").height() - $("#imgMove").height())) $("#moved").css({"top":-($("#moved").height() - $("#imgMove").height())}); if($("#moved").position().left < -($("#moved").width() - $("#imgMove").width())) $("#moved").css({"left":-($("#moved").width() - $("#imgMove").width())}); }); $(window).bind("mouseup",function(){ imgMover.press = false; }); </script> А это код отвевающий за зумирование: <script> var svgViewBoxWidth = 1910; var svgViewBoxHeight = 970; var test = 0; var theSvgElement = document.getElementById('main-svg'); var viewBox = theSvgElement.getAttribute('viewBox'); // Взял атрибут viewBox SVG. var viewBoxValues = viewBox.split(' '); // Создал массив из атрибутов viewBoxValues[0] = parseFloat(viewBoxValues[0]); viewBoxValues[1] = parseFloat(viewBoxValues[1]); viewBoxValues[2] = parseFloat(viewBoxValues[2]); viewBoxValues[3] = parseFloat(viewBoxValues[3]); document.onwheel = function(e) { e.preventDefault(); var delta = e.deltaY || e.detail || e.wheelDelta; test -= delta; viewBoxValues[2] += delta; viewBoxValues[3] += (~~(delta / 1.96)); if (test < 0) { viewBoxValues[2] = svgViewBoxWidth; viewBoxValues[3] = svgViewBoxHeight; test = 0; } if ((test == 1900) || (test > 1900)) { test = 1900; viewBoxValues[2] = 410; viewBoxValues[3] = 205; } xR = ((svgViewBoxWidth/viewBoxValues[2])*e.pageX - e.pageX)/(svgViewBoxWidth/viewBoxValues[2]); yR = (svgViewBoxHeight/viewBoxValues[3])*e.pageY - e.pageY; viewBoxValues[0] = xR.toFixed(2); viewBoxValues[1] = yR.toFixed(2); theSvgElement.setAttribute('viewBox', viewBoxValues[0] + " " + viewBoxValues[1] + " " + viewBoxValues[2] + " " + viewBoxValues[3]); }; </script> |
Часовой пояс GMT +3, время: 09:42. |