Chocolat.js的使用为网页增添色彩

作者：龙 时间：2018-07-18 浏览：

1.简介

Chocolat.js 使您能够显示一个或多个图像在同一页面上。给用户展示一组图片缩略图，可以显示全页或块。Chocolat.js 可以很好地处理所有主要的浏览器。它在下面这些浏览器测试通过：IE7+，火狐，Chrome，Opera 和 Safari 浏览器

2.demo演示

2.1 引入库文件

    <link rel="stylesheet" href="css/chocolat.css">
    <script src="js/jquery-1.9.1.min.js"></script>
    <script src="js/jquery.chocolat.min.js"></script>

2.2 demo源码

    <!--css-->
        .part01 a {
            font-size: 20px;
            color: #000;
        }
        
        .part01 a span {
            display: inline-block;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: rgba(255, 255, 255.5);
            line-height: 40px;
            text-align: center;
        }
    
    <!--html -->
    <div id="part01" class='part01 w1200'>
        <a class="chocolat-image" href="img/g-1.jpg" title="艾迪A8">
            <span>1</span>
        </a>
        <a class="chocolat-image" href="img/g-2.jpg" title="法拉利">
            <span>2</span>
        </a>
        <a class="chocolat-image" href="img/g-3.jpg" title="凯迪拉克">
            <span>3</span>
        </a>
    </div>
    
    <!--js-->
    $(function() {
        $('#part01').Chocolat({
            imageSize: 'contain',
            loop: true
        });
    })
    
    

2.3参数详解

同样在官方文档还有更多的参数可以设定