js,jquery缩小加载的图片202005131907

Posted 2020-12-20 ラピスラズリ(Dawn)

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js,jquery缩小加载的图片202005131907相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title></title>
        <style type="text/css">
            
            div{
                position: absolute;
                min-width: 600px;
                min-height: 600px;
                width: 100%; 
                height: 100%;
                border: 1px solid black;
            }
            
            a{
                position: absolute;
                z-index: 10;
            }
            
            .td{
                /*width: 100%;
                height: auto;*/
                /*border: 1px solid lime;*/
            }
            
            .tr{
                
            }
            
            .table{
                /*border-spacing:0px 100px;
                border: 1px solid black;*/
            }
            
            img{
                
            }
            
        </style>
        <script type="text/javascript" src="js/jquery-1.12.4.js" ></script>
    </head>
    <body>
        <!--<div style="">
            <a href="#" class="clazz1">测试1</a>
        </div>-->
        
        <!--<span style="position: absolute; border: 1px solid lime; width: 100%; height: 100%;">
            
        </span>
        
        <span style="position: absolute; border: 1px solid lime; width: 100%; height: 100%;">
            
        </span>-->
        
        <!--<a href="#" style="top: 50px;">测试2</a>-->
        
        <!--<table class="table">
            <tr class="tr">
                <td class="td">123</td>
                <td class="td">456</td>
            </tr>
            <tr class="tr">
                <td class="td">789</td>
                <td class="td">101</td>
            </tr>
            <tr class="tr">
                <td class="td">202</td>
                <td class="td">303</td>
            </tr>
        </table>-->
            
         <img src="http://10.127.32.132:8080/topicSolutions/convertedPicFile/0.jpg">
            
        <script type="text/javascript">    
            
            var maxWidth = 100;
            var maxHeight = 200;
            
            zoomImage();
            
            function zoomImage(){
                $("img").each(function(){
                    var url = $(this).attr("src");
                    $(this).load(function(){
                        var w = $(this).css("width").substring(0, $(this).css("width").length - 2);
                        var h = $(this).css("height").substring(0, $(this).css("height").length - 2);
                        if(w > 0 && h > 0){
                            var rate = 0;
                            var width = 0;
                            var height = 0;
                            if(w > maxWidth){
                                rate = w / maxWidth;
                                w = maxWidth;
                                h = h / rate;
                            }
                            if(h > maxHeight){
                                rate = h / maxHeight;
                                h = maxHeight;
                                w = w / rate;
                            }
                            width = w;
                            height = h;
                            $(this).css({
                                "width": width + "px",
                                "height": height + "px"
                            });
                            $(this).parent().css({
                             "width": width + "px",
                             "height": height + "px"
                             });
                        }
                    });
                });
            }
            
            /*var text = "gxcfgd[IMAGE_BEGIN]D:/Resume/TopicSolutions/Picture/0.wmf[IMAGE_END]cgfffb[IMAGE_BEGIN]D:/Resume/TopicSolutions/Picture/1992.wmf[IMAGE_END]gcf1524fg";
            var reg = /\\[IMAGE_BEGIN\\]([^[I])+\\[IMAGE_END\\]/g;
            alert(text.match(reg));
            text.lastIndexOf()*/
            /*$(".clazz1").on("click", function(){
                alert(1);
            });*/
            
        </script>

    </body>
</html>

效果图

以上是关于js,jquery缩小加载的图片202005131907的主要内容，如果未能解决你的问题，请参考以下文章

插件jQuery.iviewer----图片浏览放大缩小全屏

怎么用js实现图片的缩小？

javascript高手请进！关于就js控制网页图片放大缩小的问题

jquery.swipebox.min如何在手机端双指放大缩小

VueJS 2：如何按顺序加载静态 JS？

jquery怎样实现动画的缩小？