h5中的小技巧

jquery获取transform里的值实现方法

$('div').css("transform").replace(/[^0-9\-,]/g,'').split(',')[4];

获取left top

var left = $('#test').position().left;
var top = $('#test').position().top;

解决移动端页面点击图标或按钮产生阴影

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

获取背景图片和src

var arr=[];
$("body").find("div").each(function(index,value){
  arr.push($(this).css("backgroundImage").replace('url(','').replace(')',''))

})
console.log(arr)

var arr=[];
$("body").find("img").each(function(index,value){
  arr.push($(this).attr("src"))

})
console.log(arr)

解决div里面img图片下方有空白的问题

img {
    display: block;
}
img {
    vertical-align: middle;
}
.banner {
    font-size: 0;
}
.banner {
    line-height: 0;
}

生成不同随机数

var arr = [];//存放随机数的数组
      var arrLen = 5;//数组长度，也用来限制范围
      for(var i=0; i<arrLen; i++){
        var radomNum = parseInt(Math.random() * 14) ;//对利用random生成的随机数处理后得到1~5的整数
        if(arr.indexOf(radomNum) == -1){
          //indexOf返回值为-1表示数组中没有和新随机数重复的值
          arr.push(radomNum);
        }else{
          //有重复值i--，不添加重复的值到数组中，并再循环一次
          i--;
        }
      }
      console.log(arr)

移动端机型识别实现页面跳转

//navigator.userAgent获取机型
var isAndroid = navigator.userAgent.match(/android/ig);
var isIos = navigator.userAgent.match(/iphone|ipod/ig);
var isWeixin = navigator.userAgent.match(/MicroMessenger/ig);
 
if (isWeixin) {
var download_href = '微信端地址';
} else if (isIos) {
var download_href = 'ios下载地址';
} else if (isAndroid) {
var download_href = 'android下载地址';
} else {
var download_href = '下载页面';
}

平滑过渡锚点

$(function(){  
  $('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;
      }
    }
  });
})

判断滑动方向
$('body').bind('touchmove',function(e){
    //获取滑动屏幕时的X,Y
    endX = e.originalEvent.changedTouches[0].pageX,
    endY = e.originalEvent.changedTouches[0].pageY;
    //获取滑动距离
    distanceX = endX-startX;
    distanceY = endY-startY;
    //判断滑动方向
    if(Math.abs(distanceX)>Math.abs(distanceY) && distanceX>0){
        console.log('往右滑动');
    }else if(Math.abs(distanceX)>Math.abs(distanceY) && distanceX<0){
        console.log('往左滑动');
    }else if(Math.abs(distanceX)<Math.abs(distanceY) && distanceY<0){
        console.log('往上滑动');
    }else if(Math.abs(distanceX)<Math.abs(distanceY) && distanceY>0){
        console.log('往下滑动');
    }else{
        console.log('点击未滑动');
    }
 
});
想在touchmove事件里监听手指按下的坐标，event.pageX获取的是undefined，changedTouches，targetTouches，touches也只获得到了鼠标按下时的坐标，没法持续监听，求帮助！或者其他办法也行，效果大概是一个元素，手指在上面滑动，然后改变这个元素的top之类的...//禁用手机默认的触屏滚动行为



document.addEventListener('touchmove', function(event) {
    event.preventDefault();
}, false);
//touchstart事件
function touchSatrtFunc(evt) {
    try {
        //evt.preventDefault(); //阻止触摸时浏览器的缩放、滚动条滚动等
 
        var touch = evt.touches[0]; //获取第一个触点
        var x = Number(touch.pageX); //页面触点X坐标
        var y = Number(touch.pageY); //页面触点Y坐标
        //记录触点初始位置
        startX = x;
        startY = y;
 
 
    } catch (e) {
        alert('touchSatrtFunc：' + e.message);
    }
}
 
//touchmove事件，这个事件无法获取坐标
function touchMoveFunc(evt) {
    try {
        //evt.preventDefault(); //阻止触摸时浏览器的缩放、滚动条滚动等
        var touch = evt.touches[0]; //获取第一个触点
        var x = Number(touch.pageX); //页面触点X坐标
        var y = Number(touch.pageY); //页面触点Y坐标
 
 
//document.getElementById("version").innerHTML = "原:"+startY+"   "+"现:"+y;
        //判断滑动方向 上下
         
        if (y - startY > 100) {
            swipeDown();//你自己的方法 我是用来翻页的一样的
        } else if(y - startY < -100){
            swipeUp();//你自己的方法
        }
    } catch (e) {
        alert('touchMoveFunc：' + e.message);
    }
}
 
//touchend事件
function touchEndFunc(evt) {
    try {
        //evt.preventDefault(); //阻止触摸时浏览器的缩放、滚动条滚动等
 
 
    } catch (e) {
        alert('touchEndFunc：' + e.message);
    }
}
 
//绑定事件
function bindEvent() {
    document.addEventListener('touchstart', touchSatrtFunc, false);
    document.addEventListener('touchmove', touchMoveFunc, false);
    document.addEventListener('touchend', touchEndFunc, false);
}
 
//判断是否支持触摸事件
function isTouchDevice() {
    //document.getElementById("version").innerHTML = navigator.appVersion;
 
    try {
        document.createEvent("TouchEvent");
        //alert("支持TouchEvent事件！");
 
        bindEvent(); //绑定事件
    } catch (e) {
        alert("不支持TouchEvent事件！" + e.message);
    }
}

实现手机移动端web页面旋转屏幕时,字体大小调整的问题

html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6 {
-webkit-text-size-adjust:100%;
}