jQuery商品图片放大全屏查看

1、新建html文档。

2、书写hmtl代码。<div class="page"> <h1>Smooth Products</h1> <div class="sp-loading"><img src="images/sp-loading.gif"><br>  LOADING IMAGES</div> <div class="sp-wrap"> <a href="images/1.jpg"><img src="images/1_tb.jpg"></a> <a href="images/2.jpg"><img src="images/2_tb.jpg"></a> <a href="images/3.jpg"><img src="images/3_tb.jpg"></a> <a href="images/4.jpg"><img src="images/4_tb.jpg"></a> <a href="images/5.jpg"><img src="images/5_tb.jpg"></a> <a href="images/6.jpg"><img src="images/6_tb.jpg"></a> </div> <ul>  <li>Easy to use</li>  <li>Easy to style</li>  <li>Responsive</li>  <li>Handles different image sizes</li>  <li>'Quick zoom' on hover with mouse</li>  <li>Handles multiple instances on one page</li> </ul></div>

3、书写css代码。<style>.page { padding: 5px 30px 30px 30px; max-width: 800px; margin: 0 auto; font-family: "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif; background: #fff; color: #555; }img { border: none; }a:link, a:visited { color: #F0353A; }a:hover { color: #8C0B0E; }ul { overflow: hidden; }pre { background: #333; padding: 10px; overflow: auto; color: #BBB7A9; }.demo { text-align: center; padding: 30px 0 }.clear { clear: both; }</style>

4、书写并添加js代码。<script src="js/jquery.min.js"></script> <script src="js/smoothproducts.min.js"></script>

5、代码整体结构。

6、查看效果。