• 点击图片实现图片放大:


    <div id="outerdiv" style="position:fixed;top:0;left:0;background:rgba(0,0,0,0.7);z-index:2;100%;height:100%;display:none;">
    <div id="innerdiv" style="position:absolute;">
    <img id="bigimg" style="border:5px solid #fff;" src="" />
    </div>
    </div>
    
    
    //图片点击事件
    $(".bigImg").click(function () {
    var _this = $(this);//将当前的图片元素作为_this传入函数
    imgShow("#outerdiv", "#innerdiv", "#bigimg", _this);
    });
    
    
    function imgShow(outerdiv,innerdiv,bigimg,_this){
    
    //获得当前图片的src属性
    var src=_this.attr("src");
    
    //将当前的图片路径赋值给bigimg
    $(bigimg).attr("src",src);
    
    //获取当前点击图片的真实大小,并显示弹出层及大图
    $("<img/>").attr("src",src).load(function(){
    
    var windowW=$(window).width();//获取当前窗口的宽度    
    
    var windowH=$(window).height();//获取当前窗口的高度
    
    var realWidth=this.width;//获取图片的真实宽度
    
    var realHeight=this.height;//获取图片真实高度
    
    var imgWidth ,imgHeight;//缩放后的宽和高
    
    var scale=0.8;//缩放尺寸,当图片真实宽度和高度大于窗口宽度和高度时进行缩放
    
    //判断图片高度
    if(realHeight>windowW*scale){
    
    imgHeight=window*scale;//如大于窗口高度,图片高度进行缩放
    
    imgWidth =imgHeight/realHeight*realWidth;//等比例缩放宽度
    
    if(imgWidth>windowW*scale){//如果宽度还是大于窗口宽度 再次进行缩放
    
    imgWidth=windowW*scale;
    
    }
    
    }else if(realWidth>windowW*scale){//如果图片高度合适,判断图片宽度
    
    imgWidth=windowW*scale;//如果大于窗口宽度,对图片宽度进行缩放
    
    imgHeight=imgWidth/realWidth*realHeight;//等比例缩放高度
    
    }else{
    
    imgWidth=realWidth;
    
    imgHeight=realHeight;
    }
    
    $(bigimg).css("width",imgWidth)//以最终的宽度对图片缩放
    
    var w=(windowW-imgWidth)/2;//计算图片与窗口左边距
    
    var h=(windowH-imgHeight)/2;//计算图片与窗口上边距
    
    $(innerdiv).css({"top":h,"left":w});//设置#innerdiv的top和left属性
    
    $(outerdiv).fadeIn("fast");//淡入显示#outerdiv及图片
    
    });
    
    $(outerdiv).click(function(){//再次点击淡出消失弹出层
    
    $(this).fadeOut("fast");
    
    });
    }    
    
    https://blog.csdn.net/qq_36375934/article/details/78952485
  • 相关阅读:
    wpf中DataGrid自定义验证(包含BindingGroup)
    WPF博客地址分享
    ComboBox在WPF中的绑定示例:绑定项、集合、转换,及其源代码
    【windows phone】CollectionViewSource的妙用
    WPF之Binding深入探讨
    正确理解WPF中的TemplatedParent
    继续聊WPF——获取ComboBox中绑定的值
    WPF触发器(Trigger、DataTrigger、EventTrigger)
    jQuery和javaScript页面加载完成时触发的事件
    jQuery对象和dom对象的转换
  • 原文地址:https://www.cnblogs.com/HQ0422/p/11439286.html
Copyright © 2020-2023  润新知