JS -选中文字分享

1.效果图
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        #p1{ width:300px; margin:50px;}
        #div1{ position:absolute; display:none;}
    </style>
    <script>
        window.onload = function(){
            function selectText(){
                if(document.selection){
                    return document.selection.createRange().text;
                }else{
                    return window.getSelection().toString();
                }
            }
            var oP = document.getElementById('p1');
            var oDiv = document.getElementById('div1')
            oP.onmouseup = function(ev){ //只有事件调用才有event内容,否则为空
                var ev = ev || window.event;
                var left = ev.clientX;
                var top = ev.clientY;
                if(selectText().length > 10){
                    setTimeout(function(){ //定时器用于延迟加载否则如果选中文字太快,图片跟不上
                        oDiv.style.display = 'block';
                        oDiv.style.left = left +'px';
                        //oDiv.style.left = ev.clientX +'px';  //错误!ev为空!!!定时器调用的匿名函数没有事件!
                        oDiv.style.top = top + 'px';
                    },100);
                }else{
                    oDiv.style.display ='none';
                }
            };

            oP.onclick = function(ev){ //点击文字也会冒泡到document上,所以阻止段落的冒泡,让段落独享
                var ev = ev || window.event;
                ev.cancelBubble = true;
            }

            document.onclick = function(){ //点击任意位置让图标消失
                oDiv.style.display = 'none';
            }

            oDiv.onclick = function(){
                window.location.href = 'http://v.t.sina.com.cn/share/share.php?searchPic=false&title='+selectText()
                                          +'&url=http://blog.sina.com.cn/s/blog_4ccdaee70100y7w0.html?tj=1';
            }

        }
    </script>
</head>
<body>
<p id="p1">
    其意义在于，它宣告了野生华南虎这一珍稀物种，还没有在中华大地上灭绝，为人类对这一珍稀物种进行保护提供了第一手的科学依据。
    至于照片本身并没有过高的艺术欣赏价值，相关部门机构对周正龙进行奖励，是对他爱国壮举、重大科学发现的奖励，而不是购买他的照片。
    既然2007版的野生华南虎照片得不到某些戴着有色眼镜的人的认可，那么，矢志不移、百折不挠、大难不死的周正龙，再去寻找老虎，拍摄老虎，用高清晰、更有力的照片等证据
</p>
<div id="div1"><img src="a7.jpg" style="width: 30px; height: 30px;"  /></div>
<!--<div id="div1"><img src="share.gif" /></div>-->
</body>
</html>
posted @ 2016-10-10 23:41 黑土白云阅读(221) 评论(0) 收藏举报
刷新页面返回顶部
JS -选中文字分享

公告
