jQuery实现鼠标选文字发新浪微博的方法
本文实例讲述了jQuery实现鼠标选文字发新浪微博的方法。分享给大家供大家参考,具体如下:
最近注意到新浪博客有个小功能,就是当鼠标选中一段文字时会浮现一个小图片,点击这个图片可以把选中内容发送到新浪微博,一时兴起昨晚就写了一个Demo玩了一下,代码超简单,没优化,有兴趣的朋友可以自己改进。
原理很简单,先获得鼠标选中文字,然后调用新浪博客中提供的页面,把文字作为参数传过去就OK了。
代码如下:
<htmlxmlns="http://www.w3.org/1999/xhtml">
<headrunat="server">
<title></title>
<styletype="text/css">
.tooltip
{
width:120px;
height:23px;
line-height:23px;
background-color:#CCCCCC;
}
.tooltipa
{
color:#333333;
display:block;
font-size:12px;
font-weight:bold;
text-indent:10px;
}
</style>
<scriptsrc="jquery.min.js"></script>
<scripttype="text/javascript">
$(function(){
$("#blogContent").mouseup(function(e){
varx=10;
vary=10;
varr="";
if(document.selection){
r=document.selection.createRange().text;
}
elseif(window.getSelection()){
r=window.getSelection();
}
if(r!=""){
varbowen="发送到新浪微博";
vartooltip="<divid='tooltip'class='tooltip'><aonclick=ask('"+r+"')>"+bowen+"</a></div>";
$("body").append(tooltip);
$("#tooltip").css({
"top":(e.pageY+y)+"px",
"left":(e.pageX+x)+"px",
"position":"absolute"
}).show("fast");
}
}).mousedown(function(){
$("#tooltip").remove();
});
})
functionask(r){
if(r!=""){
window.open('http://v.t.sina.com.cn/share/share.php?searchPic=false&title='+r+'&url=http://www.nowwamagic.net&sourceUrl=http%3A%2F%2Fblog.sina.com.cn&content=utf-8&appkey=1617465124','_blank','height=515,width=598,toolbar=no,menubar=no,scrollbars=auto,resizable=yes,location=no,status=yes');
}
}
</script>
</head>
<body>
<divid="blogContent">
wordswordswordswordswordswordswordswordswords。
</div>
</body>
</html>
就这么简单哦,大家可以自己试试哈。当然获得选中文本还可以有其他操作,这儿只是取巧调用了新浪的页面,大家如果有兴趣可以自己创建应用自己实现。
更多关于jQuery相关内容感兴趣的读者可查看本站专题:《jQuery拖拽特效与技巧总结》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》、《jquery选择器用法总结》及《jQuery常用插件及用法总结》
希望本文所述对大家jQuery程序设计有所帮助。