js,jquery缩小加载的图片202005131907

时间：2020-05-13 20:16:50 阅读：77 评论：0 收藏：0 [点我收藏+]

标签：maxheight reg text var ring doc pre length har

<!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

标签：maxheight reg text var ring doc pre length har

原文地址：https://www.cnblogs.com/JimmySeraph/p/12884321.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行