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

响应式视频嵌套

 

Js

判断为苹果浏览器

谷歌浏览器的版本信息

 

苹果浏览器版本信息

 

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

 

 

 

<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布局结构是一样的且并列关系

 

 

 

 

 

 

 

 

 

  $("#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%" });
});

 

 

 

<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

 

 

if (Cmn.Func.IsIOS()) {

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

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

}

 

跳转到手机版

 

 

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

 

 

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

 

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

 

 

 

向左跑出的线

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

 

向右边跑出的先

 

 

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

Js 给图片重置一个宽度

 

 

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

 

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

 

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

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

 

 

动画先后顺序

1. 动画队列

2. 加空白时间点（透明度为0）

 

 

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

 

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

 

 

 

 

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

 

组的切换

设置执行一次

 

 

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

 

 

 

 

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

 

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

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

 

 

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

 

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

 

 

其他浏览器中效果

 

 

Uc中没有居中

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

 

 

 

滚动条的绑定

 

 

 

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

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

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

 

 

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

绑定的时间点要对

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

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

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

 

 

 

 

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

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

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

 

 

 

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;

    });
}

 

 

手机端滚动条流畅度设置

 

 

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

 

首先定义了一个全局变量

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

 

 

 

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

 

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

 

 

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

 

_name.removeAttr("disabled");

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

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