masyarakat Belajar Perpustakaan Alatan Masa lapang
cari
Melayu
Rumah > hujung hadapan web > tutorial js > jquery实现图片按比例缩放示例_jquery

jquery实现图片按比例缩放示例_jquery

WBOY
Lepaskan： 2016-05-16 16:42:47
asal
1073 orang telah melayarinya
  <html> 
    <title></title> 
    <head></head> 
    <style> 
      .thumbnail{overflow:hidden;width:400px;height:240px;} 
    </style> 
    <script src="http://code.jquery.com/jquery-1.4.1.min.js"></script> 
    <script language="javascript"> 
      $(function(){ 
        /* 图片不完全按比例自动缩小 by zwwooooo */ 
          $('#content div.thumbnail img').each(function(){ 
            var x = 400; //填入目标图片宽度 
            var y = 240; //填入目标图片高度 
            var w=$(this).width(), h=$(this).height();//获取图片宽度、高度 
            if (w > x) { //图片宽度大于目标宽度时 
              var w_original=w, h_original=h; 
              h = h * (x / w); //根据目标宽度按比例算出高度 
              w = x; //宽度等于预定宽度 
              if (h < y) { //如果按比例缩小后的高度小于预定高度时 
                w = w_original * (y / h_original); //按目标高度重新计算宽度 
                h = y; //高度等于预定高度 
              } 
            } 
            $(this).attr({width:w,height:h}); 
          }); 
      }); 
    </script> 
    <body> 
    <div id="content"> 
      <div id="thumbnail" class="thumbnail" > 
        <img  id="web" src="./midle.png"/ alt="jquery实现图片按比例缩放示例_jquery" > 
      </div> 
     </div> 
    </body> 
  </html>
Salin selepas log masuk
Label berkaitan：
Zum
sumber：php.cn
Artikel sebelumnya：IE8下Jquery获取select选中的值post到后台报错问题_jquery Artikel seterusnya：jquery实现人性化的有选择性禁用鼠标右键_jquery
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Isu terkini
Bolehkah PHPUnit membandingkan dengan ketat dua tatasusunan yang mengandungi objek menggunakan assert equals? Saya mempunyai dua tatasusunan objek. Saya ingin menguji sama ada kedua-dua tatasusunan in...
daripada 2024-04-05 13:35:37
0
1
1382
Bagaimana untuk mendapatkan semula nilai baris yang tidak dipilih dalam jadual data HTML menggunakan jquery Saya cuba mendapatkan nilai semua baris di mana butang tidak diklik. Sebagai contoh, apabi...
daripada 2024-04-05 09:26:49
0
1
1418
isu jQuery.remove() dan array.splice(). Jadi saya mempunyai halaman yang mempunyai senarai item dan senarai beli-belah. Jika anda ...
daripada 2024-04-04 17:21:35
0
1
347
Sambungkan akaun anda dan dapatkan token anda dengan mudah dengan butang mudah DocuSign Saya menggunakan versi sdk dan hampir mendapat apa yang saya mahu, tetapi masih belum jela...
daripada 2024-04-04 15:46:02
0
1
396
Saya membina tiga halaman menggunakan React, setiap halaman mempunyai fail css sendiri dan hanya ada satu fail css untuk setiap halaman Saya sedang mengusahakan tiga halaman ini: App.js mempunyai dua butang, apabila anda mengk...
daripada 2024-04-04 10:07:16
0
1
394
Topik-topik yang berkaitan
Lagi>
Cadangan popular
Tutorial Popular
Lagi>
Tutorial berkaitan
Cadangan popular
Kursus terkini
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan