码迷,mamicode.com
首页 > 其他好文 > 详细

关于动画框架类注意的点点滴滴02

时间:2014-11-13 12:32:39      阅读:430      评论:0      收藏:0      [点我收藏+]

标签:android   style   blog   http   io   ar   os   使用   sp   

响应式视频嵌套

bubuko.com,布布扣

bubuko.com,布布扣

bubuko.com,布布扣

 

Js

判断为苹果浏览器

谷歌浏览器的版本信息

bubuko.com,布布扣

 

苹果浏览器版本信息

bubuko.com,布布扣

 

判断目标:找到含有Safari的字符串,并且不包含Chrome

 

bubuko.com,布布扣

 

bubuko.com,布布扣

 

<script type="text/javascript">
        var browser={
            versions:function(){
                var u = navigator.userAgent, app = navigator.appVersion;
                return {//移动终端浏览器版本信息
                    trident: u.indexOf(‘Trident‘) > -1, //IE内核
                    presto: u.indexOf(‘Presto‘) > -1, //opera内核
                    webKit: u.indexOf(‘AppleWebKit‘) > -1, //苹果、谷歌内核
                    gecko: u.indexOf(‘Gecko‘) > -1 && u.indexOf(‘KHTML‘) == -1, //火狐内核
                    mobile: !!u.match(/AppleWebKit.*Mobile.*/)||u.indexOf(‘iPad‘) > -1, //是否为移动终端
                    ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端
                    android: u.indexOf(‘Android‘) > -1 || u.indexOf(‘Linux‘) > -1, //android终端或者uc浏览器
                    iPhone: u.indexOf(‘iPhone‘) > -1, //是否为iPhone或者QQHD浏览器
                    iPad: u.indexOf(‘iPad‘) > -1, //是否iPad
                    webApp: u.indexOf(‘Safari‘) == -1 //是否web应该程序,没有头部与底部
                };
            }(),
            language:(navigator.browserLanguage || navigator.language).toLowerCase()
        }
        if (Cmn.Func.IsMobile() && !browser.versions.iPad) {
             
            window.location.href = "m/index.htm";
        }
    </script>

 

同一个关闭按钮的双重作用

而且这里的两部分是dom布局结构是一样的且并列关系

 

bubuko.com,布布扣

 

bubuko.com,布布扣

 

bubuko.com,布布扣

 

bubuko.com,布布扣

 

bubuko.com,布布扣

 

bubuko.com,布布扣

 

bubuko.com,布布扣

 

bubuko.com,布布扣

 

  $("#pictureWall").delegate(".picture_list", "mouseenter", function () {
        var _mWidth = ($(this).find(".picture_list_mask").width()) - 8;
        var _mHeight = ($(this).find(".picture_list_mask").height()) - 9;
        $(this).find(".picture_list_mask").hide();
        $(this).find(".picture_list_mask").fadeIn(1400).css({ "border": "4px solid #FFF", "width":_mWidth+ "px", "height": _mHeight+"px" });
    });
    $("#pictureWall").delegate(".picture_list", "mouseleave", function () {
        $(this).find(".picture_list_mask").hide().css({ "border": "none", "width": "100%", "height": "100%" });
});

 

 

bubuko.com,布布扣

 

<meta name="viewport" id="viewport" content="width=1100,initial-scale=0.9,maximum-scale=0.9;minimum-scale=0.9;user-scalable=no;">

Viewport的3个尺寸值设置一致即可

公司框架判断---如果是ios7

 

bubuko.com,布布扣

 

if (Cmn.Func.IsIOS()) {

$(".people_wrap").css("left", "-4%");

$(".people_wrap").css("top", "19%");

}

 

跳转到手机版

 

bubuko.com,布布扣

 

图片路径切换,,当10个以上时注意字符串的拼法不一样

 

bubuko.com,布布扣

 

虽然有滚动条,但弹出浮层时,禁用滚动事件

bubuko.com,布布扣

 

