懒人之家--可能是JS网页特效代码收集最全的懒站!

jQuery课程表选项卡滑动切换代码

作者/代码整理:  (转载请附加本文地址,带有“懒人原生”字样的谢绝转载) 发布日期:2017-10-31
这是一款蓝色风格的jQuery课程表选项卡滑动切换代码,以选项卡的方式查看学校机房信息课程表样式。


js代码

<script language="javascript">
(function (window, $, undefined) {
    /*
     * tab切换插件
     * 用例:$('*').createTab();
     */
    $.fn.createTab = function (opt) {
        var def = {
            activeEvt: 'mouseover',
            activeCls: 'cur'
        }
        $.extend(def, opt);
        this.each(function () {
            var $this = $(this);
            var timer;
            $this.find('ul.title li').mouseover(def.activeEvt,function(){
                var index = $(this).index(),
                    that = $(this);
                timer = setTimeout(function(){
                    that.addClass('cur').siblings().removeClass('cur');
                    $this.find('div.list').animate({marginLeft:-1000*index},'slow');
                },300);
            }).mouseout(function(){
                clearTimeout( timer );
            })
        });
    }

})(window, jQuery);
$(function(){
    $(".jyTable").createTab()
})
</script>