JS -选中文字分享
1.效果图
2.
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
#p1{ width:300px; margin:50px;}
#div1{ position:absolute; display:none;}
</style>
<script>
window.onload = function(){
function selectText(){
if(document.selection){
return document.selection.createRange().text;
}else{
return window.getSelection().toString();
}
}
var oP = document.getElementById('p1');
var oDiv = document.getElementById('div1')
oP.onmouseup = function(ev){ //只有事件调用才有event内容,否则为空
var ev = ev || window.event;
var left = ev.clientX;
var top = ev.clientY;
if(selectText().length > 10){
setTimeout(function(){ //定时器用于延迟加载否则如果选中文字太快,图片跟不上
oDiv.style.display = 'block';
oDiv.style.left = left +'px';
//oDiv.style.left = ev.clientX +'px'; //错误!ev为空!!!定时器调用的匿名函数没有事件!
oDiv.style.top = top + 'px';
},100);
}else{
oDiv.style.display ='none';
}
};
oP.onclick = function(ev){ //点击文字也会冒泡到document上,所以阻止段落的冒泡,让段落独享
var ev = ev || window.event;
ev.cancelBubble = true;
}
document.onclick = function(){ //点击任意位置让图标消失
oDiv.style.display = 'none';
}
oDiv.onclick = function(){
window.location.href = '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="a7.jpg" style="width: 30px; height: 30px;" /></div>
<!--<div id="div1"><img src="share.gif" /></div>-->
</body>
</html>
