去除input框的內陰影以及點選時背景灰色：
input,

textarea,

select {

    -webkit-appearance: none; 

    -webkit-tap-highlight-color:rgba(0,0,0,0);
}
獲取使用者的input輸入的內容
var name = $('.b_name').val();
判斷使用者輸入的位元組；
if(name.length==3)


彈出層用的是js動態定位（追求效率，用的以前封裝的方法）

//居中顯示彈出層

function popBox(id){

    var w =$(id).width();

        var h =$(id).height();

        var t = scrollY() +(windowHeight()/2)-(h/2);

        if(t<0)t=0;

    var l = scrollX()+((windowWidth())-(w))/2;

    if(l<0) l=0;

    $(id).css({left:l/20+'rem',top:t/20+'rem'});

    $(id).css('display','block');

}

//瀏覽器視口的高度(相容寫法-male)

function windowHeight() {

    var de = document.documentElement;

    return self.innerHeight || (de && de.clientHeight) || document.body.clientHeight;

}

//瀏覽器視口的寬度(相容寫法-male)

function windowWidth() {

    var de = document.documentElement;


    return self.innerWidth || (de && de.clientWidth) || document.body.clientWidth
}
彈窗的div和img自動地位在ab的靠左的document。body
彈窗div邊框透明寫法
.css{-webkit-background-clip: content-box;background-clip: content-box;}

背景圖根據手機解析度大小來適應高度

        1. position: relative;
        2. height: 22rem;
        3. margin: 0 auto;
        4. background: #000 url(../img/center_page/[email protected]) no-repeat top center;
        5. background-size: cover;
        6. color: #fff;



複選框的全選以及未全部選
https://css-tricks.com/indeterminate-checkboxes/


移動端垂直水平居中
http://caibaojian.com/mobile-translate.html

方法1
.center{
    width:50%;

    position: absolute;

    top: 50%;

    left: 50%;

    -moz-transform: translate(-50%, -50%);

    -ms-transform: translate(-50%, -50%);

    -webkit-transform: translate(-50%, -50%);

    transform: translate(-50%, -50%);
}
方法2

.center {

display: -webkit-box;

display: -moz-box;

display: -ms-flexbox;

display: -webkit-flex;

display: flex;

-webkit-box-align: center;

-moz-box-align: center;

-ms-flex-align: center;

-webkit-align-items: center;

align-items: center;

-webkit-box-pack: center;

-moz-box-pack: center;

-ms-flex-pack: center;

-webkit-justify-content: center;

justify-content: center;
}



解決移動端彈出層不適配小螢幕手機的問題
.mask{

    filter:alpha(opacity=50); 
    -moz-opacity:0.5; 
    opacity:0.5;
    display: block;
    width: 100%;
    height: 100%;
    background: #000;
    z-index: 9;
    position: absolute;
    position: fixed;
    top: 0;
    left: 0;
}
清除浮動
給父級加上 overflow:hidden

點選彈窗以外的地方可退出彈窗
$(".next_col1").click(function(){
    $(".mask_big").show();
    return false;//必定要加
})

$(document).click(function(){
    $(".mask_big").hide();
});

zepto移動端點選按鈕之後先顯示延遲5秒之後在顯示彈出框！
<script language='javascript' type='text/javascript'>
$(function () {
    setTimeout(function () {
        $("divid").show();
    }, 6000);
})
</script>

在瀏覽器中有些a標籤沒有用的只是為了顯示小手，一定記得不href=“#”換成href=" javascript:void(0); "
target="_self"不然在外網會出現點選無效

refresh 屬性值 -- 重新整理與跳轉(重定向)頁面

5秒之後重新整理本頁面:

<meta http-equiv="refresh" content="5" />

5秒之後轉到××首頁:

<meta http-equiv="refresh" content="5; url=http://www.baidu.com/" />

css計算器

div {
width:-webkit-calc(100%-100px);
width:-moz-calc(100%-100px);
width:calc(100%-100px);
}

類似於標籤的讓文字適應 加display: inline-block;就能解決啦

