原生JS实现选中文字分享
原生JS实现选中文字分享
越陌度阡
发布于 2020-11-26 15:04:34
发布于 2020-11-26 15:04:34
代码可运行
运行总次数：0
代码可运行
当我们在阅读某些文章时，会看到一些比较精彩的语句急于分享，下面分享一个选中文字分享的功能，实现类似于下面的效果。
以下是代码实现：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>原生JS实现选中文字分享</title>
<style>
#p1 {
width: 300px;
margin: 50px;
}
#div1 {
position: absolute;
display: none;
}
</style>
<script>
window.onload = function () {
// 封装选择文字函数
function selectText() {
// 针对IE浏览器，如果document.selection存在
if (document.selection) {
// 调用其下的ctreateRange()方法，返回选择的text
return document.selection.createRange().text;
} else {
// 在标准浏览器下通过getSelection()获得一个对象,调用toString()方法返回字符串
return window.getSelection().toString();
}
}
// 获取p元素
var oP = document.getElementById('p1');
// 获取div元素
var oDiv = document.getElementById('div1');
// 为p元素添加鼠标抬起函数
oP.onmouseup = function (ev) {
// 获取鼠标抬起的event对象
var ev = ev || window.event;
// 获得鼠标的x值存为left
var left = ev.clientX;
// 获得鼠标的y值存为top
var top = ev.clientY;
// 当选中的文字数量大于10的时候
if (selectText().length > 10) {
// 由于在IE下触发图片显示的太快，隐响体验，设定时器延时
setTimeout(function () {
// 将分享提示图片显示为block
oDiv.style.display = 'block';
// 将分享提示图片的left值设为鼠标的left值
oDiv.style.left = left + 'px';
// 将分享提示图片的top值设为鼠标的top值
oDiv.style.top = top + 'px';
}, 100);
} else {
// 当选中文字小于10的时候,不显示图片
oDiv.style.display = 'none';
}
};
// 点击文字的时候，也会冒泡到document上,给op加点击事件，阻止泡冒
oP.onclick = function (ev) {
var ev = ev || window.event;
ev.cancelBubble = true;
};
// 点击页面任意位置让分享图片消失
document.onclick = function () {
oDiv.style.display = 'none';
};
// 为分享提示图片添加点击事件
oDiv.onclick = function () {
// 将页面跳转到分享页面,传递要分享的文字selectText()及当前地址
window.kk =
'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="images/0.gif" /></div>
</body>
</html>点击分享按钮后，效果如下：
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2019/07/19 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
腾讯云开发者
