您的位置：首页 > Web前端 > JQuery

jQuery实现鼠标选文字发新浪微博的方法

2016-04-02 00:00 906 查看

本文实例讲述了jQuery实现鼠标选文字发新浪微博的方法。分享给大家供大家参考，具体如下：

最近注意到新浪博客有个小功能，就是当鼠标选中一段文字时会浮现一个小图片，点击这个图片可以把选中内容发送到新浪微博，一时兴起昨晚就写了一个Demo玩了一下，代码超简单，没优化，有兴趣的朋友可以自己改进。

原理很简单，先获得鼠标选中文字，然后调用新浪博客中提供的页面，把文字作为参数传过去就OK了。

代码如下：

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
.tooltip
{
width:120px;
height:23px;
line-height:23px;
background-color:#CCCCCC;
}
.tooltip a
{
color: #333333;
display: block;
font-size: 12px;
font-weight: bold;
text-indent: 10px;
}
</style>
<script src="jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$("#blogContent").mouseup(function (e) {
var x = 10;
var y = 10;
var r = "";
if (document.selection) {
r = document.selection.createRange().text;
}
else if (window.getSelection()) {
r = window.getSelection();
}
if (r!= "") {
var bowen = "发送到新浪微博";
var tooltip = "<div id='tooltip' class='tooltip'><a onclick=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();
});
})
function ask(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>
<div id="blogContent">
words words words words words words words words words。
</div>
</body>
</html>

就这么简单哦，大家可以自己试试哈。当然获得选中文本还可以有其他操作，这儿只是取巧调用了新浪的页面，大家如果有兴趣可以自己创建应用自己实现。

更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery拖拽特效与技巧总结》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》、《jquery选择器用法总结》及《jQuery常用插件及用法总结》

希望本文所述对大家jQuery程序设计有所帮助。

您可能感兴趣的文章:

jQuery实现鼠标经过时出现隐藏层文字链接的方法
jQuery实现鼠标单击网页文字后在文本框显示的方法
jQuery实现表单input中提示文字value随鼠标焦点移进移出而显示或隐藏的代码
jquery实现仿新浪微博带动画效果弹出层代码(可关闭、可拖动)
jQuery实现仿新浪微博浮动的消息提示框(可智能定位)
jquery实现仿新浪微博评论滚动效果
jQuery模拟新浪微博首页滚动效果的方法
仿新浪微博返回顶部的jquery实现代码
基于JQuery的类似新浪微博展示信息效果的代码
基于jQuery的模仿新浪微博时间的组件
基于jquery的内容循环滚动小模块（仿新浪微博未登录首页滚动微博显示）
简单易用的基于jQuery版仿新浪微博向下滚动效果(附DEMO)
Jquery与JS两种方法仿twitter/新浪微博高度自适应无缝滚动实现代码

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： jQuery 鼠标新浪微博

相关文章推荐

新的分享

章节导航