當我們在閱讀某些文章時，會看到一些比較精彩的語句急于分享，下面分享一個選中文字分享的功能，實作類似于下面的效果。
以下是代碼實作：
<!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> 複制
點選分享按鈕後，效果如下：
