zoukankan      html  css  js  c++  java
  • 通过jquery使图片自动适应缩放到指定尺寸

    图片撑破页面,相信大家会有被困扰的时候,或许是以前,或许是现在,但不要紧了,jquery帮你两行代码就解决问题,让图片被受控制。

    代码如下:


    $(document).ready(function(){
    var ywidth = 500;//初始最大宽度
    $(”img”).each(function(){
       if($(this).width() > ywidth) {
        $(this).width(ywidth);
       }
    });});


    把它加到网页上立杆见影,让图片不在头痛。有的朋友可能会想查看大图,那没问题,再加几行代码,加个点击查看大图的效果。

    代码如下:

    $(document).ready(function(){
    var ywidth = 450;//初始最大宽度
    $(”img”).each(function(){
       if($(this).width() > ywidth) {
        $(this).width(ywidth);
        $(this).mouseover(function(){
         $(this).css(”cursor”,”hand”);
        });
        $(this).click(function(){
         window.location.href = $(this).attr(”src”);
        });
       }
    });
    });


    图片撑破容器是很煞风景的事情,不牵扯到后台生成缩略图的解决方法是在前端对于撑破容器的图片,指定width="100%",则图片会自动适应父容器的宽度。虽然难看了一点,但不失为一个经济且花费小的方法。
    用JS简单的实现思路就是遍历所有页面图片,对于宽度大于父元素的,添加width属性,当然根据需要还可以加上Lightbox之类的特效。

     

    attr(key,value) 为所有匹配的元素设置一个属性值。 相当于给key赋值如 $("img").attr("src","http://shop59466775.taobao.com/"); 即意为给img元素赋予图片地址

  • 相关阅读:
    微信小程序-----校园头条详细开发之注册登录
    微信小程序-----校园头条详细开发之首页
    day 99天
    day 98天
    day 97 VUE第一天
    day 96
    day 95天
    day 94 RestFramework序列化组件与视图view
    day 93 Restframwork
    day 92
  • 原文地址:https://www.cnblogs.com/glj1203/p/2017021.html
Copyright © 2011-2022 走看看