重构的小技巧

1. CSS3对话框

 .talk{width: 100px; height: 30px; background: #ffffff; border-radius: 5px; position: absolute; left: 100px; top: 100px;}
 .talk:after{content: ""; border-width:10px 20px;   border-style:dashed solid solid dashed;   position: absolute; left: -20px; top: 17px; border-color: transparent #ffffff #ffffff transparent; transform:rotate(-40deg)}

如图

2.兼容IE6的侧边栏代码（无需再写脚本）

.sel-box{float:left; z-index:9999; position:fixed; background:#000; width:170px; height:175px; top:172px;left:50%;margin-left:500px;  _position:absolute;_top:expression(documentElement.scrollTop+172); visibility: hidden;}

3. 滑动跳转锚点(记得前提连接jq库)

$(window).bind("scroll resize", function () {
        var winWidth = $(window).width();
        var winHeight = $(window).height();
        if (winWidth > 1250 && $(window).scrollTop() > winHeight) {
        $('.sel-box').css('visibility', 'visible');
        } else {
        $('.sel-box').css('visibility', 'hidden');
        }
    });
        //锚点跳转滑动效果
    $('a[href*=#],area[href*=#]').click(function() {
        if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
            var $target = $(this.hash);
            $target = $target.length && $target || $('[name=' + this.hash.slice(1) + ']');
            if ($target.length) {
                var targetOffset = $target.offset().top;
                $('html,body').animate({
                        scrollTop: targetOffset
            }, 1000);
            return false;
        }
    }
    });

4.使用rem布局

  //获取屏幕宽度改变rem设置的值
   
    var CWidth = document.documentElement.clientWidth || document.body.clientWidth;
        // console.log(CWidth);
    document.documentElement.style.fontSize = (CWidth/640*20)+"px";

其中640是设计稿的宽度

5.移动端移动事件

 var startX = 0,
     startY = 0,
     moveX = 0,
     moveY = 0;
    window.addEventListener("touchstart", function(ev) {
        startX = ev.touches[0].pageX;
        startY = ev.touches[0].pageY;
    }, false);
    window.addEventListener("touchmove", function(ev) {
        ev.preventDefault(); //取消浏览器默认动作
        moveX = ev.touches[0].pageX;
        moveY = ev.touches[0].pageY;
    }, false);
    window.addEventListener("touchend", function(ev) {
        if(moveX==0){
            console.log('相同位置');
        }else{
            if (startX - moveX < -50) {
                console.log("左滑");
            }
            if (startX - moveX > 50) {
                console.log("右滑");
            }
        }
    }, false);

6.获取地址栏的参数

function GetQueryString(name)
    {
        var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
        var r = window.location.search.substr(1).match(reg);
        if(r!=null)return unescape(r[2]); return null;
    }
    var nums = GetQueryString('rdm');


    //如：www.baidu.com?rdm=0; 此时0可以被nums给获取到