LayUI Photos实现图片查看效果并鼠标放大缩小与旋转功能

l&WK

已于 2023-05-05 14:19:32 修改

阅读量3.3k

点赞数

分类专栏： JS 文章标签： layui javascript 前端

于 2022-12-20 14:33:19 首次发布

本文链接：https://blog.csdn.net/lwkliuwenkang/article/details/128384154

版权

JS 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

$('查看图片按钮').on('click',function(){
        var id = $(this).attr('data-id');
        var name = $(this).attr('data-name');
        var url = $(this).attr('data-url');
        OpenPic(id ,name,url);
});

    //查看图片
function OpenPic(id,name,url){
	//组装图片数据
	var photoJson = {
		"title": "", //相册标题
		"id": id, //相册id
		"start": 0, //初始显示的图片序号，默认0
		"data": [   //相册包含的图片，数组格式
					{
						"alt": name,
						"pid": id, //图片id
						"src": url, //原图地址
						"thumb": url //缩略图地址
					}
				]
		};
	
	layui.use(['layer'], function () {
		var layer = layui.layer;
		var num;
		layer.photos({
			photos: photoJson,
			anim: 5, //0-6的选择，指定弹出图片动画类型，默认随机
			//closeBtn: 1,//开启关闭按钮
			//添加旋转按钮
			tab: function () {
				num = 0;
                $("#layui-layer-photos").append(
                //'/Content/images/TowardsLeftRotate.png'(逆时针)
                //'/Content/images/TowardsRightRotate.png'(顺时针)
                //'/Content/images/rotate.png'(双向旋转)
                `<div class="pootosIcon" style="position:absolute;width:100%;text-align:center;bottom:0px;cursor:pointer;">
					<img src="/Content/images/rotate.png" style="width:32px;height:32px;">
                 </div>`);
            },
            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 });
					//设置图片外div宽高
					$("#layui-layer-photos").css({ width: w, height: h });
					//设置图片宽高
					$("#layui-layer-photos>img").css({ width: w, height: h });
				});
				//点击旋转按钮旋转图片
				$(document).on("click", ".pootosIcon img", function (e) {
                     //+90为向右旋(顺时针)，-90为向左旋(逆时针)
                     num = (num + 90) % 360;
                     //旋转之后背景色设置为黑色，不然在旋转长方形图片时会留下白色空白
	                 //$(".layui-layer.layui-layer-page.layui-layer-photos").css('background', 'black');
                     $("#layui-layer-photos").css('transform', 'rotate(' + num + 'deg)');
                 });
              },
              //销毁回调
              end: function () { }
         });
    });
});