如何使用css translate实现平移
How to implement panning using css translate?
我试图在视口上实现平移,当鼠标在容器上拖动时,其内部的元素应该会移动,问题是每次我开始拖动时,元素都会重置到其第一个位置
此外,里面的元素继承了不应该发生的事件,因为单击时偏移量会发生变化。
http://jsfiddle.net/dML5t/7/
<div id=container>
<div id=move>
</div>
Javascript:
var obj = {startPositionX:0,startPositionY:0};
var scale=1.0;
var translate = {x:0,y:0};
$('#container').on("mousedown",function(e){
var container = $(this);
var move = $('#move');
console.log($('#container').offset().left, container.offset().top);
obj.startPositionX=e.offsetX+container.offset().left+20;
obj.startPositionY=e.offsetY+container.offset().top+30;
$(document).on("mousemove",function(e){
console.log("dragging", e.pageX-obj.startPositionX, e.pageY-obj.startPositionY);
translate.x=e.pageX-obj.startPositionX;
translate.y=e.pageY-obj.startPositionY;
$('#move').css('transform','scale('+scale+') translate('+translate.x+'px, '+translate.y+'px)');
});
});
$(document).on("mouseup",function(){
$(this).off("mousemove");
});
好吧,我终于做到了:
http://jsfiddle.net/dML5t/8/
var obj = {startPositionX:0,startPositionY:0}; //mouse position
var scale=1.0;
var translate = {x:0,y:0}; //element relative position
$('#container').on("mousedown",function(e){
var container = $(this);
var move = $('#move');
obj.startPositionX=e.pageX-translate.x;
obj.startPositionY=e.pageY-translate.y;
$(document).on("mousemove",function(e){
translate.x=e.pageX-obj.startPositionX;
translate.y=e.pageY-obj.startPositionY;
move.css('transform','scale('+scale+') translate('+translate.x+'px, '+translate.y+'px)');
});
});
$(document).on("mouseup",function(){
$(this).off("mousemove");
});
相关文章:
- 如何使用动画实现纸张推车
- 客户端服务器REST API captcha实现
- 偶尔结结巴巴地说“;堆叠的”;translate()上的转换(v4.0.0-alpha40)
- 如何实现此布局
- $translateProvider.useStaticFilesLoader的Angular Translate异步定
- Meteor忘记了密码的实现
- 使用Native Sockets在Android中实现WebSockets
- 在样板文件中实现Ajax
- instanceof是如何在JavaScript中实现的
- 如何正确实现Jquery多选小部件
- 实现一个建立在google.com之上的自定义搜索引擎
- 多个组件是如何实现的
- window.location使用jquery mobile实现chrome跳转
- 如何在OpenERP中实现网络摄像头
- Node.js使用Series函数(模式?)实现流控制时出现意外结果
- javascript加密实现,包括可信否认
- 实现比较方法的最佳实践是什么;s的比较类型是在运行时选择的
- 如何让程序员在javascript中实现正确的回调
- 如何使用自定义辅助对象(handler)实现嵌套的每个循环
- 如何使用css translate实现平移