Javascript特效：获取选中内容分享至微博

知识点

标准浏览器
```
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>

Javascript特效：获取选中内容分享至微博相关推荐

js学习笔记（获取选中内容、缓动动画、动态设置元素属性）
获取选中内容 1.标准浏览器 window.getSelection()拿到的是对象 window.getSelection().toString()拿到的是选中的文字 2.ie获取选中文字 docu ...
Javascript特效之删除内容效果
Javascript特效之删除内容效果今天分享一个网页经常会用到的删除内容效果即想列表一样的每列数据实现单列删除效果. 效果图: 点击右上角的X后该内容会慢慢删除. 实现思路:实际上很简单,就是在该 ...
Android中Spanner获取选中内容和选中位置，根据位置选择对象
作为一名菜鸟,关于spanner获取选中的内容文字代码,网上后很多但是根据给出的位置来自动选择对象,这个代码一直没找到后来找人问了问,才知道就一句话的事,特意在这里记录下 array.xml &l ...
Javascript如何获取选中项的文本值TEXT不是VALUE
1.文本框焦点问题 onBlur:当失去输入焦点后产生该事件 onFocus:当输入获得焦点后,产生该文件 Onchange:当文字值改变时,产生该事件 Onselect:当文字加亮后,产生该文件 & ...
js页面文字选中后分享到新浪微博实现
一.功能简述正是微博如火如荼的时节,其中各个微博的分享功能是网站推广产品的好东东啊,此时如何方便快捷的使用微博的分享功能就显得比较重要了.我的站点每篇文章的底部有一些分享的链接: 不过我觉得这些分享 ...
友盟社会化分享之自定义内容分享到微信,微博,豆瓣
以前移动端要做分享的时候一般是两种方法,要么使用Intent调用安卓系统自带的分享功能接口,这是最简单快捷的方法, 要么就自己去QQ微信和各个微博等社交网站申请开发者ID和key,然后在看他们的官方文 ...
js如何写html中的内容,javascript怎样获取某个标签的内容？
在我们平时的JS编程中,经常要获取标签的内容对其进行操作,有很多细节的东西容易被我们忽略,下面让我们来看一下JavaScript如何获取标签中的内容. HTML结构如下: Title 这有个第一个p ...
JavaScript jQuery获取radio/下拉框的选中值
JavaScript获取radio选中值 <ww:iterator value="proceList" status="rowstatus" id=&qu ...
html获取文本框中的文字,JavaScript实现input输入框点击获取文字内容
Js实现INPUT输入框,当鼠标点击文字时自动获取文字内容,并显示在文本框中,一个惯用的表单技巧,有时可省去一些用户输入的麻烦,可有效提升用户体验. input输入框获取js点击文字内容 .c{ wi ...
11种控制内容展示的JavaScript特效和技巧
交付信息结构是一个交互式用户界面所需要完成的首要任务.更直观的布局结构设计,能使用户更好的理解内容. 不管你想要介绍的是什么样的内容,你都可以以更加互动和更加适应的方式去呈现现它.本文里面,我们为你收 ...

Javascript特效：获取选中内容分享至微博

知识点

运行效果

代码

Javascript特效：获取选中内容分享至微博相关推荐

最新文章

热门文章