JS特效——获取选中内容分享至微博
程序员文章站
2022-05-28 19:46:39
...
知识点
- 标准浏览器
window.getSelection();
- ie获得选择的文字
document.selection.createRange().text;
- 兼容性写法
var selectedText; if(window.getSelection){ //标准模式 selectedText = window.getSelection().toString(); }else{ // IE系列 selectedText = document.selection.createRange().text; }
- 微博分享
window.location.href = 'http://v.t.sina.com.cn/share/share.php?' + 'searchPic=false&title='+selectedText+'&url=https://blog.csdn.net/KaiSarH'
- 获取事件兼容性写法
var e = ev1 || window.event;
- 获取点击目标及其ID
var target = e.target ? e.target : e.srcElement; var targetID = e.target ? e.target.id : e.srcElement.id;
运行效果
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{margin: 0;padding: 0;list-style: none;}
p{margin: 100px;width: 300px;}
#share_wei_bo{
width: 26px;
height: 26px;
background: url("images/share.gif");
position: absolute;
display: none;
}
</style>
</head>
<body>
<p id="word">
虎扑12月27日讯 独行侠今日坐镇主场迎来马刺的挑战,东契奇伤愈复出回归。首节开局独行侠凭借两记三分取得8-0的领先,这波攻势帮助独行侠在首节大部分时间里一直取得领先,不过末段的突然哑火拱手让出领先优势,马刺凭借一波9-0的小高潮反超比分,首节结束时马刺24-20领先独行侠。次节双方进攻端手感热得发烫打出高效对飙,不过独行侠最后时刻抓住机会送出10-2的小高潮,这10分都和东契奇有关,独行侠也借着这波攻势以54-47领先马刺结束上半场。
休息归来,独行侠继续控制着局面,小哈达威和克勒贝尔的两记三分曾帮助球队取得10分领先。不过马刺及时找回状态,盖伊回敬两记三分将分差追至5分保留希望。然而末节独行侠的三分火力更加凶猛,他们不足半节时间飙进7记三分,一波三分雨直接将分差拉大至15分奠定胜局。末段马刺掀起反击,但追至4分之时,时间也已经走完。最终,独行侠102-98击败马刺拿下比赛。
</p>
<div id="share_wei_bo"></div>
<script src="../MyTools/MyTools.js"></script>
<script>
var selectedText;
window.addEventListener('load',function (ev) {
// 1. 监听鼠标松开
myTool.$('word').addEventListener('mouseup',function (ev) {
var e = ev || window.event;
// 1.1 获取选中文字
// console.log(window.getSelection().toString());
if(window.getSelection){ //标准模式
selectedText = window.getSelection().toString();
}else{ // IE系列
selectedText = document.selection.createRange().text;
}
// console.log(myTool.getSelectedText);
// 1.2 显示
if (selectedText.length !== 0){
myTool.$('share_wei_bo').style.display = 'block';
// 1.3 处理位置
myTool.$('share_wei_bo').style.left = e.pageX + 'px';
myTool.$('share_wei_bo').style.top = e.pageY + 'px';
}
});
// 2. 监听文档点击
document.addEventListener('mousedown',function (ev1) {
var e = ev1 || window.event;
// 2.1 获取点击的目标
var targetID = e.target ? e.target.id : e.srcElement.id;
// 2.2 判断
if (targetID !== 'share_wei_bo'){
myTool.$('share_wei_bo').style.display = 'none';
}else{
window.location.href = 'http://v.t.sina.com.cn/share/share.php?' +
'searchPic=false&title='+selectedText+'&url=https://blog.csdn.net/KaiSarH'
}
});
}, false);
</script>
</body>
</html>
上一篇: JS特效——旋转木马轮播图