Rumah > hujung hadapan web > tutorial css > 如何用Bootstrap实现图片弹出放大

如何用Bootstrap实现图片弹出放大

PHPz
Lepaskan: 2018-10-15 15:28:04
asal
7851 orang telah melayarinya
<td>
<center>
<img style="height: 100px;width: 100px;" onmouseover="this.style.cursor=&#39;pointer&#39;;this.style.cursor=&#39;hand&#39;" onmouseout="this.style.cursor=&#39;default&#39;"  src="<?php echo $v[&#39;pic_detail&#39;];?>" onclick="javascript:showimage('<?php echo $v[&#39;pic_detail&#39;];?>');" /></center></td>
  <p id="ShowImage_Form" class="modal hide">         
         <p class="modal-header">
             <button data-dismiss="modal" class="close" type="button"></button>
         </p>
           <p class="modal-body">
            <p id="img_show">
            </p>
        </p>
    </p>
Salin selepas log masuk

实现JS:

//显示大图    
   function showimage(source)
     {
         $("#ShowImage_Form").find("#img_show").html("<image src=&#39;"+source+"&#39; class=&#39;carousel-inner img-responsive img-rounded&#39; />");
         $("#ShowImage_Form").modal();
     }
Salin selepas log masuk

实现效果:

image

【相关视频推荐:Bootstrap教程

Atas ialah kandungan terperinci 如何用Bootstrap实现图片弹出放大. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan:
sumber:php.cn
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
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan