首页 > 代码库 > 关于动画框架类注意的点点滴滴02
关于动画框架类注意的点点滴滴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 = "http://www.mamicode.com/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条件内
关于动画框架类注意的点点滴滴02