zoukankan      html  css  js  c++  java
  • 页面中所有图片width、height大小批量设置

    须加载jQuery库

    代码一:

    <script type="text/javascript"> 
        var setNewsImg = function(obj){ 
            $(obj).find('img').each(function(i){ 
                var imgw = $(this).width(); 
                var imgh = $(this).height(); 
                var scale=1; 
                if(imgw>634){ 
                    scale = 634/imgw; 
                    console.log(scale);
                    $(this).height(scale*imgh); 
                    $(this).width(scale*imgw); 
                } 
            }); 
        }
    </script> 
     
    <script>
    //调用 
    $(function(){ 
        setNewsImg('.news-img'); 
    });
    </script>

    代码二:

    $(window).bind("load", function() { 
        // 图片修改大小 
        $('#imglist img').each(function() { 
            var maxWidth = 120; //初始化最大显示宽度
            var maxHeight = 120; //初始化最大显示高度
            var ratio = 0; 
            var width = $(this).width(); 
            var height = $(this).height(); 
    
            if(width > maxWidth){ 
                ratio = maxWidth / width; 
                $(this).css("width", maxWidth); 
                $(this).css("height", height * ratio); 
                height = height * ratio; 
            } 
    
            if(height > maxHeight){ 
                ratio = maxHeight / height; 
                $(this).css("height", maxHeight); 
                $(this).css("width", width * ratio); 
                width = width * ratio; 
            } 
        }); 
    });

    代码三:

    <script>
        $(function(){
            $(".daima img").each(function(){
                maxWidth =700;
                ratio = 0;
                width = $(this).width();
                height = $(this).height();
                if(width > maxWidth){
                    ratio = maxWidth / width;
                    $(this).width(maxWidth);
                    height = height * ratio;
                    $(this).height(parseInt(height));
                }
            });
        });
    </script>

    代码四:

    <script>
    $('#content').find('img').each(function(){
        var img = this;
        if (img.width > 600) {
            img.style.width = "600px";
            img.style.height = "auto";
            //$(img).removeAttr('height');
            var aTag = document.createElement('a');
            aTag.href = img.src;
            aTag.target="_blank";
            $(aTag).addClass('bPic').insertAfter(img).append(img).lightBox(options);
        }
    });
    </script>
  • 相关阅读:
    Java中断机制
    RPC原理
    synchronized和ReentrantLock的区别
    dubbo入门
    Zookeeper入门
    分布式事务
    Mysql索引会失效的几种情况
    java代码执行过慢的问题定位
    持续集成
    Mycat 数据库分库分表中间件
  • 原文地址:https://www.cnblogs.com/zhouwanqiu/p/9257244.html
Copyright © 2011-2022 走看看