js进阶小知识2

获取选中内容

   // 1.1 获取选中的文字 兼容
         var selectedText;
            if(window.getSelection){ // 标准模式 获取选中的文字
                selectedText = window.getSelection().toString();
            }else{ // IE 系列
                selectedText = document.selection.createRange().text;
            }

举例：微博分享

window.onload=function () {
        var selectedText;
        $("word").onmouseup=function (event) {
            if(window.getSelection){ // 标准模式 获取选中的文字
                selectedText = window.getSelection().toString();
            }else{ // IE 系列
                selectedText = document.selection.createRange().text;
            }
            $("share_weibo").style.display="block";
            var e=event || window.event;
            $("share_weibo").style.left=e.clientX+"px";
            $("share_weibo").style.top=e.clientY+"px";

        }
        //页面点击时取消选择
        document.onmousedown=function (event) {
            var e=event || window.event;
            var targetId=e.target ? e.target.id :e.srcElement.id;
            if(targetId!="share_weibo"){
                $("share_weibo").style.display = "none";
            }else{
                //链接的路径 微博分享的API接口
                window.location.href = 'http://v.t.sina.com.cn/share/share.php?searchPic=false&title=' + selectedText;
            }
            //清除选择
         window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
        }
    }
</script>

2.基本动画原理 ：left=offsetLeft+speed+"px"; 定时器实现累加
封装基本动画动画

//封装基本动画
function move(obj,target,speed) {
    clearInterval( obj.timer);
    var speed=target>obj.offsetLeft ? speed : -speed;
    obj.timer=setInterval(function () {
        obj.style.left=obj.offsetLeft+speed+"px";
        //判断是否超过目标值或少于目标值 可用差值与布长判断 不管大于或小于 使她等于目标值
        if(Math.abs(target-obj.offsetLeft)<Math.abs(speed)){
            clearInterval(obj.timer);
            obj.style.left=target+"px";
        }
    },20)
}

可运用基本动画做一个案例
仿淘宝轮播 原生js

<script>
        window.onload=function () {
            var aLi=$("ul").children;
            var olIndex=0,aLiIndex=0,timer=null;
            //创建元素 初始化
            $("ul").appendChild(aLi[0].cloneNode(true));
            for(var i=0;i<aLi.length-1;i++){
                var li=document.createElement('li');
                $("ol").appendChild(li);
            }
            $("ol").children[0].className="current";

            //添加事件
            var aOl= $("ol").children;
            for(var i=0;i<aOl.length;i++){
                //运用闭包 让里边可以访问外边i
                (function (i) {
                    aOl[i].onmouseover=function () {
                        for(var j=0;j<aOl.length;j++){
                            aOl[j].className="";
                        }
                        this.className="current";
                        move($("ul"),-i*750,35);
                        olIndex=aLiIndex=i;
                    }
                })(i)
            }
            clearInterval(timer);
            timer=setInterval(lunbo,3000);
            //自动轮播的函数
            function lunbo() {
                olIndex++;
                if(olIndex>aOl.length-1){
                    olIndex=0;
                }
                for(var j=0;j<aOl.length;j++){
                    aOl[j].className="";
                }
                aOl[olIndex].className="current";

                aLiIndex++;
                //关键点 当轮播到复制的图片时 left为0 索引为1 
                if(aLiIndex>aLi.length-1){
                    $("ul").style.left=0+"px";
                    aLiIndex=1;
                }
                move($("ul"),- aLiIndex*750,25);
            }
            $("slider").onmouseover=function () {
                clearInterval(timer);
            }
            $("slider").onmouseout=function () {
                timer=setInterval(lunbo,3000);
            }
        }

3.Math常用函数
Math.random() //随机获取0~1随机数
Math.round() //四舍五入取值
Math.ceil() //向上取值
Math.floor() //向下取值
Math.abs() //取正数

4.缓动动画 例如：speed改变 left=offsetLeft+speed+"px" speed=(target-offsetLeft)*缓动系数
封装缓动函数

**
 * 缓动动画
 * @param obj
 * @param json
 * @param fuc
 */

function buffer(obj, json,fuc) {
    // 1.1 清除定时器
    clearInterval(obj.timer);
    // 1.2 设置定时器
    var begin = 0, target = 0, speed = 0;
    obj.timer = setInterval(function () {
        // 1.3.0 旗帜
        var flag = true;
        for(var k in json){
            // 1.3 获取初始值
            begin = parseInt(getStyleAttr(obj, k)) || 0;
            target = parseInt(json[k]);

            // 1.4 求出步长
            speed = (target - begin) * 0.2;

            // 1.5 判断是否向上取整
            speed = (target > begin) ? Math.ceil(speed) : Math.floor(speed);

            // 1.6 动起来
            obj.style[k] = begin + speed + "px";

            // 1.5 判断
            if(begin !== target){
                flag = false;
            }
        }
        // 1.3 清除定时器
        if(flag){
            clearInterval(obj.timer);
            // 判断有没有回调函数
            if(fuc){
                fuc();
            }
        }
    }, 20);

}

举例：缓动动画未封装时 返回顶部 原理：begin=scroll().top target=0;
scrollTo(0,begin)

window.onload=function () {

        //声明变量
        var begin=0,end=0,timer=null;
        clearInterval(timer);
        //监听窗口滚动
        window.onscroll=function () {
            begin=scroll().top;
            begin>0 ? show($("top")) : hide($("top"));
            $("top").onclick=function () {
                timer=setInterval(function () {
                    //欢动动画
                    begin+=(end-begin)*0.2;
                    scrollTo(0,begin);
                    console.log(begin,end);
                    //清除定时器
                    if(parseInt(begin)==end){
                        clearInterval(timer);
                    }
                },20)
            }

        }
    }

5.获取css值 封装函数

  function getStyleAttr(obj, attr) {
        if(obj.currentStyle){ // IE 和 opera
            return obj.currentStyle[attr];
        }else {
            return window.getComputedStyle(obj, null)[attr];
        }
    }

举例：楼层特效 原理：鼠标点击 运动相同位置 scrollTop=索引*client().height 滚动条滚动 左边划到相应楼层原理：当滚动条滚动距离>=当前划到大的内容.offsetTop 设置当前状态

 window.onload=function () {
        //1.获取元素
        var oLis=$("ol").children;
        var uLis=$("ul").children;
        //2.初始化li颜色
        var colorArr = ['red', 'green', 'blue', 'purple', 'yellow'];
        for(var i=0;i<colorArr.length;i++){
            uLis[i].style.backgroundColor=colorArr[i];

        }
        var iClick=false;
        //3.添加点击事件 动画实现
        for(var i=0;i<oLis.length;i++){
            (function (i) {
                var oI=oLis[i];
                oI.onmousedown=function () {
                    iClick=true;
                    for(var j=0;j<oLis.length;j++){
                        oLis[j].className="";
                    }
                    this.className="current";

                    //document.documentElement.scrollTop=通过索引*可视区域的高度
                    buffer(document.documentElement,{scrollTop:i*client().height});
                    iClick=false;
                }
            })(i)
        }
        //4.当滚动条滚动时 左边Li显示当前li
        document.onscroll=function () {
            if(!iClick){
                //获取滚动高度
                var roll=scroll().top;
                for(var i=0;i<uLis.length;i++){
                    if(roll>=uLis[i].offsetTop){
                        for(var j=0;j<oLis.length;j++){
                            oLis[j].className="";
                        }
                        oLis[i].className="current";
                    }
                }
            }
        }
    }