几种常用的特效

1.回到顶部

<script>
    var goTop = document.getElementById('goTop');
    goTop.onclick = function () {
        var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
        var timer = setInterval(function () {
            window.scrollTo(0, scrollTop-=10);
            if(scrollTop <= 0){
                clearInterval(timer);
            }
        }, 30);
    };
</script>

2.拖拽方框到指定位置

<script>
        var oDiv = document.getElementById('div1');
        oDiv.onmousedown = function (e) {
            e = e || window.event;
            //获得鼠标当前所在位置相对于div左边和上边的距离
            var disX = e.clientX - oDiv.offsetLeft;
            var disY = e.clientY - oDiv.offsetTop;
            document.onmousemove = function (e) {
                e = e || window.event;
                oDiv.style.left = e.clientX - disX + 'px';
                oDiv.style.top = e.clientY - disY + 'px';
            };
            oDiv.onmouseup = function () {
                document.onmousemove = null;
            };
        };
    </script>

3.轮播图

function changImg(elem) {
            for(var i=0; i<aLi.length; i++){
                aLi[i].className = '';
                aImgs[i].className = '';
            }
            elem.className = 'selected';
            aImgs[elem.index].className = 'selected';
        }
        oNext.onclick = function () {
            index++;
            if(index == aLi.length){
                index = 0;
            }
            changImg(aLi[index]);
        };
        oPrev.onclick = function(){
            index--;
            if(index == -1){
                index = aLi.length - 1;
            }
            changImg(aLi[index]);
        };
        var timer;
        function run() {
            timer = setInterval(function () {
                oNext.onclick();
            }, 2000);
        }
        run();
        oContainer.onmouseover = function () {
          clearInterval(timer);
        };
        oContainer.onmouseout = function () {
            run();
        };

4.选择器

  var aDiv = oContent.children;
        for(var i=0; i<aLi.length; i++){
            aLi[i].index = i;
            aLi[i].onclick = function () {
                for(var i=0; i<aLi.length; i++){
                    aLi[i].className = '';
                    aDiv[i].className = '';
                }
                this.className = 'selected';
                aDiv[this.index].className = 'selected';
            };
        }