短视频app源码,点击查看图片,双指放大
短视频app源码,点击查看图片,双指放大实现的相关代码
function openImgMain(value) {
let urls = value.split(",");
var datas = new Array();
for (let i = 0; i < urls.length; i++) {
var obj = new Object();
// obj.alt = name;
obj.pid = i;
obj.src = "/files/" + urls[i];
obj.thumb = "/files/" + urls[i];
datas.push(obj);
}
var json = {
"title": "监控图片", //相册标题
"id": 123, //相册id
"start": 0, //初始显示的图片序号,默认0
"data": datas
};
layer.photos({
photos: json
, anim: 5 //0-6的选择,指定弹出图片动画类型,默认随机(请注意,3.0之前的版本用shift参数)
, closeBtn: "1"
,success: function() {
//以鼠标位置为中心的图片滚动放大缩小
$(document).on("mousewheel",".layui-layer-photos",function(ev){
var oImg = this;
var ev = event || window.event;//返回WheelEvent
//ev.preventDefault();
var delta = ev.detail ? ev.detail > 0 : ev.wheelDelta < 0;
var ratioL = (ev.clientX - oImg.offsetLeft) / oImg.offsetWidth,
ratioT = (ev.clientY - oImg.offsetTop) / oImg.offsetHeight,
ratioDelta = !delta ? 1 + 0.1 : 1 - 0.1,
w = parseInt(oImg.offsetWidth * ratioDelta),
h = parseInt(oImg.offsetHeight * ratioDelta),
l = Math.round(ev.clientX - (w * ratioL)),
t = Math.round(ev.clientY - (h * ratioT));
$(".layui-layer-photos").css({
width: w, height: h
,left: l, top: t
});
$("#layui-layer-photos").css({width: w, height: h});
$("#layui-layer-photos>img").css({width: w, height: h});
});
}
,end: function(){ //销毁回调
}
});
}
以上就是短视频app源码,点击查看图片,双指放大实现的相关代码, 更多内容欢迎关注之后的文章