jQuery列表內容左右切換效果代碼



145 578 193



特效描述:jQuery 列表內容 左右切換效果,jQuery列表內容左右切換效果代碼

代碼結構

1. 引入CSS

<link rel="stylesheet" type="text/css" href="style.css">

2. 引入JS

<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="Transfer.js"></script>

3. HTML代碼

<div class="ty-transfer mt20 ml20" id="ued-transfer-1">
    <div class="fl ty-transfer-list transfer-list-left">
        <div class="ty-transfer-list-head">
            地域列表
        </div>
        <div class="ty-transfer-list-body">
            <ul class="ty-tree-select">
                <li>
                    <div class="ty-tree-div">
                        <label class="tyue-checkbox-wrapper">
                            <span class="tyue-checkbox">
                                <input type="checkbox" class="tyue-checkbox-input" id="tyue-checkbox-blue">
                                <span class="tyue-checkbox-circle">
                                </span>
                            </span>
                            <span class="tyue-checkbox-txt" title="穿梭框列表內容 ---- 1">
                                穿梭框列表內容 ---- 1
                            </span>
                        </label>
                    </div>
                </li>
                <li>
                    <div class="ty-tree-div">
                        <label class="tyue-checkbox-wrapper">
                            <span class="tyue-checkbox">
                                <input type="checkbox" class="tyue-checkbox-input" id="tyue-checkbox-blue">
                                <span class="tyue-checkbox-circle">
                                </span>
                            </span>
                            <span class="tyue-checkbox-txt" title="穿梭框列表內容 ---- 2">
                                穿梭框列表內容 ---- 2
                            </span>
                        </label>
                    </div>
                </li>
                <li>
                    <div class="ty-tree-div">
                        <label class="tyue-checkbox-wrapper">
                            <span class="tyue-checkbox">
                                <input type="checkbox" class="tyue-checkbox-input" id="tyue-checkbox-blue">
                                <span class="tyue-checkbox-circle">
                                </span>
                            </span>
                            <span class="tyue-checkbox-txt" title="穿梭框列表內容穿梭框列表內容 ---- 3">
                                穿梭框列表內容 ---- 3
                            </span>
                        </label>
                    </div>
                </li>
                <li>
                    <div class="ty-tree-div">
                        <label class="tyue-checkbox-wrapper">
                            <span class="tyue-checkbox">
                                <input type="checkbox" class="tyue-checkbox-input" id="tyue-checkbox-blue">
                                <span class="tyue-checkbox-circle">
                                </span>
                            </span>
                            <span class="tyue-checkbox-txt" title="穿梭框列表內容---- 4">
                                穿梭框列表內容 ---- 4
                            </span>
                        </label>
                    </div>
                </li>
            </ul>
        </div>
        <div class="ty-transfer-list-foot">
            <div class="ty-tree-div">
                <div class="tyc-check-blue fl">
                    <input type="checkbox" class="transfer-all-check" id="tyc-check-blue">
                    <span>
                    </span>
                </div>
                <div class="ty-tree-text">
                    全選
                </div>
            </div>
        </div>
    </div>
    <div class="fl ty-transfer-operation">
        <span class="ty-transfer-btn-toright to-switch">
        </span>
        <span class="ty-transfer-btn-toleft to-switch">
        </span>
    </div>
    <div class="fl ty-transfer-list transfer-list-right">
        <div class="ty-transfer-list-head">
            地域列表
        </div>
        <div class="ty-transfer-list-body">
            <ul class="ty-tree-select">
                <li>
                    <div class="ty-tree-div">
                        <label class="tyue-checkbox-wrapper">
                            <span class="tyue-checkbox">
                                <input type="checkbox" class="tyue-checkbox-input" id="tyue-checkbox-blue">
                                <span class="tyue-checkbox-circle">
                                </span>
                            </span>
                            <span class="tyue-checkbox-txt" title="穿梭框列表內容 ---- 7">
                                穿梭框列表內容 ---- 5
                            </span>
                        </label>
                    </div>
                </li>
                <li>
                    <div class="ty-tree-div">
                        <label class="tyue-checkbox-wrapper">
                            <span class="tyue-checkbox">
                                <input type="checkbox" class="tyue-checkbox-input" id="tyue-checkbox-blue">
                                <span class="tyue-checkbox-circle">
                                </span>
                            </span>
                            <span class="tyue-checkbox-txt" title="穿梭框列表內容 ---- 8">
                                穿梭框列表內容 ---- 5
                            </span>
                        </label>
                    </div>
                </li>
                <li>
                    <div class="ty-tree-div">
                        <label class="tyue-checkbox-wrapper">
                            <span class="tyue-checkbox">
                                <input type="checkbox" class="tyue-checkbox-input" id="tyue-checkbox-blue">
                                <span class="tyue-checkbox-circle">
                                </span>
                            </span>
                            <span class="tyue-checkbox-txt" title="穿梭框內容穿梭框內容穿梭框內容 ---- 9">
                               穿梭框列表內容 ---- 7
                            </span>
                        </label>
                    </div>
                </li>
                <li>
                    <div class="ty-tree-div">
                        <label class="tyue-checkbox-wrapper">
                            <span class="tyue-checkbox">
                                <input type="checkbox" class="tyue-checkbox-input" id="tyue-checkbox-blue">
                                <span class="tyue-checkbox-circle">
                                </span>
                            </span>
                            <span class="tyue-checkbox-txt" title="穿梭框列表內容穿梭框列表內容 ---- 10">
                                穿梭框列表內容......
                            </span>
                        </label>
                    </div>
                </li>
            </ul>
        </div>
        <div class="ty-transfer-list-foot">
            <div class="ty-tree-div">
                <div class="tyc-check-blue fl">
                    <input type="checkbox" class="transfer-all-check" id="tyc-check-blue">
                    <span>
                    </span>
                </div>
                <div class="ty-tree-text">
                    全選
                </div>
            </div>
        </div>
    </div>
    <div class="clearboth">
    </div>
    ????????
</div>
????????
<!--過濾篩選 end-->
<script type="text/javascript">
	$("#ued-transfer-1").transferItem();
</script>



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊


熱門標簽: 滾動切換 滾動條切換 滑動選項卡 滑動切換 選項卡切換 選項卡 切換 tab切換 頁面切換 選項卡插件 切換插件 滑動手風琴 切換按鈕 表單 表單美化 表單插件 表單美化插件 文字切換 文字選項卡 復選框 復選按鈕 復選框美化 按鈕控制 全選/反選
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

加群請備注:從官網了解到

老夫子电子