HTML5网页设计

图片效果

jQuery实现自动缩放图片

时间:2014-11-28 10:40来源:网络作者:未知点击:
文章中经常会出现图片宽度超出页面设计宽度,可能导致页面错位或图片不能完整显示,这就需要进行判断并实现图片等比缩小解决问题。 代码如下:

文章中经常会出现图片宽度超出页面设计宽度,可能导致页面错位或图片不能完整显示,这就需要进行判断并实现图片等比缩小解决问题。

代码如下(先导入jquery库文件):
 

    $(window).load(function(){ 
    /* jQuery方法实现自动缩放图片 beta2 by zwwooooo */ 
        var img_cont=($('.post').find('img')).length; //查找并计算文章里面的图片个数,根据自己主题写选择器 
        if (img_cont != 0) { //做个判断,没有图片就不需要了 
            var maxwidth=600; //定义图片最大宽度,超过此宽度的图片自动缩为 maxwidth 值 
            var maxwidth_value=maxwidth+'px'; 
            for (var i=0;i<=img_cont-1;i++) { 
                var max_width=$('.post img:eq('+i+')'); 
                if (max_width.width() > maxwidth) { 
                    max_width.addClass('max_width_img').removeAttr("width").removeAttr("height").css({"cursor":"pointer","width":maxwidth_value,"height":"auto"}); 
                } 
            } 
        } 
    }); 

上一篇:上一篇:jquery控制图片最大显示宽度 上一篇:下一篇:CSS3鼠标滑过图片放大展示效果
阅完本篇文章?您还可以: 收藏本文 文章挑错 朋友推荐