欢迎光临运城市黑马视觉品牌官网,开启你的互联网营销之旅!
新闻中心 网络推广 网站建设 优化推广

用JS自动获取宽度并赋值给图片

时间:2019-09-17   来源:运城市网站建设

在网站开发的过程中,有时候为了做适应所有的终端设备,让图片根据终端的大小而改变。我们可以使用JS来实现。

 
          <!--产品列表-->
      <section class="yd_wap_news3 w_wap_news2">
        <h2>
          <i>
          </i>
          <em>
            <a href="/qiudong/" title="产品展示">更多</a></em>产品展示</h2>
        <ul>
        
          <li>
            <a href="/jack/52.html" target="_self">
              <img src="/static/loading.gif"  data-src=""/style/img/5ccfe345549f7.jpg" alt="" class="yl_auto" >
              <span>测试产品</span></a>
          </li>
        
          <li>
            <a href="/jack/51.html" target="_self">
              <img src="/style/img/5ccfe345549f7.jpg" alt="" class="yl_auto" >
              <span>测试产品</span></a>
          </li>
        
          <li>
            <a href="/jack/50.html" target="_self">
              <img src="/style/img/5ccfe345549f7.jpg" alt="" class="yl_auto" >
              <span>测试产品</span></a>
          </li>
        
          <li>
            <a href="/jack/49.html" target="_self">
              <img src="/style/img/5ccfe345549f7.jpg" alt="" class="yl_auto" >
              <span>测试产品</span></a>
          </li>
        
          <li>
            <a href="/jack/48.html" target="_self">
              <img src="/style/img/5ccfe345549f7.jpg" alt="" class="yl_auto" >
              <span>测试产品</span></a>
          </li>
        
          <li>
            <a href="/jack/47.html" target="_self">
              <img src="/style/img/5ccfe345549f7.jpg" alt="" class="yl_auto" >
              <span>测试产品</span></a>
          </li>
        
          <li>
            <a href="/jack/46.html" target="_self">
              <img src="/style/img/5ccfe345549f7.jpg" alt="" class="yl_auto" >
              <span>测试产品</span></a>
          </li>
        
          <li>
            <a href="/jack/45.html" target="_self">
              <img src="/style/img/5ccfe345549f7.jpg"" alt="" class="yl_auto" >
              <span>测试产品</span></a>
          </li>
        
         
        </ul>
     
          <!--产品列表-->

比如说这样一组产品列表。


我们给他加这么一段JS,大概意思就是:通过获取yd_wap_news的宽度,然后设置width等于它的0.485,差不多是一半的值,让高度值也等于这个值。然后并将这个值赋给了yl_auto这个类,也就是给了图片。

   <script>
         var all_pm = $(".yd_wap_news3").width();
          width = all_pm * 0.485;
          height = width / 1;
          w = width.toString();
          w = w + "px";
          h = height.toString();
          h = h + "px";
          $(".yl_auto").css("width", w);
          $(".yl_auto").css("height", h);
          </script>
      </section>


醉后我们可以得到:

  
      <!--产品列表-->
      <section class="yd_wap_news3 w_wap_news2">
        <h2>
          <i>
          </i>
          <em>
            <a href="/qiudong/" title="产品展示">更多</a></em>产品展示</h2>
        <ul>
        
          <li>
            <a href="/jack/52.html" target="_self">
              <img src="/static/loading.gif"  data-src=""/style/img/5ccfe345549f7.jpg" alt="" class="yl_auto" style="width: 254.14px; height: 254.14px;">
              <span>测试产品</span></a>
          </li>
        
          <li>
            <a href="/jack/51.html" target="_self">
              <img src="/style/img/5ccfe345549f7.jpg" alt="" class="yl_auto" style="width: 254.14px; height: 254.14px;">
              <span>测试产品</span></a>
          </li>
        
          <li>
            <a href="/jack/50.html" target="_self">
              <img src="/style/img/5ccfe345549f7.jpg" alt="" class="yl_auto" style="width: 254.14px; height: 254.14px;">
              <span>测试产品</span></a>
          </li>
        
          <li>
            <a href="/jack/49.html" target="_self">
              <img src="/style/img/5ccfe345549f7.jpg" alt="" class="yl_auto" style="width: 254.14px; height: 254.14px;">
              <span>测试产品</span></a>
          </li>
        
          <li>
            <a href="/jack/48.html" target="_self">
              <img src="/style/img/5ccfe345549f7.jpg" alt="" class="yl_auto" style="width: 254.14px; height: 254.14px;">
              <span>测试产品</span></a>
          </li>
        
          <li>
            <a href="/jack/47.html" target="_self">
              <img src="/style/img/5ccfe345549f7.jpg" alt="" class="yl_auto" style="width: 254.14px; height: 254.14px;">
              <span>测试产品</span></a>
          </li>
        
          <li>
            <a href="/jack/46.html" target="_self">
              <img src="/style/img/5ccfe345549f7.jpg" alt="" class="yl_auto" style="width: 254.14px; height: 254.14px;">
              <span>测试产品</span></a>
          </li>
        
          <li>
            <a href="/jack/45.html" target="_self">
              <img src="/style/img/5ccfe345549f7.jpg"" alt="" class="yl_auto" style="width: 254.14px; height: 254.14px;">
              <span>测试产品</span></a>
          </li>
        
         
        </ul>
        
      </section>
          <!--产品列表-->

看到变化了吗?强加了STYLE将给了宽度和高度。

本文标签: 网站开发
新闻推荐
坪地高端品牌网站开发哪个公司好
坪地高端品牌网站开发哪个公司好

坪地高端品牌网站开发哪个公司好管理物业分布的福田保税区、盐田港保税物流园区、坪山新区,以及滨海新区和...

光明网站制作公司
光明网站制作公司

光明网站制作公司日常服务站正常运行;站备份,站数据,上传的,产品,图片等的发展;站系统,以确保安全和...

观澜企业网站建设哪个好
观澜企业网站建设哪个好

观澜企业网站建设哪个好页面设计不能偏离的原理是性。时代,发生了太多类似的情况。在许况下,页认识不足。...

光明手机网站开发哪家好
光明手机网站开发哪家好

光明手机网站开发哪家好在构建一种多语言的语言时,要求站的语言问题,但要确保文本的语法符合海外客户的阅...

在线沟通
点我即可
对话
15899750475
手机
微信扫一扫

编辑 装修 价格 托管 实力 流量 搜索引擎 服务器 标准 上线 业务

微信
Top