首页 > 代码库 > 关于动画框架类注意的点点滴滴01

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

好几个元素都是根据百分比来布局的,由于元素宽度大小不一致,,大屏幕与小屏幕里面切换后的布局可能会出现很多的偏差,(尤其是让他们都水平垂直居中显示时.更难做到一致性.)??

1.把所有小的元素放进较大的元素里面去,小元素再根据大元素定位,保证整体效果的一致性.

貌似又回到了完全自适应的方法了.

2.一个框,里面套个宽度100%的img(撑空间),其余元素与该img并列,然后设置定位absolute相对于那个框定位并相对那个框计算百分比

3.如果需要设置一个最小尺寸。。。可以通过给那个框一个min-width达到整体有个最小尺寸。

4.布局空间的获取

如想要得到土黄色块框里的区域

image

用一个等比例的较大图片来c空间

如果想要一个正方形的空间,就要一个较大的正方形图片来c空间.(框div宽度设置需要的百分比例,高度的获取:1宽高比得到,2.框直接设置高度百分比)

布局自适应:

1.media查询

2.c法自适应

居中自适应

1.背景居中自适应

(始终取图片中间的部分,舍弃2侧)

1Js ImageAdaptive(".bg1", ".page1_bg");

2.实际尺寸

负边距

百分比下文字居中

image

image

 

字体的相对单位em…

如果太小了(除了谷歌浏览器以外,谷歌始终最小12px)

给其父元素设置一个具体px的大小,字体大小就会相应变大一点

image

加大后

image

 

当前场景的锁定(弹出层弹出时禁止场景滚动)

 

image

 

 

动画顺序的问题

 

image

 

透明度由无到有变化

 

1.注意IE下 style="opacity: 1; filter:alpha(opacity=100);"兼容设置

2.IE下对许多小元素透明度由无到有变化时最好分开对每个分别最显示变化

(请勿偷懒在最外层套一个父元素然后只控制父元素的变化,其他浏览器下是OK的,但IE这个sb理解不了)

 

image

改为

image

 

当c_wrap设置relative了时

image

当c_wrap没有设置relative时,,,,里面图片计算宽度百分比就按照上面尺寸计算

image

多个元素的淡入切换fadeIn()

但是当一个元素的图片路径切换也要有淡入效果呢?

先隐藏然后切换路径最后在显示出来.

 

image

 

image

一个正方形的c图片放到一个div里,当很多这样的div排列到一起有换行时,惊奇的发现,居然这个div没有bei里面的正方形c图片撑出正方形空间,导致上下有4像素间隙。解决方法:该div设置font-size:0;

文字类的图片设置为百分比了。不论拉大还是缩小似乎都会模糊一些

解决方法:1.保持原尺寸,2.图片叠加

百分比高度的一定要设置一个height之后里面内容才能相对顶部定位布局(不然top:xx%无效)

image

 

模块宽度自适应(固定尺寸与百分比混合的自适应布局)

 

image

image

ResizeMenuWidth();$(window).resize(ResizeMenuWidth);function ResizeMenuWidth() {var _wWidth = $(window).width();var _width01 = $(".icon7").width();var _width02 = $(".btn_prev").width();var _width03 = $(".btn_next").width();//alert(_wWidth);//alert(_width01);//alert(_width02);//alert(_width03);var bWidth = _wWidth - (_width01 + _width02 + _width03);// alert(bWidth);$(".btn_box_cont").width(bWidth);}

 

Indexof()> -1检索是否有某些字符串

image

 

对应标题的获取

image

image

1. dom元素操作方式

image

2.传参的方式

image

image

错误方式(没有传递参数导致识别不了要置换那个----jQuery只会默认为置换第一个)

image

image

注意,,定义函数时要有一个obj的参数(形参).调用的时候要把obj换为this(实参)

类比下面一个

 

image

 

点击之后当场景再次返回时给第一个按钮添加一个click事件

image

 

image

试了一下要在OnScenesAfterShow事件以后

添加才有效

并且还有传到线上才能看到效果。。。这里不支持本地加载(存在一个跨域加载js html问题)

 

image

 

比较这两处的布局及效果

1.设计稿对比

image

image

 

2. 做出来的页面效果对比

image

image

3. Dom结构对比

image

image

4.css对比

image

image

结论:

1. rel的div随着百分比的增大宽度确实变大了,在谷歌浏览器的提示中可以看到.(以前以为没变化呢,那是在c法完全自适应的情况下rel增大,每个list也是百分比的跟着相应增大,导致感觉没变化,误认为rel百分比增大后宽度没变化……在非c法时他的布局空间不是靠图片c出来的明显看出变化了.)

2. 自适应的方式不同:c法是在个屏幕中宽高比例不变

注意:当rel的宽度百分比增大时list的宽度百分比要相应减小

 

image

 

image

 

这里要设置一个relative

 

image

真正内容div才能相对于它获取空间布局

image

image

image

Absolute的居中

1.固定尺寸

         负边距的一半

 

image

 

2.百分比尺寸

image

image

image

窗口居中3(relative)

image

image

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