js选中文字出现分享按钮

最新推荐文章于 2021-06-03 15:34:35 发布

weixin_34148456

最新推荐文章于 2021-06-03 15:34:35 发布

阅读量2.4k

点赞数 2

文章标签： javascript ViewUI

原文链接：https://segmentfault.com/a/1190000004566001

版权

功能介绍：选中一段文字，出现分先按钮的标签，如何用js来实现？
html部分代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选中分享</title>
    <style>
        #p1{width: 400px;margin: 50px;}
        #div1{position: absolute;display: none;}
    </style>
</head>
<body>
<p id="p1">伟大梦想，要靠脚踏实地的努力。宏伟愿景，要有深谋远虑的方略。2０１６年全国两会，承载着不平凡的使命：正在提交审查、审议和讨论的“十三五”规划纲要草案、政府工作报告，事关中国今后五年的发展步骤、战略重点、任务安排，事关全面小康的良好开局。承接历史，开启未来。把党的主张、人民意愿通过法定程序转化为国家意志，决胜全面小康、奔向伟大复兴的“中国方略”正清晰展现在世人面前。</p>
<div id="div1"><img src="images/share.gif" alt="share"></div>
</body>
</html>

JavaScript代码部分：

<script type="text/javascript">
window.onload = function(){
    function selectText(){
        if(document.selection){ /IE浏览器下
            return document.selection.createRange().text;//返回选中的文字
        }
        else{  //非IE浏览器下
            return window.getSelection().toString();//返回选中的文字
        }
    }
    var oP = document.getElementById('p1');
    var oDiv = document.getElementById('div1');
    
    oP.onmouseup = function(ev){//设定一个onmouseup事件
        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.top = top + 'px';
            },100);
        }
        else{
            oDiv.style.display = 'none';
        }
    };
    
    oP.onclick = function(ev){
        var ev = ev || window.event;
        ev.cancelBubble = true;
    };
    document.onclick = function(){
        oDiv.style.display = 'none';
    };

    oDiv.onclick = function(){
        window.location.href ='http://service.weibo.com/share/share.php?url='+selectText()+'&url='+'http://blog.sina.com.cn';
    };
};
</script>

效果图所示：
图片描述

weixin_34148456

关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
js选中文字出现分享按钮

功能介绍：选中一段文字，出现分先按钮的标签，如何用js来实现？html部分代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>选中分享</title> ...
复制链接

扫一扫