图片的缩放与拖拽

这个图片的缩放的流畅度还是很好的，需要引入touch.js,好像是百度团队那边写的

<script src="./js/touch.min.js" type="text/javascript"></script>

$(function() {
//放大缩小
var scaleVal = 1;
var initialScale = scaleVal || 1;
var currentScale;
touch.on('.swiper-mast img', 'pinch', function (ev) {
currentScale = ev.scale - 1;
currentScale = initialScale + currentScale;
scaleVal = currentScale;
if(scaleVal < 0.5){
scaleVal = 0.5;
}
var transformStyle = 'scale(' + scaleVal + ')';
$(this).css("transform", transformStyle).css("-webkit-transform", transformStyle);
});
touch.on('.swiper-mast img', 'pinchend', function (ev) {
initialScale = currentScale;
scaleVal = currentScale;
});
});
拖拽目标元素
$(function() {
touch.on('.swiper-mast img', 'touchstart', function(ev) {
ev.preventDefault();
});
var dx, dy;
touch.on('.swiper-mast img', 'drag', function(ev) {
dx = dx || 0;
dy = dy || 0;
var offx = dx + ev.x;
var offy = dy + ev.y;
if(offx < 0){
offx = 0;
}
if(offy < 0){
offy = 0;
}
$(this).css("left", offx+'px').css("top", offy+'px');
// alert(offx);
// alert(offy);
});
touch.on('.swiper-mast img', 'dragend', function(ev) {
dx += ev.x;
dy += ev.y;
});
});

html代码：

<div class="swiper-mast">
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="./img/libai.jpg" alt="">
</div>
<div class="swiper-slide">
<img src="./img/libai.jpg" alt="">
</div>
<div class="swiper-slide">
<img src="./img/libai.jpg" alt="">
</div>
<div class="swiper-slide">
<img src="./img/libai.jpg" alt="">
</div>
<div class="swiper-slide">
<img src="./img/libai.jpg" alt="">
</div>
</div>
<div class="swiper-pagination"></div>
</div>
</div>

网址：(https://ptestjava.liby.com.cn/wechat/goodsdetail.html)

最后

以上就是刻苦百合为你收集整理的图片的缩放与拖拽的全部内容，希望文章能够帮你解决图片的缩放与拖拽所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。