参考箭牌项目langlang51(http://arrowsanitary.com.cn/langlang51/index.html)

 

bubuko.com,布布扣

 

bubuko.com,布布扣

 

向左跑出的线

http://zqtest.tuiyouyou.com/qf7/intro.html

 

bubuko.com,布布扣

bubuko.com,布布扣

bubuko.com,布布扣

向右边跑出的先

bubuko.com,布布扣

 

bubuko.com,布布扣

bubuko.com,布布扣

 

必须要给图片设置一个实际像素宽度或者

Js 给图片重置一个宽度

 

bubuko.com,布布扣

bubuko.com,布布扣

 

文档加载里面后紧跟着调用重置函数,,,没起作用。。

bubuko.com,布布扣

 

原因:可能是还没有加载到那个元素。。。。要等一会在去重置、、设置一个时间戳。。然后再去重置。。

 

bubuko.com,布布扣

可以通过js拿一下图片有木有头加载到

($(".hand .hand_img").attr("src"));

 

bubuko.com,布布扣

 

动画先后顺序

1. 动画队列

2. 加空白时间点(透明度为0)

 

bubuko.com,布布扣

 

场景初始并设置切换方向,切换缓动效果

bubuko.com,布布扣

bubuko.com,布布扣

 

目录结构时各场景html与js加载路径的变动

 

bubuko.com,布布扣

 

bubuko.com,布布扣

 

bubuko.com,布布扣

 

场景分组(如果不进行组与组之间的切换操作,鼠标滚动时场景的切换,始终是在一个组里面)

bubuko.com,布布扣

 

组的切换

bubuko.com,布布扣

设置执行一次

bubuko.com,布布扣

 

bubuko.com,布布扣

 

bubuko.com,布布扣

http://mrthink.net/demo/ijs20101205.htm

 

 

 

 

http://www.mybreeze.com.cn/safe.aspx

bubuko.com,布布扣

 

场景显示之后图片路径替换一下,,使用数组把图片路径储存起来

bubuko.com,布布扣

动画元素的每次初始化归队

 

bubuko.com,布布扣

 

bubuko.com,布布扣

bubuko.com,布布扣

不刷新下次再次进入时还原为

bubuko.com,布布扣

 

手机端uc对宽度百分比的解析与其他浏览器不一致

 

bubuko.com,布布扣

 

其他浏览器中效果

 

bubuko.com,布布扣

 

Uc中没有居中

Uc下改为实际像素就可以居中了

 

bubuko.com,布布扣

 

bubuko.com,布布扣

 

滚动条的绑定

 

bubuko.com,布布扣

 

bubuko.com,布布扣

 

该滚动条是个弹出后的滚动条..

先把其显示出来并且确保它没有被绑定滚动条,,然后再次对其绑定一个滚动条..

该容器为有overe-flow::hidden的那个

 

bubuko.com,布布扣

 

如果不是有弹出关闭的,,直接绑定就可以了

绑定的时间点要对

手机版触摸切换场景当场景里有overflow-y:scroll滚动条会滚动不了,直接也会触发场景的切换

手机版触摸切换场景事件禁用后,该滚动条的滚动事件也会被禁用也会导致滚动不了

解决方法:由于该项目没有触摸切换效果.我们可以直接注释掉触摸切换场景方法

 

 

bubuko.com,布布扣

 

bubuko.com,布布扣

 

http://zqtest.tuiyouyou.com/mlzc/index.html#

内部的滚动事件即可以使用了

简单的触摸,只有2种状态的时候

 

bubuko.com,布布扣

 

bubuko.com,布布扣

 

AnimateFrame.CurScenes.OnScenesAfterShow = function () {
  //  $(".page03 .bar").css("transform", ("rotate(" + 2 + "deg)"));
    //日期左右滑动事件
    var _offsetX = 0; 
    $(".yibiao").on("touchstart", function (e) {
        e = event.touches ? event.touches[0] : e;
        _offsetX = e.pageX; 
    });
    
    
    $(".yibiao").on("touchmove", function (e) {
        e = event.touches ? event.touches[0] : e;
        _startval+=e.pageX - _offsetX;
        _leftRight = e.pageX;
       
        if (e.pageX > _offsetX) {
            var _deg = e.pageX - _offsetX
            alert("you");
            $(".page03 .bar").removeClass("rotate01").addClass("rotate02");
           // Cmn.DebugLog($(".page03 .bar").css("transform"));
        } else {
            alert("zuo");
            var _deg = e.pageX + _offsetX
            $(".page03 .bar").removeClass("rotate02").addClass("rotate01");
           // Cmn.DebugLog($(".page03 .bar").css("transform"));
        } 
    });

    $(".yibiao").on("touchend", function (e) {
        _offsetX = 0;

    });
}

 

bubuko.com,布布扣

 

手机端滚动条流畅度设置

 

bubuko.com,布布扣

 

style="overflow: scroll;height:750px; -webkit-overflow-scrolling: touch; -moz-overflow-scrolling: touch; -o-overflow-scrolling: touch; position: relative;"

 

http://www.mybreeze.com.cn/safetytips.aspx

bubuko.com,布布扣

 

首先定义了一个全局变量

var _CurSafetytipsIndex = 0;//记忆当前选中的下标

 

bubuko.com,布布扣

bubuko.com,布布扣

 

 

http://zqtest.tuiyouyou.com/BANGNAO/index.html#

 

bubuko.com,布布扣

$(".back_top").click(function(){ $("body").scrollTop(0); });

bubuko.com,布布扣

 

bubuko.com,布布扣

 

$("#sel_citylist").attr("disabled", "disabled");

bubuko.com,布布扣

 

_name.removeAttr("disabled");

如果验证通过了就把input select设为只读

直接把验证函数放在if条件内

 

bubuko.com,布布扣

 

bubuko.com,布布扣

关于动画框架类注意的点点滴滴02

标签:android   style   blog   http   io   ar   os   使用   sp   

原文地址:http://www.cnblogs.com/ruoqiang/p/4094403.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!