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

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

特效介绍
jquery图片集代码
点击图片缩放预览的jquery图片集代码,鼠标移动到小图上会高亮显示,点击后会放大。点击大图就会收回。完美兼容IE6。
使用方法
第一步、在head区域引入<!--引入开始-->和<!--引入结束-->之间的代码
参数说明:
baseCSS: {
    width: '200px',   //图片集宽度
    height: '104px',  //图片集高度
    padding: '0px'    //图片集每张图片间距
}
第二步、在您的html文件里加入下面的代码:
<div id="col">
    <ul id="pg" class="thumb">
        <li>
            <img src="images/main_image1.jpg" alt="images1" />
            <p>我爱模板网</p>
        </li>
        <li>
            <img src="images/main_image2.jpg" alt="images2" />
            <p>网站模板免费下载</p>
        </li>
        <li>
            <img src="images/main_image3.jpg" alt="images3" />
            <p>js特效</p>
        </li>
        <li>
            <img src="images/main_image4.jpg" alt="images4" />
            <p>jQuery导航栏</p>
        </li>
        <li>
            <img src="images/main_image5.jpg" alt="images5" />
            <p>js图片滚动</p>
        </li>
        <li>
            <img src="images/main_image6.jpg" alt="images6" />
            <p>网站源码免费下载</p>
        </li>
        <li>
            <img src="images/main_image7.jpg" alt="images7" />
            <p>js图片滚动</p>
        </li>
        <li>
            <img src="images/main_image8.jpg" alt="images8" />
            <p>jQuery幻灯片</p>
        </li>
        <li>
            <img src="images/main_image9.jpg" alt="images9" />
            <p>网站模板免费下载</p>
        </li>
    </ul>
</div>