移動端開發

 移動端檢測javascript

var sUserAgent = navigator.userAgent.toLowerCase();            
        var bIsIpad = sUserAgent.match(/ipad/i) == "ipad";            
        var bIsIphoneOs = sUserAgent.match(/iphone os/i) == "iphone os";            
        var bIsMidp = sUserAgent.match(/midp/i) == "midp";            
        var bIsUc7 = sUserAgent.match(/rv:1.2.3.4/i) == "rv:1.2.3.4";           
        var bIsUc = sUserAgent.match(/ucweb/i) == "ucweb";            
        var bIsAndroid = sUserAgent.match(/android/i) == "android";           
        var bIsCE = sUserAgent.match(/windows ce/i) == "windows ce";         
        var bIsWM = sUserAgent.match(/windows mobile/i) == "windows mobile";     

 

H5監聽搖一搖和手機傾斜事件(重力感應)

 

監聽css3動畫結束事件,兼容寫法:css

function whichAnimationEvent(){
  var t,
      el = document.createElement("fakeelement");

  var animations = {
    "animation"      : "animationend",
    "OAnimation"     : "oAnimationEnd",
    "MozAnimation"   : "animationend",
    "WebkitAnimation": "webkitAnimationEnd"
  }

  for (t in animations){
    if (el.style[t] !== undefined){
      return animations[t];
    }
  }
}

  

 

qruerySelector 選擇器html

在經過DOM的屬性進行選擇是要加上雙引號才能選擇到,例如 : document.querySelector('img[alt=1]')  ,這樣是會報錯的,document.querySelector('img[alt=" 1 "]') ,這樣才能選擇到。java

document.querySelectorAll 配合ES6的擴展符能夠直接獲取DOM的數組,而非類數組,要這樣寫 [...document.querySelectorAll('div')]android

 

iOS移動端點擊陰影如何去除css3

*{-webkit-tap-highlight-color: rgba(0,0,0,0);-webkit-tap-highlight-color:transparent;}

 

清除input或button的默認樣式web

-webkit-appearance: none ;

 

手機號驗證正則表達式

input type=number 在蘋果上沒效,能夠用input type=tel 代替,由於maxlength屬性在type=number上是沒效的windows

不過若是需求更進一步,不許用戶輸入除數字以外的任何字符,能夠加入下面的oninput事件數組

<input type="tel" name="phone" maxlength="11" class="phone" oninput="this.value=this.value.replace(/[^0-9.]+/,'');">
var reg=/^1[3|4|5|8]\d{9}$/;  //驗證手機的正則

 input 還有一個pattern屬性,規定用於驗證輸入字段的模式。模式指的是正則表達式

例子:http://www.w3school.com.cn/tags/att_input_pattern.asp

 

propertychange 和 input 事件:

1)propertychange只要當前對象的屬性發生改變就會觸發該事件

2)input是標準的瀏覽器事件,通常應用於input元素,當input的value發生變化就會發生,不管是鍵盤輸入仍是鼠標黏貼的改變都能及時監聽到變化

$(function(){ 

    $('#username').bind('input propertychange', function() {  

    $('#result').html($(this).val().length + ' characters');  

  });  

})  

這裏bind同時綁定了input和propertychange兩個方法。

 

css3動畫停留在完成狀態

animation-fill-mode: forwards;  //在應用動畫的元素上加上這個屬性,就能夠在動畫完成後停在結束的狀態,不會返回原始狀態animation屬性以後,否則沒效;
will-change:xxx; //提早告訴瀏覽器那些屬性會發生變化,例如背景色會變,就把xxx寫上background,主要做用是優化css的動畫或變化效果

 

Swiper插件經常使用屬性備忘//初始化

var mySwiper = new Swiper('.swiper-container',{
initialSlide :2,    //設定初始化時slide的索引
autoplay: 5000,//可選選項,自動滑動
direction : 'vertical',  //輪播方向,horizontal 水平方向(默認)vertical 垂直方向
speed:300,  //輪播速度
loop:ture , //循環

pagination : '.swiper-pagination',  //使用分頁器
prevButton:'.swiper-button-prev',
nextButton:'.swiper-button-next', //使用前進後退按鈕
effect : 'fade', //切換效果 默認爲slide
})

mySwiper.activeIndex  //當前頁的索引
   
/*改變前進後退按鈕的樣式*/
<style>
/*Swiper原樣式 */ .swiper-button-next{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23007aff'%2F%3E%3C%2Fsvg%3E");} /*改變了顏色和加粗的樣式*/ .swiper-button-next{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L5%2C44l-4.2-4.2L18.6%2C22L0.8%2C4.2L5%2C0z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E");} </style>

 

將swiper對象的顯示slider定位到指定的索引
mySwiper.slideTo(index); 
 
注意:若是swiper-container是設置了display:none;的話,是沒法初始化的,若是必定要隱藏的話,要麼初始化後再隱藏,要麼用別的方法隱藏(opacity:0;之類的),要麼在外層在套一層div.                                   
                    

單選框、複選框與文字垂直居中

以vertical-align:middle爲基礎的

 

css代碼以下:vertical-align:middle; margin-top:-2px; margin-bottom:1px;

參考: input 對齊

 

改變input 的 placehoder 屬性的樣式

input::-webkit-input-placeholder { /* WebKit browsers*/ 
  color:#999;font-size:14px;
  }
input:-moz-placeholder {  /* Mozilla Firefox 4 to 18*/ 
  color:#999;font-size:14px;
  }
input::-moz-placeholder {  /* Mozilla Firefox 19+*/ 
  color:#999;font-size:14px;
  }
input:-ms-input-placeholder { /* Internet Explorer 10+*/ 
  color:#999;font-size:14px;
}

 

移動端長按會出現複製黏貼菜單按鈕,通過查詢資料,解決了此問題;

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

蘋果端能夠css解決:*{-webkit-touch-callout: none;}

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

安卓端須要添加js解決:

window.ontouchstart = function(e) { 
e.preventDefault(); 
};

 

/**
 *禁止出現右鍵菜單,移動端防止微信長按出現菜單
 *
 */
function contextmenu(){
    $(document).on('contextmenu', function(e){
        e.preventDefault();
    });
}



/**
 *@desc 自動播放音樂(微信端)  安卓和IOS均可以自動播放
 *
 * @param {dom} dom  直接的dom,不是JQ對象
 */
function autoPlay(dom){
    if(window.WeixinJSBridge){
            WeixinJSBridge.invoke('getNetworkType', {}, function(e) {
                dom.play();
            }, false);
        }else{
            document.addEventListener("WeixinJSBridgeReady", function() {
            WeixinJSBridge.invoke('getNetworkType', {}, function(e) {
                dom.play();
            });
        }, false);
    }
}
//設置rem  50px
function setRem() {
    var cw=document.body.clientWidth || document.documentElement.clientWidth;
    document.getElementsByTagName("html")[0].style.fontSize = cw / 7.5 + "px";
};
相關文章
相關標籤/搜索