QQ控件时光轴特效总结

1、插入HTML数据

        插入html代码，一般的做法是通过document.getElementById("").innerHTML来实现。

        然而在该控件中，它通过JS replace()来实现这个功能。

 

       在HTML代码中{year}{list}都是用来替代相应HTML代码的，在JS中可以动态的给它替换成需要的内容。

    <div id="tpl_scrubber_year">
        <a href="javascript:;" onclick="showYear({year},this)" class="s_year" id="scrubber_year_{year}">{year}
           <!--此处有大量重复内容显示 -->   
            {list}
        </a>
    </div>

 

     JS代码中通过replace()方法替换掉{year}类似的标记。

var tpl_scrubber_year = document.getElementById("tpl_scrubber_year").innerHTML.replace(/^\s*/,'').replace(/\s*$/,''); //去空
var year = "<div>.....</div>"; 
tpl_scrubber_year.replace(/\{year\}/g,year).replace(/\{year\}/g,year);

      以前写JS都只是最基本的实现，很少能够将一个组件从头到尾完整的敲出来（虽然只是看着别人的代码重复敲一遍），但对我来说都是一种很新奇、难得的体验。

      像这种通过替换标记字符(表达式)的形式，在JSP中EL表达式就有实现，只是从来都没有往这方面想过，没能举一反三。

2、unshift()

      unshift() 方法可向数组的开头添加一个或更多元素，并返回新的长度。

scrubber_month.unshift(  tpl_scrubber_month.replace(/\{year\}/g,year).replace(/\{month\}/g,month) );

      JS中关于数组元素操作的方法有不少，例如常用的push()、pop()、splice()等等。

 

3、字符串拼接

      一般情况下，字符串拼接都是通过 “+” 来完成。即时，知道通过数组的join()方法可以达到同样的效果，也很少会使用。

html_scrubber.join('')

 

4、内容始终浮动在窗口上方

position:fixed    生成绝对定位的元素，相对于浏览器窗口进行定位。

        window.onscroll = function(){

            var top = document.body.scrollTop ;
            if( top > 100){
                g('scrubber').style.position = 'fixed';
                g('scrubber').style.left = (getBodyW()-960)/2+ 'px';
                g('scrubber').style.top  = '60px';
            }else{
                g('scrubber').style.position = '';
                g('scrubber').style.left =     '';
                g('scrubber').style.top  =     '';
            }
        }