jquery css3平移,jQuery缩放和平移插件smartZoom

jQuery缩放和平移插件在一个给定的DOM元素的平滑缩放和平移。该插件使用CSS3过渡适用于手机和PC兼容的Web浏览器。 变焦是通过在PC和移动设备上的触摸事件的鼠标事件(滚动和点击)启用。

Zoom :

$("#smallZoomImage").smartZoom(); // appel du plugin de zoom

$("#topPositionMap,#leftPositionMap,#rightPositionMap,#bottomPositionMap").bind("click",moveButtonClickHandler);

$("#zoomInButton,#zoomOutButton").bind("click", zoomButtonClickHandler);

function zoomButtonClickHandler(e){

var scaleToAdd = 0.8;

if(e.target.id == "zoomOutButton")

scaleToAdd = -scaleToAdd;

$("#smallZoomImage").smartZoom("zoom", scaleToAdd);

}

function moveButtonClickHandler(e){

var pixelsToMoveOnX = 0;

var pixelsToMoveOnY = 0;

switch(e.target.id){

case "leftPositionMap":

pixelsToMoveOnX = 50;

break;

case "rightPositionMap":

pixelsToMoveOnX = -50;

break;

case "topPositionMap":

pixelsToMoveOnY = 50;

break;

case "bottomPositionMap":

pixelsToMoveOnY = -50;

break;

}

$("#smallZoomImage").smartZoom("pan", pixelsToMoveOnX, pixelsToMoveOnY);

}

相关链接