Web 技术研究所

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

直接操作样式表来实现特效

  通常,我们在页面插入脚本时要么全放开头,要么全放末尾,不至于把程序散落到HTML中(除了一些特殊情况)。这么做可以让程序的逻辑更清晰,但对于一些基于修改元素样式来实现的特效可能就会变得需要在文档加载完毕后才能工作。为何不试试修改演示表呢?
  这是一个旋转效果的传统实现方式。代码是在元素加载之前运行的,无法直接对元素的样式做修改。只有让代码运行在DOMContentLoaded之后才能确保元素加载完成。 <head>
<style>
#e {
  margin:200px;width:50px;height:50px;
  position:absolute;left:0px;top:0px;
  background:#333;border-radius:100%;
}
</style>
<script>
addEventListener("DOMContentLoaded",function(){
  var i=0;
  var style=e.style;
  (function func(){
    style.top=Math.sin(i/10)*100+"px";
    style.left=Math.cos(i/10)*100+"px";
    i++;
    setTimeout(func,16);
  })();
});
</script>
</head>
<body>
<div id="e"></div>
</body>
  但是文档的加载可能很慢,这就增加用用户等待的时间,带来不好的体验。所以下面的实现使用修改样式表的方式。 <head>
<style>
#e {
  margin:200px;width:50px;height:50px;
  position:absolute;left:0px;top:0px;
  background:#333;border-radius:100%;
}
</style>
<script>
(function(){
  var i=0;
  var styleSheet=document.styleSheets[0];
  var rule=(styleSheet.rules||styleSheet.cssRules)[0];
  var style=rule.style;
  (function func(){
    style.top=Math.sin(i/10)*100+"px";
    style.left=Math.cos(i/10)*100+"px";
    i++;
    setTimeout(func,16);
  })();
})();
</script>
</head>
<body>
<div id="e"></div>
</body>
  这么一来,程序就不需要在意元素是否加载了。一旦元素加载完成就立即实现了特效,期间没有任何间隔。
  当然,这么做也会带来一定的问题,比如动画会在元素加载完成之前开始播放,用户可能会看不到动画最开始的部分。但是动画仅仅是特效这个大概念中的一个而已,这个思路也许可以在其它地方找到更好的用途。
网名:
3.80.55.*
电子邮箱:
仅用于接收通知
提交 悄悄的告诉你,Ctrl+Enter 可以提交哦
神奇海螺
[查看全部主题]
各类Web技术问题讨论区
发起新主题
本模块采用即时聊天邮件通知的模式
让钛合金F5成为历史吧!
次碳酸钴的技术博客,文章原创,转载请保留原文链接 ^_^