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;">
  • 相关阅读:
    一转眼,十年间~~~
    怎样安装PHPnow,并开始使用?
    js的事件类型
    ie兼容性问题 前传
    外层div撑不开的解决办法
    CSS3 新属性搜罗整理
    webApp学习之路
    花式使用CSS3 transition
    20种新颖的按钮风格和效果【附源码】
    酷酷的文本效果
  • 原文地址:https://www.cnblogs.com/zyx321/p/9145502.html
Copyright © 2011-2022 走看看