首页 > 特效插件 > 图像特效 >  点击图片缩放预览的jquery图片集代码正文

点击图片缩放预览的jquery图片集代码

特效介绍
jquery图片集代码
点击图片缩放预览的jquery图片集代码,鼠标移动到小图上会高亮显示,点击后会放大。点击大图就会收回。完美兼容IE6。
使用方法
第一步、在head区域引入<!--引入开始-->和<!--引入结束-->之间的代码
参数说明:
1baseCSS: {
2    width: '200px',   //图片集宽度
3    height: '104px'//图片集高度
4    padding: '0px'    //图片集每张图片间距
5}
第二步、在您的html文件里加入下面的代码:
01<div id="col">
02    <ul id="pg" class="thumb">
03        <li>
04            <img src="images/main_image1.jpg" alt="images1" />
05            <p>我爱模板网</p>
06        </li>
07        <li>
08            <img src="images/main_image2.jpg" alt="images2" />
09            <p>网站模板免费下载</p>
10        </li>
11        <li>
12            <img src="images/main_image3.jpg" alt="images3" />
13            <p>js特效</p>
14        </li>
15        <li>
16            <img src="images/main_image4.jpg" alt="images4" />
17            <p>jQuery导航栏</p>
18        </li>
19        <li>
20            <img src="images/main_image5.jpg" alt="images5" />
21            <p>js图片滚动</p>
22        </li>
23        <li>
24            <img src="images/main_image6.jpg" alt="images6" />
25            <p>网站源码免费下载</p>
26        </li>
27        <li>
28            <img src="images/main_image7.jpg" alt="images7" />
29            <p>js图片滚动</p>
30        </li>
31        <li>
32            <img src="images/main_image8.jpg" alt="images8" />
33            <p>jQuery幻灯片</p>
34        </li>
35        <li>
36            <img src="images/main_image9.jpg" alt="images9" />
37            <p>网站模板免费下载</p>
38        </li>
39    </ul>
40</div>