小游戏

手机的长按事件,松开

$(".gamePlay").on('mousedown touchstart',function(){}

$(".gamePlay").on('mouseup touchend',function(){}

手机长按的时候,移动手指,上面的点击事件中断

解决方法:event.preventDefault();

手机的左右滚动iscoller

hScrollbar:false水平滚动条是否隐藏

vScrollbar:false垂直滚动条是否隐藏

hScroll * 是否允许水平滚动 false 否 true 是 true
vScroll * 是否允许垂直滚动 false 否 true 是 true
var myscroll=new iScroll("wrapper",{hScrollbar:false, vScrollbar:false,vScroll:false});
var scroll=new iScroll("picContainer",{hScrollbar:false, vScrollbar:false,vScroll:false});

判断是手机还是电脑

if ($("body").width() < $("body").height())    //当宽小于高的时候证明是手机

宽和高旋转90deg

var _translate = _translate = ($(window).height() - $(window).width()) / 2 + "px";
$(".content").css({
"width": $(window).height() + "px",
"height": $(window).width() + "px",
"-webkit-transform": "rotate(90deg) translate(" + _translate + "," + _translate + ")",
"-moz-transform": "rotate(90deg) translate(" + _translate + "," + _translate + ")",
"transform": "rotate(90deg) translate(" + _translate + "," + _translate + ")"
});

-webkit-animation当加了动画属性的时候,这个属性的东西会在最顶层,那么z-index失效,加一个空的-webkit-animation即可,但是@keyframes 不可以真的为空,要有属性的设置才可以

你可能感兴趣的:(小游戏)