最近注意到新浪博客有个小功能,就是当鼠标选中一段文字时会浮现一个小图片,点击这个图片可以把选中内容发送到新浪微博,一时兴起昨晚就写了一个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="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/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用鼠标选文字来发新浪微博的更多相关文章

  1. jQuery实现鼠标选中文字后弹出提示窗口效果

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...

  2. jQuery鼠标悬停文字渐隐渐现动画效果

    jQuery鼠标悬停文字渐隐渐现动画效果 当时是做项目的时候用到的所以图片有些大,九张,真正要做图片不需要这么大 css样式 <style> *{ margin: 0; padding: ...

  3. Jquery CheckBox复选框 全选/取消全选 最佳实现方式 参考案例

    <input id="chkAll" type="checkbox" />全选/取消全选</div> <asp:Repeater ...

  4. 基于jQuery图片遮罩滑动文字切换特效

    基于jQuery图片遮罩滑动文字切换特效.这是一款jquery hover鼠标滑动选项卡切换透明背景遮罩文字显示特效.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div ...

  5. js进阶 12-1 jquery的鼠标事件有哪些

    js进阶 12-1 jquery的鼠标事件有哪些 一.总结 一句话总结:1+3*2+1+1,其中里面有两组移入移出,一组和click,总结就是click(3个),hover(5个),mousemove ...

  6. 对jquery操作复选框

    摘要:jquery操作复选框.使用更简洁易懂,思路清晰,逻辑更明了,很实用 <!DOCTYPE html> <html> <head> <meta chars ...

  7. jQuery css3鼠标悬停图片显示遮罩层动画特效

    jQuery css3鼠标悬停图片显示遮罩层动画特效 效果体验:http://hovertree.com/texiao/jquery/39/ 效果图: 源码下载:http://hovertree.co ...

  8. jQuery实现鼠标经过图片变亮效果

    在线体验效果:http://hovertree.com/texiao/jquery/1.htm 以下是完整源代码: <!DOCTYPE html PUBLIC "-//W3C//DTD ...

  9. jQuery实现全选效果【转】

    这是一段用jquery实现全选的代码,主要思路如下: 1.所有的复选框都有单击事件,所有效果都是在单击事件下实现的 2.全选复选框所实现的功能与其他复选选项实现的功能不同,所有在单击事件内做一个判断, ...

随机推荐

  1. 使用source命令解决mysql导入乱码问题

    设定编码格式:mysql -u root -p --default-character-set=utf8 use dbname source /root/newsdata.sql

  2. web视频播放

    webm.mp4/h264    video.js hevc libde265.js hls/m3u8 hls.js

  3. Verilog学习笔记基本语法篇(七)········ 生成块

    生成块可以动态的生成Verilog代码.可以用于对矢量中的多个位进行重复操作.多个模块的实例引用的重复操作.根据参数确定程序中是否包含某段代码.生成语句可以控制变量的声明.任务和函数的调用.还能对实例 ...

  4. COURSES POJ1469(模板)

    Description Consider a group of N students and P courses. Each student visits zero, one or more than ...

  5. 异步消息处理(Message, Handler, MessageQueue, Looper)

    AsyncTask 适用于单线程任务处理,多任务处理还是 Message/Handler 处理方便一些 主要使用方式: 1,创建子类继承自 Handler 类,覆盖 handleMessage(Mes ...

  6. IDEA常用操作(一)

    1.视图的调整 左下右的侧边栏如何关闭?——右击选择remove from sidebar 面板上(左下右)的导航栏视图如何隐藏——可以在左下角悬停显示,单击隐藏/开启侧边栏 想打开其它视图怎么办?— ...

  7. Android面试收集录 OpenGL ES

    1.如何用OpenGL ES绘制一个三角形? 编写一个类实现Renderer接口,实现onDrawFrame方法,onSurfaceChanged方法,onSurfaceCreated方法 编写一个类 ...

  8. Altium Designer -- 精心总结

    如需转载请注明出处:http://blog.csdn.NET/qq_29350001/article/details/52199356 以前是使用DXP2004来画图的,后来转行.想来已经有一年半的时 ...

  9. 4368: [IOI2015]boxes纪念品盒

    4368: [IOI2015]boxes纪念品盒 链接 分析 链接 代码 #include<bits/stdc++.h> using namespace std; typedef long ...

  10. 给apk签名

    一.签名 把apk和签名文件放在jdk bin目录下,然后在jkd bin目录下执行以下代码: jarsigner -verbose -keystore xxx.keystore -signedjar ...