选中文字分享案例。
描述:选中文字大于10的时候,出现分享图表
知识点:怎么获取到选中的文字?
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="http://www.17sucai.com/preview/140768/2015-01-13/100-css3-animated-icon/css/icono.min.css">
<style>
.icono-document{ background: #000; display: block; }
p{ width: 300px; margin:50px; }
#div1{ position: absolute;; display: none; width: 28px; height: 30px;}
</style>
</head>
<body>
<p id="p1">
新华社北京12月8日电(记者吴晶、胡浩)全国高校思想政治工作会议12月7日至8日在北京召开。中共中央总书记、国家主席、中央军委主席习近平出席会议并发表重要讲话。他强调,高校思想政治工作关系高校培养什么样的人、如何培养人以及为谁培养人这个根本问题。要坚持把立德树人作为中心环节,把思想政治工作贯穿教育教学全过程,实现全程育人、全方位育人,努力开创我国高等教育事业发展新局面。
中共中央政治局常委、中央书记处书记刘云山作总结讲话。中共中央政治局常委王岐山、张高丽出席会议。
习近平在讲话中指出,教育强则国家强。高等教育发展水平是一个国家发展水平和发展潜力的重要标志。实现中华民族伟大复兴,教育的地位和作用不可忽视。我们对高等教育的需要比以往任何时候都更加迫切,对科学知识和卓越人才的渴求比以往任何时候都更加强烈。党中央作出加快建设世界一流大学和一流学科的战略决策,就是要提高我国高等教育发展水平,增强国家核心竞争力。
</p>
<!-- <div id="div1"><div class="icono-document"></div></div> -->
<div id="div1"><img src="https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=163431486,1136892253&fm=58"></div>
</body>
<script>
//选中文字有兼容性问题,写一个封装做兼容
function getText(){
if(document.selection){ //ie
return document.selection.createRange().text;
}else{//标准
return window.getSelection().toString();
}
}
var oP = document.getElementById('p1');
var oDiv = document.getElementById('div1');
oP.onmouseup = function(ev){
var ev = ev || window.event;
var left = ev.clientX;
var top = ev.clientY;
if(getText().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?searchPic=false&title="+getText()+"&url=http://www.baidu.com";
}
</script>
</html>