layui 弹出图片 滚轮放大缩小

4 篇文章 0 订阅
function openImg(name,url) {
    if(name!=""){
        //let names = name.split(",");
        let urls = url.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参数)
        });
    }


}

滚轮放大缩小照片


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(){ //销毁回调

    }
    });


}

  • 4
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 4
    评论
在初始状态下,VSCode并不具备鼠标滚轮放大界面的功能,但可以通过手动配置来实现。有两种方法可以实现鼠标滚轮放大缩小的功能: 方法一:通过配置页面进行设置 1. 打开VSCode,在顶部菜单中选择“文件” -> “首选项” -> “设置”。 2. 在搜索框中输入“ZOOM”,然后选择“按住Ctrl键并滚动鼠标滚轮时编辑器字体大小进行缩放”。 3. 这样设置后,你就可以通过按住Ctrl键并滚动鼠标滚轮放大缩小界面的字体大小了。 方法二:通过修改settings.json文件进行设置 1. 打开VSCode,在顶部菜单中选择“文件” -> “首选项” -> “设置”。 2. 在左侧导航栏中选择“用户” -> “扩展” -> “JSON”。 3. 在settings.json文件中添加一行代码:"editor.mouseWheelZoom": true。 4. 保存文件后,你就可以通过鼠标滚轮放大缩小界面的字体大小了。 希望以上方法能帮助到你实现在VSCode中使用鼠标滚轮进行放大缩小的功能。<span class="em">1</span> #### 引用[.reference_title] - *1* [VSCode如何鼠标滚轮放大界面](https://blog.csdn.net/qq_44629109/article/details/125928459)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 100%"] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

yzhSWJ

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值