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();
        }
    }

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)

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


                    
                    

你可能感兴趣的:(js进阶小知识2)