问题描述
||
作为JQuery的狂热用户,与本地iOS软件不同,在iOS上的管理面板上对幻灯片等幻灯片效果缓慢而生涩的情况感到震惊。
我发现了几个移动库,包括JQuery mobile和JQtouch。但是两者都不提供跨浏览器支持。
如果检测到iOS浏览器,是否可以将我现有的JQuery效果默认为移动版本?并可能对其工作方式进行简要说明。
非常感谢,
奇妙
解决方法
我使用这样的代码:
speed = 500;
var vP = \"\";
var transitionEnd = \"transitionEnd\";
if ($.browser.webkit) {
vP = \"-webkit-\";
transitionEnd = \"webkitTransitionEnd\";
} else if ($.browser.msie) {
vP = \"-ms-\";
} else if ($.browser.mozilla) {
vP = \"-moz-\";
transitionEnd = \"transitionend\";
} else if ($.browser.opera) {
vP = \"-o-\";
transitionEnd = \"oTransitionEnd\";
}
function animate(object,cssProperties,callback,ms) {
if (!ms) {
ms = speed;
}
if (Modernizr.csstransitions) {
object.css(vP+\"transition\",\"all \"+ms+\"ms ease-in-out\");
object.css(cssProperties);
if ($.isFunction(callback)) {
object.bind(transitionEnd,function(){
object.unbind(transitionEnd);
callback();
});
}
} else {
if ($.isFunction(callback)) {
object.animate(cssProperties,ms,callback);
} else {
object.animate(cssProperties,ms);
}
}
}
那么对于简单的情况:
animate($(\"#someID\"),{\"left\":\"100px\"});
或需要供应商前缀的复杂产品:
var cssArgs = {};
cssArgs[vP+\"transform\"] = \"translate(100px,0px)\";
animate($(\"#someID\"),cssArgs);
如果我要进行一些滑动,则建议使用transform3d和诸如(100px,0,0)的转换。在iOS上,它将硬件加速。
我使用Modernizr来检查我能做什么,就像这样:
function slide(gallery_chunk,sliderWidth) {
if (Modernizr.csstransforms3d && Modernizr.csstransitions) {
var cssArgs = {};
cssArgs[vP+\"transform\"] = \"translate3d(\"+gallery_chunk*-sliderWidth+\"px,0px,0px)\";
animate($(\"#gallery_content #thumbnails\"),cssArgs);
} else if (Modernizr.csstransforms && Modernizr.csstransitions) {
var cssArgs = {};
cssArgs[vP+\"transform\"] = \"translate(\"+gallery_chunk*-sliderWidth+\"px,cssArgs);
} else {
animate($(\"#gallery_content #thumbnails\"),{\"left\":gallery_chunk*-sliderWidth+\"px\"});
}
}
该示例来自图像滑块,因此我要向其发送宽度和数据块(即第0、1或2页)。
希望那会给你一些想法!
,我不知道这样做的超级简单方法。但是您可以使用modernizr来确定浏览器是否支持css转换,然后执行以下操作:
function slideMeUp(elementID) {
if (Modernizr.csstransitions) {
$(elementID).removeClass(\'slidDown\').addClass(\'slidUp\');
} else {
$(elementID).slideUp(500);
}
}
然后魔术将在css中发生,这有点多余,但是应该做到这一点。使用transition-transform-scale属性的好处是它在iOS上可以非常流畅地工作。
.sliders {
-moz-transition: -moz-transform 0.5s ease-out; /* FF4+ */
-o-transition: -o-transform 0.5s ease-out; /* Opera 10.5+ */
-webkit-transition: -webkit-transform 0.5s ease-out; /* Saf3.2+,Chrome */
-webkit-transform-origin: 50% 0%; /* halfway across,at the top */
-moz-transform-origin: 50% 0%; /* halfway across,at the top */
-o-transform-origin: 50% 0%; /* halfway across,at the top */
transition: transform 0.5s ease-out;
transform-origin: 50% 0%; /* halfway across,at the top */
}
.slidUp {
-webkit-transform: scale(1,0); /* full width,zero height */
-moz-transform: scale(1,zero height */
-o-transform: scale(1,zero height */
transform: scale(1,zero height */
}
.slidDown {
-webkit-transform: scale(1,1); /* full width,full height */
-moz-transform: scale(1,full height */
-o-transform: scale(1,full height */
transform: scale(1,full height */
}