Web 技术研究所

我一直坚信着,Web 将会成为未来应用程序的主流

为响应式做过渡效果

  浏览器的窗口尺寸是不固定的,比如PC上可以直接拖动修改窗口尺寸,而移动设备上的翻转功能也会牵扯到窗口尺寸。既然有窗口的尺寸变化,那过渡效果就有意义。常规流布局无法对元素的位置进行过渡,所以我们需要手动计算元素位置,并使用绝对定位。
  这里偷个懒,依然使用昨天的例子。在昨天例子的基础上对LI元素计算坐标,并绝对定位,然后对所有LI的尺寸和位置加上过渡效果。这样在拖动浏览器修改尺寸或翻转移动设备时就能看到元素重新定位的过渡效果了。

<style>
body {overflow-y:scroll;}
#wall {
  position:relative;
  overflow:hidden;
  background:#FAFAFA;
  text-align:justify;
  font-size:0px;
  padding:0px;
}
#wall>li {
  position:absolute;
  display:inline-block;
  overflow:hidden;
  color:#333;
  background:#F5F5F5;
  border:1px solid #CCC;
  padding:8px;
  margin:5px;
  text-align:center;
  font:14px/1 Simsun;
  text-decoration:none;
  transition:all 1000ms ease;
}
#wall>li img {
  border:none;
  background:#EEE;
  display:block;
  margin-bottom:8px;
  width:100%;
}
</style>
<ul id="wall"></ul>
<script>
//生成随机项
(function(){
  for(var i=0;i<100;i++){
    var li=document.createElement("li");
    //随机图片尺寸
    li.w=Math.random()*300+300|0;
    li.h=Math.random()*200+200|0;
    //宽度增量只按会缩放的图片来计算
    li.k=li.w/li.h;
    //添加图片
    var img=document.createElement("img");
    li.appendChild(img);
    //添加超连接诶
    var a=document.createElement("a");
    a.textContent=li.w+"x"+li.h;
    a.href="JavaScript:";
    li.appendChild(a);
    //放入文档中
    wall.appendChild(li);
    wall.appendChild(document.createTextNode(" "));
  };
  format();
})();

//调整布局
function format(){
  var WIDTH=wall.offsetWidth-10,HEIGHT=50,MARGIN=10,EXTENSION=18;
  var l=0,r=0,k=0,s=wall.children,rowWidth=0,top=0;
  //遍历元素
  for(r=0;r<s.length;r++){
    //计算缩放后的宽度
    s[r].scaledWidth=HEIGHT/s[r].h*s[r].w;
    //计算占用的宽度
    var usedWidth=s[r].scaledWidth+MARGIN+EXTENSION;
    //如果该行放不下缩放后的元素则
    if(rowWidth+usedWidth>WIDTH)
      //对剩余的空白进行微调,并重置行参数
      resize(WIDTH-rowWidth+MARGIN),rowWidth=0,k=0;
    //累加行参数
    k+=s[r].k;
    rowWidth+=usedWidth;
  };
  //对末行处理
  resize(0);
  wall.style.height=top+"px";
  //处理微调
  function resize(trimming){
    var h=trimming/k;
    var width,height=HEIGHT+h|0;
    var left=0;
    for(;l<r;l++){
      width=s[l].scaledWidth+s[l].k*h|0;
      s[l].style.width=width+"px";
      s[l].children[0].style.height=height+"px";
      s[l].style.top=top+"px";
      s[l].style.left=left+"px";
      left+=width+MARGIN+EXTENSION;
    };
    top+=height+MARGIN+EXTENSION+14+8;
  };
};

//绑定事件
window.onresize=format;
</script>
  在某个尺度下对某个元素隐藏也是响应式设计中很普遍的做法。而这个隐藏可以不直接对元素display:none,而让其绝对定位并移动到屏幕之外的地方,或者将其宽或高修改到0。这样加上过渡效果可以得到更好的用户体验。
网名:
54.226.58.*
电子邮箱:
仅用于接收通知
提交 悄悄的告诉你,Ctrl+Enter 可以提交哦
神奇海螺
[查看全部主题]
各类Web技术问题讨论区
发起新主题
本模块采用即时聊天邮件通知的模式
让钛合金F5成为历史吧!
次碳酸钴的技术博客,文章原创,转载请保留原文链接 ^_^