左侧手拉面板特效

//html代码

   

        

            ![](/images/model/1_1.jpg)
        
        

            ![](/images/model/1_2.jpg)
        
        
关于我们
        

            
埃森焊割设备及配件营销中心
            
本中心成立于2005年，从事于焊割设备及配件销售服务十余年，年销售额达1000万元。十年老店，能够全面掌握全国焊割配件质量，始终真诚实意的为新老客户提供价格实惠、质量可靠的产品与服务。
            
主营产品：各品牌电焊机、氩弧焊机、自动化工装、机器人焊接设备；批发各种优质焊割配件、焊接器材：二保焊焊枪、送丝机、割炬、二氧化碳表、等离子割枪、氩弧焊枪、焊钳、焊罩、焊机线、焊条、焊丝、磨光机、防堵膏、防溅剂、氧气管等及各种焊机维修。
            
商品详情及购买请访问:  淘宝网上商城 
        
    

// 左侧手拉面板jquery代码--------------------------------------

$('.wmsDrag').on('mousedown', function(e) {
        $(document).on('mousemove.drag', function(e) {
            e.preventDefault();
            $('.wmsLefthidden').offset({
                left: e.pageX - 325
            });
        });

        $(document).on('mouseup', function(e) {
            $(document).off('mousemove.drag');
            $('.wmsLefthidden').stop().animate({
                'top': '150px',
                'left': document.body.clientWidth/2 -300 ,
                'width': '600px',
                "border-radius":"40px",
            }, 500);
            $(document).off('mouseup')
            setTimeout(function() {
                $('.wmsDrag').css('display', 'none');
                $('.wmsDrag2').css('display', 'block');
                $(".wmsText").css("display", "none")
                $(".showUs").css("display", "block")

            }, 500)
        });

    });
    $('.wmsDrag2').click(function() {
        $(".showUs").css("display", "none")
        $(".wmsText").css("display", "block")
        $('.wmsLefthidden').stop().animate({
            'top': '150px',
            'left': '-300px',
            'width': '300px',
            "border-radius":"0"
        }, 500);
        setTimeout(function() {
            $('.wmsDrag').css('display', 'block');
            $('.wmsDrag2').css('display', 'none');
            $('.wmsText').text('关于我们');
            // $('.wmsText').css('width', '300px')
        }, 500)
    });