超简单JS实现把鼠标选中文字发送到新浪微博

简介:

       最近注意到新浪博客有个小功能,就是当鼠标选中一段文字时会浮现一个小图片,点击这个图片可以把选中内容发送到新浪微博,一时兴起昨晚就写了一个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.cnblogs.com/durongjian&source=天行健,自强不息&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" >
        2011年到了,在前几天的“2010岁末小记”中给自己定下了一个计划,其中有一条就是“每周至少写一篇技术博客。用博客的方式来督促自己学习和进步,记下学习的新知识和积累的知识点,构建自己的知识库。”。园子里高手很多,MVP就有好几位,看他们的文章真有“看君一博文,胜读四年书”之感。曾经对委托、事件云里雾里的我看了张子阳的“C#中的委托和事件”后终于明白了很多,园子里像这样的好文章还有很多,作为菜鸟我真的获益匪浅。

虽然自己现在水平很差,但高手都是从菜鸟成长起来的,因此我坚信只要努力学习,每天都有收获和进步,逐渐提高自己的编程水平,总有一天也能厚积薄发,写出一些比较好的博文与大家分享,帮助新手进步。作为新年第一篇博文,我打算写一个博客备份系统系列文章与园友们分享,晒晒自己的代码,非常欢迎大家提出意见和建议。
    
</ div >
</ body >
</ html >

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

   贴几张图吧:

  

  

鼠标选中文字

 

 

  

弹出的页面

 

  

新浪微博中显示



本文转自Artwl博客园博客,原文链接:http://www.cnblogs.com/artwl/,如需转载请自行联系原作者

相关文章
|
4天前
|
JavaScript 前端开发
JavaScript实现鼠标放上去之后高亮显示且隔行换色
JavaScript实现鼠标放上去之后高亮显示且隔行换色
17 0
|
4天前
|
JavaScript 前端开发 安全
使用 Node.js 插件给指定目录下的所有图片添加上文字水印
使用 Node.js 插件给指定目录下的所有图片添加上文字水印
68 0
|
4天前
|
移动开发 JavaScript 前端开发
分享111个JS文字特效,总有一款适合您
分享111个JS文字特效,总有一款适合您
87 0
|
7月前
|
Web App开发 移动开发 JavaScript
【前端用法】HTML5 Video标签如何屏蔽右键视频另存为的js代码以及如何禁用浏览器控件,Video 禁止鼠标右键下载
【前端用法】HTML5 Video标签如何屏蔽右键视频另存为的js代码以及如何禁用浏览器控件,Video 禁止鼠标右键下载
184 0
|
2天前
|
JavaScript 前端开发 流计算
使用JavaScript 中的Math对象和勾股定理公式,计算鼠标的位置与页面图片中心点的距离,根据距离对页面上的图片进行放大或缩小处理
使用JavaScript 中的Math对象和勾股定理公式,计算鼠标的位置与页面图片中心点的距离,根据距离对页面上的图片进行放大或缩小处理
|
4天前
|
JavaScript
js的鼠标移入移出事件
js的鼠标移入移出事件
|
4天前
|
JavaScript 前端开发
用js使鼠标放轮播图上使其停止,移开鼠标轮播图继续运行
用js使鼠标放轮播图上使其停止,移开鼠标轮播图继续运行
10 0
|
4天前
|
前端开发 JavaScript
CSS+JS鼠标事件触发鼠标模形实现手状
CSS+JS鼠标事件触发鼠标模形实现手状
|
4天前
|
存储 JSON JavaScript
如何使用 JavaScript 代码创建虚拟鼠标点击事件
如何使用 JavaScript 代码创建虚拟鼠标点击事件
21 0
|
7月前
|
JavaScript 前端开发 Windows
VScode的注释和标题,标签,img的src属性(如何网页上插入图片)(Mac如何开启js控制台)(如何免费复制网页中的文字)
VScode的注释和标题,标签,img的src属性(如何网页上插入图片)(Mac如何开启js控制台)(如何免费复制网页中的文字)