J.chong

選中文字方法

    function selectText() {
        if (document.selection) { //IE
            return document.selection.createRange().text;//字符串
        }
        else {
            return window.getSelection().toString(); //getSelection()對象，需轉成字符串
        }
    }

阻止冒泡方法

function (ev) {
    ev = ev || event
    if(ev.stopPropagation){
        ev.stopPropagation();
    }
    else{
        ev.cancelBubble = true;
    }
}

完整例子

window.onload = function () {
    //選中文字方法
    function selectText() {
        if (document.selection) { //IE
            return document.selection.createRange().text;//字符串
        }
        else {
            return window.getSelection().toString(); //getSelection()對象，需轉成字符串
        }
    }

    var p = document.getElementById('p1')
    var img = document.getElementById('img')
    p.onmouseup = function (ev) {
        var ev = ev || event
        var left = ev.clientX;
        var top = ev.clientY;
        ev.stopPropagation()
        if (selectText().length > 10) {
            setTimeout(function () {  //延遲觸發
                img.style.display = 'block'
                img.style.left = left + 'px'
                img.style.top = top + 'px'
            }, 100)
        }
        else {
            img.style.display = ''
        }
    }
    p.onclick = function (ev) {
        var ev = ev || event;
        ev.cancelBubble = true
        /*if(ev.stopPropagation){
         ev.stopPropagation()
         }
         else{
         ev.cancelBubble = true;
         } //低版本可能需要兼容*/
    }
    document.onclick = function () {
        img.style.display = ''
    }
    img.onclick = function () {
        window.location.href = 'http://service.weibo.com/share/share.php?searchPic=false&title=' + selectText() + '&url=' + window.location.href;
    }
}

運行

關注點：
cloneNode(true); 子節點所有節點一起複製；
cloneNode(false);不複製子節點下的內容；
思想：移動ul，動態設置ul寬度li.length oneSize，移動ul的距離-iNow oneSize; 每個li的寬度：元素.offsetWidth+1;循環ul.removeChild(元素),一個個刪除，所以總是刪除第一個；
簡陋佈局

<div id="box">
    <ul id="ul">
        <li><div>1</div></li>
        <li><div>2</div></li>
        <li><div>3</div></li>
        <li><div>4</div></li>
        <li><div>5</div></li>
    </ul>
</div>
<input type="button" value="切換" id="input1"/>

window.onload = function () {
    var inp = document.getElementById('input1')
    var box = document.getElementById('box')
    var ul = document.getElementById('ul')
    var li = ul.getElementsByTagName('li')
    var oneSize = li[0].offsetWidth + 1; //li寬度
    var iNum = 4; //一次走多少個元素
    var onoff = true;//連續點擊錯亂bug
    getWidth()
    function getWidth() { //獲取ul寬度方法
        ul.style.width = li.length * oneSize + 'px'
    }
    inp.onclick = function () {
        //cloneNode(),cloneNode(true) 一起複製子節點，cloneNode(false),不會複製子節點
        if (onoff) {
            onoff = false; //一上來 false
            for (var i = 0; i < iNum; i++) {
                var oli = li[i].cloneNode(true);
                ul.appendChild(oli)
                getWidth()
            }
            startMove(ul, {left: -iNum * oneSize}, function () { //運動結束後再刪除前面的，才能循環
                for (var i = 0; i < iNum; i++) {
                    ul.removeChild(li[0]); //刪除
                    ul.style.left = '0'
                }
                onoff = true  //運動線束後可點擊，onoff = true;
            })
        }
    }
}

運行