Web 技术研究所

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

最近流行抖动,咱也来抖一抖

  抖动其实就是一直做一个微小的运动。岛国爱情动作片里用的按摩棒,里面的构造其实就是用电动机让一个金属块偏离中心旋转,利用惯性造成震动的效果。而我们要做的效果是2D的,也没有惯性的影响,所以不需要用让物体完整的旋转一周,只需要在微小的角度上来回旋转就可以了。这样的运动说是旋转,不如说来回摆动。而且当震动频率高时,这个摆动中间的过程也可以省略,我们要做的只是让物体在两个角度上不断变化而已。比如让一个物体在顺时针旋转3度和逆时针旋转3度的情况不断切换,这就可以得到抖动的效果。下面是例子 <style>
li {
  font:14px/32px 微软雅黑;cursor:default;
  display:block;position:absolute;
  filter:progid:DXImageTransform.Microsoft.Matrix(
    SizingMethod='Auto Expand'
  );
}
</style>
<ul>
  <li>貌似。。</li>
  <li>今天是</li>
  <li>大年初一</li>
  <li>你幸福吗?</li>
</ul>
<script>
//获取,并遍历列表
var i,s=document.getElementsByTagName("li");
for(i=0;i<s.length;i++)s[i].onmouseover=function(){
  var i,v,w,h,o=this;
  //防止重复触发
  if(o.itv)return;
  //初始化参数
  i=10,v=3,w=o.offsetWidth,h=o.offsetHeight;
  //创建计时器
  o.itv=setInterval(function(){
    rotate(v=-v);//旋转,正负v的跳,造成抖动效果
    //每跳一下消耗一个i,当i消耗完时关闭计时器,并还原初始状态
    if(!--i)clearInterval(o.itv),rotate(o.itv=0);
  },50);
  //定义rotate函数,用来旋转元素
  function rotate(d){
    var e,c,s;
    if(o.filters){//IE使用滤镜矩阵变换来做旋转
      e=o.filters[0],d=d*Math.PI/180,
      c=Math.cos(d),s=Math.sin(d);
      e.M11=c,e.M12=-s,e.M21=s,e.M22=c;
      o.style.margin=
        -(Math.abs(s*w)+Math.abs(c*h)-h)/2+"px "+
        -(Math.abs(s*h)+Math.abs(c*w)-w)/2+"px";
    }else{//非IE使用CSS3旋转
      e=o.style;
      e.WebkitTransform=e.MozTransform=e.OTransform=
      "rotate("+d+"deg)";
    };
  };
},s[i].style.top=(i+1)*32+"px";
</script>

  由于旋转在IE上的兼容比较麻烦,如果不明白可以看看以前的文章“元素中心旋转在CSS3和IE滤镜中的实现”。
网名:
3.84.186.*
电子邮箱:
仅用于接收通知
提交 悄悄的告诉你,Ctrl+Enter 可以提交哦
神奇海螺
[查看全部主题]
各类Web技术问题讨论区
发起新主题
本模块采用即时聊天邮件通知的模式
让钛合金F5成为历史吧!
次碳酸钴的技术博客,文章原创,转载请保留原文链接 ^_^