Chocolat.js的(de)使用(yòng)爲網頁增添色彩

作者：龍 時(shí)間：2018-07-18 浏覽：

1.簡介

Chocolat.js 使您能夠顯示一個(gè)或多(duō)個(gè)圖像在同一頁面上。給用(yòng)戶展示一組圖片縮略圖，可(kě)以顯示全頁或塊。Chocolat.js 可(kě)以很好地處理(lǐ)所有主要的(de)浏覽器。它在下(xià)面這(zhè)些浏覽器測試通(tōng)過：IE7+，火狐，Chrome，Opera 和(hé) 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參數詳解

同樣在官方文檔還(hái)有更多(duō)的(de)參數可(kě)以設定