Init.Sun Chengdu.Sichuan

选中文字分享

2016-12-08
Init

选中文字分享案例。

描述:选中文字大于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>


Comments