首页 > 代码库 > 焦点图的制作 插件工具

焦点图的制作 插件工具

2024-09-26 19:05:39   215人阅读

 1 @charset "utf-8";
 2 /* CSS Document */
 3 
 4 *{
 5     margin:0;
 6     padding:0;
 7     font-size:12px;
 8 }
 9 .ad{
10     height:450px;
11     overflow:hidden;
12     width:800px;
13     margin: 20px auto;
14     }
 1 <!doctype html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>焦点图制作</title>
 6 <link href="focus.css" rel="stylesheet" type="text/css">
 7    <!--焦点图设置-->
 8  <script src="http://demo.jb51.net/js/myfocus/content/templates/myfocus/js/myfocus-2.0.1.min.js"></script>
 9  <script type="text/javascript">
10         myFocus.set({
11            //此处id与后面一致
12             id:‘picBox‘  
13                });
14    </script>
15 </head>
16 
17 <body>
18 <!--此处id必须为picBox，与前面焦点图初始化的id一致--> 
19              <div class="ad" id="picBox"> 
20                       <!--当图片没加载出来时的缓冲提示图-->
21                       <div class="loading"><img src="http://img.mukewang.com/53edad8c000175cb00300029.jpg" 
22                             alt=   "Loading..."></div>
23                   <!--图片列表外面必须有一个div， 其class必须为pic-->
24                   <div class="pic">
25                      <ul>
26                         <li><img src="http://img.mukewang.com/53ad2498000174af13660768.jpg"                          alt=""></li>
27                         <li><img src="53ad26320001289e13660768.jpg"                        alt=""></li>
28                         <li><img src="http://img.mukewang.com/53ad25df0001300613660768.jpg"                          alt=""></li>
29                         <li><img src="http://img.mukewang.com/53ad26010001ac1113660768.jpg"                           alt=""></li>
30                         <li><img src="http://img.mukewang.com/53ad26170001a86013660768.jpg"                           alt=""></li>
31                      </ul>
32                   </div>
33              </div><!--ad结束--> 
34 </body>
35 </html>

用插件有一个问题，图片大小变小时，会只显示一部分图片，没有将图片按比例缩小，后面解决这个问题。

焦点图的制作 插件工具


联系
我们