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%;
}