小小的文字滚动

[yzsolo]

var time = '2016/04/21';

由于历史遗留，发现ctrip512后加的系统提示在h5中没有滚动效果，ok，fix it！
需求：从接口获取展示数据，数据不超过显示窗口，则不滚动，超过则滚动。

过程：Talk is cheap，在做的过程中的主要问题就是内容长度不可控，也想过用两个相同内容的元素，交替滚动，但如果能把控好内容长度，其实一个就足够了，也能很好的解决是否超过可视区从而滚动文字的问题。

结果：从最初的获取页面字体大小和内容字数来计算得到内容长度（包括汉字和字母ps：是由于字母的长度实在是不可控，比如i和a就不同，所以才会想要找到更好的解决方案。），到后面的用前后的差值来计算得到内容的长度，都是满满的优化和思考的过程。

Show me the code

                         /*0.3*/ 
                         //dValue: 根据差值算出内容的长度
                         //boxLength：盒子可视的宽度
                        var isNum = util.isNumber;
                        var $contentCopyEle = $contentCopy.el[0];
                        var dValue = $contentCopyEle.offsetLeft - $content.el[0].offsetLeft - $contentCopyEle.offsetWidth;
                        var boxLength = +($jsMore.css('width').slice(0, -2));
                        var offset = 0;

                        if (isNum(boxLength) && isNum(dValue) && (dValue > boxLength)) {

                            if(leftMove) {
                                clearInterval(leftMove);
                            }

                            var leftMove = setInterval(function(){

                                if(Math.abs(offset) === dValue){
                                    offset = boxLength;
                                }

                                $content.css({'margin-left': (offset--) +"px"});

                            }, 30);

                        }

                        /*0.2*/

                        // var dom1 = document.getElementById('js-more');
                        // var dom2 = document.getElementById('system_notice_content1');
                        // var dom3 = document.getElementById('system_notice_content2');

                        // dom2.style.width = dom1.offsetWidth + 'px';
                        // dom3.style.width = dom1.offsetWidth + 'px';

                        // function scrollleft()
                        // {
                        //
                        //     if(dom1.scrollLeft>=dom1.offsetWidth)
                        //     {
                        //       dom1.scrollLeft=0;
                        //       console.log(dom1.scrollLeft);
                        //     }else
                        //     {
                        //       dom1.scrollLeft++;
                        //       console.log(dom1.scrollLeft);
                        //     }
                        // }

                        // setInterval(scrollleft, 30);


                        /*0.1*/ 
                        // var isNum = util.isNumber;
                        // var boxLength = +($jsMore.css('width').slice(0, -2));
                        // var words = $content.html();
                        // var wordsTotalNum = words.length;
                        // var letterNum = util.getLetterLength(words);
                        // var wordsNum = wordsTotalNum - letterNum;
                        // var fontSize = +($content.css('font-size').slice(0, -2));
                        // var contentLength = (isNum(wordsNum) && isNum(letterNum) && isNum(fontSize))?(wordsNum + letterNum * 0.5) * fontSize:'';
                        // var offset = 0;

                        // if (isNum(contentLength) && isNum(boxLength) && (contentLength > boxLength)) {

                        //     if(leftMove) {
                        //         clearInterval(leftMove);
                        //     }

                        //     var leftMove = setInterval(function(){

                        //         if(Math.abs(offset) === contentLength){
                        //             offset = boxLength;
                        //         }

                        //         $content.css({'margin-left': (offset--) +"px"});

                        //     }, 30);

                        // }

话说在写RN的时候遇到过RN的手势与native的手势冲突的问题（RN嵌在Native中），那个问题的最后解决方法也是利用了RN的panresponder解决，感觉多少有点hack（不正规）的意思