zoukankan      html  css  js  c++  java
  • 点击图片等比缩放

            //图片切换展示
            function changeInfo(tag) {
                var tmp = $(tag).width();
                console.log(tmp);
                if (tmp > 90) {
                    ImgZoom(tag, 90);
                } else {
                    $(tag).css("width", "").css("height", "");//删除指定宽度 采用原始宽度
                    ImgZoom(tag, 1000);
                }
            }
    
    
            //图片等比缩放
            function ImgZoom(tag, w) {
    
                var img_w = $(tag).width();//图片宽度
                var img_h = $(tag).height();//图片高度
    
                if (img_w > w) {//如果图片宽度超出指定最大宽度
                    var height = (w * img_h) / img_w; //高度等比缩放
                    $(tag).css({
                        "width": w, "height": height
                    });//设置缩放后的宽度和高度
                }
    
            }
    
    
            //加载时全部图片等比缩放
            function AllImgZoom() {
    
                var w = 90;//设置最大宽度,也可根据img的外部容器 而动态获得,比如:$("#demo").width();
                $("img").each(function () {//如果有很多图片,使用each()遍历
                    var img_w = $(this).width();//图片宽度
                    var img_h = $(this).height();//图片高度
    
                    var height = (w * img_h) / img_w; //高度等比缩放
    
                    $(this).css({
                        "width": w, "height": height
                    });
    
                });
            }
    <img onclick="changeInfo(this)" src=" http://116.6.55.44:10006/Attachment/Case/50e21e0a-bf2c-4370-8d3a-4e40ca8316e1.jpg" style=" 90px;">
  • 相关阅读:
    站立会议(2)
    站立会议(1)
    学习进度条
    四则运算2
    学习进度条
    IDEA用maven创建springMVC项目和配置
    Itellij Idea全局搜索
    Spring各个jar包作用
    IDEA一定要改的八条配置
    Nio使用Selector客户端与服务器的通信
  • 原文地址:https://www.cnblogs.com/zyx321/p/9145502.html
Copyright © 2011-2022 走看看