js,jquery缩小加载的图片202005131907

2021-03-07 18:28

阅读:425

标签: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>
        
        
        
        
        
        
        
            
         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


评论


亲,登录后才可以留言!