jquery獲取transform里的值實現(xiàn)方法
$('div').css("transform").replace(/[^0-9\-,]/g,'').split(',')[4];
獲取left top
var left = $('#test').position().left;
var top = $('#test').position().top;
解決移動端頁面點擊圖標或按鈕產(chǎn)生陰影
-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;
}
生成不同隨機數(shù)
var arr = [];//存放隨機數(shù)的數(shù)組
var arrLen = 5;//數(shù)組長度韵卤，也用來限制范圍
for(var i=0; i<arrLen; i++){
var radomNum = parseInt(Math.random() * 14) ;//對利用random生成的隨機數(shù)處理后得到1~5的整數(shù)
if(arr.indexOf(radomNum) == -1){
//indexOf返回值為-1表示數(shù)組中沒有和新隨機數(shù)重復的值
arr.push(radomNum);
}else{
//有重復值i--姻政，不添加重復的值到數(shù)組中，并再循環(huán)一次
i--;
}
}
console.log(arr)
移動端機型識別實現(xiàn)頁面跳轉
//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事件里監(jiān)聽手指按下的坐標熙涤，event.pageX獲取的是undefined，changedTouches珠漂，targetTouches是嗜，touches也只獲得到了鼠標按下時的坐標苏潜，沒法持續(xù)監(jiān)聽存谎，求幫助拔疚！或者其他辦法也行，效果大概是一個元素既荚，手指在上面滑動稚失，然后改變這個元素的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+" "+"現(xiàn):"+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);
}
}
實現(xiàn)手機移動端web頁面旋轉屏幕時,字體大小調(diào)整的問題
html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6 {
-webkit-text-size-adjust:100%;
}
