jQuery列表内容左右切换效果代码



137 547 183



特效描述: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

加群请备注:从官网了解到