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

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

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

2024-08-01 20:08:14 230人阅读

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

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

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

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

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

4.布局空间的获取

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

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

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

布局自适应：

1.media查询

2.c法自适应

居中自适应

1.背景居中自适应

（始终取图片中间的部分，舍弃2侧）

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

2.实际尺寸

负边距

百分比下文字居中

字体的相对单位em…

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

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

加大后

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

动画顺序的问题

透明度由无到有变化

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

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

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

改为

当c_wrap设置relative了时

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

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

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

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

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

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

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

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

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

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检索是否有某些字符串