zepto不支援scrollTop時，返回頂部有動畫的方法
function goTop(acceleration, time) {

acceleration = acceleration || 0.1;

time = time || 16;

var x1 = 0;

var y1 = 0;

var x2 = 0;

var y2 = 0;

var x3 = 0;

var y3 = 0;

if (document.documentElement) {

x1 = document.documentElement.scrollLeft || 0;

y1 = document.documentElement.scrollTop || 0;

}

if (document.body) {

x2 = document.body.scrollLeft || 0;

y2 = document.body.scrollTop || 0;

}

var x3 = window.scrollX || 0;

var y3 = window.scrollY || 0;

// 滾動條到頁面頂部的水平距離var x = Math.max(x1, Math.max(x2, x3));

// 滾動條到頁面頂部的垂直距離var y = Math.max(y1, Math.max(y2, y3));

// 滾動距離 = 目前距離 / 速度, 因為距離原來越小, 速度是大於 1 的數, 所以滾動距離會越來越小var speed = 1 + acceleration;

window.scrollTo(Math.floor(x / speed), Math.floor(y / speed));

// 如果距離不為零, 繼續呼叫迭代本函式if (x > 0 || y > 0) {

var invokeFunction = "goTop(" + acceleration + ", " + time + ")";

window.setTimeout(invokeFunction, time);

}

}

$(".fix_go_top").on("click", function() {

    //$("body").scrollTop(0);

    //window.scrollTo(0,0);    goTop();
});
jq插入圖片[

$("#yf1")[0].src="http://nimage.39.net/ask2016/wx_ask/images/yf_06.png";

文字超過寬度後面的文字顯示為點點

text-overflow : ellipsis; 
white-space : nowrap; 
overflow : hidden

文字設定超過兩行文字打點點

        1. height: 50px;
        2. text-overflow: -o-ellipsis-lastline;
        3. overflow: hidden;
        4. text-overflow: ellipsis;
        5. display: -webkit-box;
        6. -webkit-line-clamp: 2;
        7. -webkit-box-orient: vertical;

點選a標籤跳轉可以滑動效果
$(function(){ 

    sectionLength = $(".content section").size();
    //錨點跳轉滑動效果 
    $('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; 
            } 
        } 
    }); 

}) 
滾動條滾動到頂部除去定位，滑動過程定位fixed
// 定位
$(function(){
    //獲取要定位元素距離瀏覽器頂部的距離
    var navH = $(".nav").offset().top;

    //滾動條事件
    $(window).scroll(function(){
    //獲取滾動條的滑動距離
        var scroH = $(this).scrollTop();
        //滾動條的滑動距離大於等於定位元素距離瀏覽器頂部的距離，就固定，反之就不固定
        if(scroH>=navH){
            $(".nav").css({"position":"fixed","top":0});
        }else if(scroH<navH){
         $(".nav").css({"position":"static"});
        }
    })
})
微信分享標題自定義
<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
需要配置id
<script>
    var wxinfo = new api39_wx({
        title: '【示愛宣言】——遇上這種表白，誰不想跟你啪啪啪',
        desc: '',
        link: 'http://ask.39.net/html5/jies_h5/',
        imgUrl: 'http://image.39.net/ask2016/wx_ask/xingqingjun/jies_h5/images/share_t.jpg'
    });
</script>
h5背景音樂播放迴圈
誠心奉上最近被坑的h5背景音樂，說多了都是淚
相容安卓、ios，音樂播放當中遇見伺服器配置問題會出現音樂無法播放，

html：
        <span id="musicControl">
                <a id="mc_play" class="on" onclick="play_music();">
                    <audio id="musicfx" loop="loop" autoplay="autoplay" >
                        <source src=" http://biz.ifeng.com/fashion/special/derucci20153g/img/music.mp3" type="audio/mpeg">
                    </audio>
                </a>
         </span>
css：
  @-webkit-keyframes reverseRotataZ{
        0%{-webkit-transform: rotateZ(0deg);}
        100%{-webkit-transform: rotateZ(-360deg);}
    }
    @-webkit-keyframes rotataZ{
        0%{-webkit-transform: rotateZ(0deg);}
        100%{-webkit-transform: rotateZ(360deg);}
    }
    #musicControl { position:fixed;right:10px;top:20px;margin-top:0;display:inline-block;z-index:99999999}
    #musicControl a { display:inline-block;width:25px;height:25px;overflow:hidden;background:url('../images/mcbg.png') no-repeat;background-size:100%;}
    #musicControl a audio{width:100%;height:56px;}
    #musicControl a.stop { background-position:left bottom;}

相關推薦