WordPress中将选中文字转发到新浪微博

实现的方法也很简单，只需要两步：

1、引入 jQuery，相信大多数 WordPress 博客都已经引入了 jQuery，那就可以直接进行第二步了。

2、在页面底部，或者更确切的说，在引入 jQuery 库的后面加上这样一段 JS，你就可以看到和本站一样的效果了。

 代码如下 复制代码

var miniBlogShare = function() {
    //指定位置驻入节点
    $('<img id="imgSinaShare" class="img_share" title="将选中内容分享到新浪微博" src="http://wange.im/wp-content/themes/wange/images/sina_share.gif" /><img id="imgQqShare" class="img_share" title="将选中内容分享到腾讯微博" src="http://wange.im/wp-content/themes/wange/images/tt_share.png" />').appendTo('body');
  
    //默认样式
    $('.img_share').css({
        display : 'none',
        position : 'absolute',
        cursor : 'pointer'
    });
  
    //选中文字
    var funGetSelectTxt = function() {
        var txt = '';
        if(document.selection) {
            txt = document.selection.createRange().text;
        } else {
            txt = document.getSelection();
        }
        return txt.toString();
    };
  
    //选中文字后显示微博图标
    $('html,body').mouseup(function(e) {
        if (e.target.id == 'imgSinaShare' || e.target.id == 'imgQqShare') {
            return
        }
        e = e || window.event;
        var txt = funGetSelectTxt(),
            sh = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0,
            left = (e.clientX - 40 < 0) ? e.clientX + 20 : e.clientX - 40,
            top = (e.clientY - 40 < 0) ? e.clientY + sh + 20 : e.clientY + sh - 40;
        if (txt) {
            $('#imgSinaShare').css({
                display : 'inline',
                left : left,
                top : top
            });
            $('#imgQqShare').css({
                display : 'inline',
                left : left + 30,
                top : top
            });
        } else {
            $('#imgSinaShare').css('display', 'none');
            $('#imgQqShare').css('display', 'none');
        }
    });
  
    //点击新浪微博
    $('#imgSinaShare').click(function() {
        var txt = funGetSelectTxt(), title = $('title').html();
        if (txt) {
            window.open('http://v.t.sina.com.cn/share/share.php?title=' + txt + ' —— 转载自：' + title + '&url=' + window.location.href);
        }
    });
  
    //点击腾讯微博
    $('#imgQqShare').click(function() {
        var txt = funGetSelectTxt(), title = $('title').html();
        if (txt) {
            window.open('http://v.t.qq.com/share/share.php?title=' + encodeURIComponent(txt + ' —— 转载自：' + title) + '&url=' + window.location.href);
        }
    });
}();

 

完整实例

 代码如下 复制代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="description" content="页面选中文字分享到新浪微博 » 张鑫旭-鑫空间-鑫生活" />
<meta name="description" content="张鑫旭web前端学习实例页面" />
<meta name="keywords" content="张鑫旭, 张鑫旭-鑫空间-鑫生活, web前端, css, jQuery, javascript, demo页面" />
<meta name="author" content="张鑫旭, zhangxixnu" />
<title>页面选中文字分享到新浪微博 » 张鑫旭-鑫空间-鑫生活</title>
<link rel="stylesheet" href="../css/demo.css" type="text/css" />
<style>
.img_sina_share{display:none; position:absolute; cursor:pointer;}
</style>
</head>

<body>
<div id="header">
 <a href="http://www.111cn.net/" class="logo" title="回到鑫空间-鑫生活首页">
     <img src=https://.oss-cn-hangzhou.aliyuncs.com/zxx_home_logo.png border="0" />
    </a>
</div>
<div id="main">
 <h1>页面选中文字分享到新浪微博实例页面</h1>
    <div id="body" class="light">
     <div id="content" class="show">
         <h3>展示</h3>
            <div class="article_new"><a href="http://www.111cn.net/wordpress/?p=1428">回到相关文章 »</a></div>
            <div class="demo">
             <div id="testContent" class="f14">
                    <p>&nbsp;<wbr></wbr>&nbsp;<wbr></wbr>&nbsp;<wbr></wbr>
                    最近迷恋上了【宫锁心玉】这部电视剧，真的是特别好看，让我每晚都要睡到12点以后了，不过有个小小的发现，就是宫和流星花园好像，呵呵，完全可以说是古装版【流星花园】</p>
                    <p>&nbsp;<wbr></wbr>&nbsp;<wbr></wbr>&nbsp;<wbr></wbr>
                    1.先不说具体事情，人物上，一直与晴川作对欺负晴川的八阿哥就是古版道明寺，和九阿哥十阿哥是F3，四阿哥就扮演了那个花泽类的角色。还有一般小像的素VS那个杉菜的好朋友（忘了叫什么以下用L代替），小春VS清河，老欺负晴川的心莲和那个不知道叫什么的功宫女VS那两个拜金女、、、、</p>
                    <p>&nbsp;<wbr></wbr>&nbsp;<wbr></wbr>&nbsp;<wbr></wbr> 具体事件：</p>
                    <p>&nbsp;<wbr></wbr>&nbsp;<wbr></wbr>&nbsp;<wbr></wbr>
                    1.得罪了八阿哥的宫女被赶出宫VS得罪了F4的同学被赶出学校</p>
                    <p>&nbsp;<wbr></wbr>&nbsp;<wbr></wbr>&nbsp;<wbr></wbr>
                    2.晴川为素言得罪八阿哥VS杉菜为了她的朋友L得罪F4</p>
                    <p>&nbsp;<wbr></wbr>&nbsp;<wbr></wbr>&nbsp;<wbr></wbr>
                    3.得罪八阿哥后大家不敢同情晴川，晴川跪铁链素言也不敢上前，但是偷偷给晴川留馒头VS杉菜得罪了F4
                    L也不敢靠近他但是偷偷留言安慰</p>
                    <p>&nbsp;<wbr></wbr>&nbsp;<wbr></wbr>&nbsp;<wbr></wbr>
                    4.魔头们安排的强暴戏码，一个被四阿哥解救一个被花泽类解救，接着又都上演了怎么让眼泪不流出的戏码</p>
                    <p>&nbsp;<wbr></wbr>&nbsp;<wbr></wbr>&nbsp;<wbr></wbr>
                    5.四阿哥的琴声VS花泽类的琴声</p>
                    <p>&nbsp;<wbr></wbr>&nbsp;<wbr></wbr>&nbsp;<wbr></wbr>
                    6.在宫里晴川和小春被众太监追被四阿哥解救，四阿哥和八阿哥呛声，四福晋带晴川去梳洗VS杉菜和清河被追花泽类解救，类还跟道明寺呛了一下，藤堂静带杉菜去梳洗</p>
                    <p>&nbsp;<wbr></wbr>&nbsp;<wbr></wbr>&nbsp;<wbr></wbr>
                    7.听到晴川和四阿哥的谣言八阿哥生气找晴川并强吻了她见晴川哭了又反过来安慰她VS道明寺强吻杉菜</p>
                    <p>&nbsp;<wbr></wbr>&nbsp;<wbr></wbr>&nbsp;<wbr></wbr>
                    8.晴川为和八阿哥斗争训练自己的体力猛吃饭+跑步VS杉菜猛吃饭+跑步。并都出现"我不会屈服的"台词</p>
                    <p>&nbsp;<wbr></wbr>&nbsp;<wbr></wbr>&nbsp;<wbr></wbr>
                    9.四阿哥和道明寺都说过"一个好消息一个坏消息""耐力赢得了尊重""加倍对付你"</p>
                    <p>&nbsp;<wbr></wbr>&nbsp;<wbr></wbr>&nbsp;<wbr></wbr>
                    10.斗着斗着八阿哥爱上了晴川道明寺爱上了杉菜，而女主角还都不屑一顾，爱上的是别人；当然还都是在接触中爱上了对方</p>
                    <p>&nbsp;<wbr></wbr>&nbsp;<wbr></wbr>&nbsp;<wbr></wbr>
                    11.晴川在太子所过夜并换了衣服被误会VS杉菜和老外在酒店遭遇。时候均差点被伤害而又出现了"只要你说我就相信"的感人台词</p>
                    <p>&nbsp;<wbr></wbr>&nbsp;<wbr></wbr>&nbsp;<wbr></wbr>
                    呵呵，还有很多相似之处，太晚了脑子开始犯迷糊就不多说了，这当然不是诟病，因为本人确实很喜欢宫这布电视剧，只是无聊随便罗列一下，娱乐而已。</p>       
                </div>
                <img id="imgSinaShare" class="img_sina_share" title="将选中内容分享到新浪微博" src=https://.oss-cn-hangzhou.aliyuncs.com/share.gif />
            </div>
        </div>      
    </div>
</div>
<div id="footer">
    Designed &amp; Powerd by <a href="http://www.111cn.net/">hzhuti</a><br />
    Copyright 张鑫旭-鑫空间-鑫生活<br>
    <a href="http://www.111cn.net/" target="_blank">鄂ICP备09015569号</a>     
</div>
<script>
var eleImgShare = document.getElementById("imgSinaShare");

var $sinaMiniBlogShare = function(eleShare, eleContainer) {
 var eleTitle = document.getElementsByTagName("title")[0];
 eleContainer = eleContainer || document;
 var funGetSelectTxt = function() {
  var txt = "";
  if(document.selection) {
   txt = document.selection.createRange().text; // IE
  } else {
   txt = document.getSelection();
  }
  return txt.toString();
 };
 eleContainer.onmouseup = function(e) {
  e = e || window.event;
  var txt = funGetSelectTxt(), sh = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
  var left = (e.clientX - 40 < 0) ? e.clientX + 20 : e.clientX - 40, top = (e.clientY - 40 < 0) ? e.clientY + sh + 20 : e.clientY + sh - 40;
  if (txt) {
   eleShare.style.display = "inline";
   eleShare.style.left = left + "px";
   eleShare.style.top = top + "px";
  } else {
   eleShare.style.display = "none";
  }
 };
 eleShare.onclick = function() {
  var txt = funGetSelectTxt(), title = (eleTitle && eleTitle.innerHTML)? eleTitle.innerHTML : "未命名页面";
  if (txt) {
   window.open('http://v.t.sina.com.cn/share/share.php?title=' + txt + '→来自页面"' + title + '"的文字片段&url=' + window.location.href); 
  }
 };
}(eleImgShare);
</script>
</body>
</html>
时间： 2024-10-25 14:54:34

WordPress中将选中文字转发到新浪微博的相关文章

js页面选中文字分享到新浪微博代码

提示:您可以先修改部分代码再运行 页面选中文字分享到新浪微博实例页面 将选中内容分享到新浪微博方法很简单只要监控我们选择的文字就弹出提示即可了,大家可以尝试选中这些文字试一下哦. 提示:您可以先修改部分代码再运行

Wordpress中将选中内容分享到新浪腾讯微博

1.引入jQuery,相信大多数WordPress博客都已经引入了jQuery,那就可以直接进行第二步了. 2.在页面底部,或者更确切的说,在引入jQuery库的后面加上这样一段JS,你就可以看到和本站一样的效果了. 选中即分享的功能看上去比较高级,其实实现是相当简单的.其中的会让人头大,一般人也不感兴趣的原理这里就直接跳过.这个js文字选中后分享到新浪微博的功能我简单的封装了下,方法名是:$sinaMiniBlogShare  代码如下 复制代码 var miniBlogShare = fun

JavaScript获取页面上被选中文字的方法技巧

 这篇文章主要介绍了JavaScript获取页面上被选中文字的方法技巧,本文直接给出实现代码和运行效果,需要的朋友可以参考下     这里介绍的一个小技巧是如何用JavaScript获取页面上被选中的文字的方法.最关键的JavaScript API是: 代码如下: event.selection = window.getSelection(); 这里的selection实际上是个对象,但如果我们使用 .toString()或强行转化成字符串,我们将得到被选中的文字. 代码如下: $(docume

ASP.NET技巧：脚本获取选中文字及所在句子

asp.net|技巧|脚本|选中|中文 脚本获取网页中选中文字var word = document.selection.createRange().text;获取选中文字所在的句子var range =  document.selection.createRange();range.expand("sentence");var sentence = range.text; 给IE右键菜单添加菜单项参见http://www.codeproject.com/jscript/CopyasH

屏蔽双击选中文字的方法兼容FF及以外的浏览器

 FF用样式 :-moz-user-select:none; FF以外的浏览器用:onselectstart="return false"(直接加在需要作用的标签) eg: <div class="test" onselectstart="return false" style="-moz-user-select:none;">你选不到我...(屏蔽双击选中文字的区域)</div> 

c#&amp;nbsp;webbrowser&amp;nbsp;&amp;nbsp;获取用户选中文字

原文:c# webbrowser  获取用户选中文字     最近一直被一个问题困扰,有一个文本框,一个webbrowser控件,一个上下文菜单, 用户用鼠标左键选中文字,右键点击搜索,就把选中的文字赋给文本框的TEXT,便可以递进搜索,在网上逛了几天,也没有找到好的方法,终于在学长的帮助下,找到了最终的答案!特拿来与大家分享! 前提条件,你需要添加引用 如图: 在程序中要添加using mshtml; //获取用户选中的文字             IHTMLDocument2 htmlDoc

求高人wpf中Richtextbox通过代码来设置给选中文字加下划线

问题描述 //通过代码来设置选中文字的样式代码:RichTextBox1.Selection.ApplyPropertyValue(TextElement.ForegroundProperty,Brushes.Red);//改变前景色RichTextBox1.Selection.ApplyPropertyValue(TextElement.FontSizeProperty,12);//改变文字大小上面是改变颜色和字体,怎么加下划线,还有一个问题是,当这些样式设置了以后,如果继续输入时文字会变成上

禁止选中文字兼容IE、Chrome、FF等_jquery

复制代码 代码如下: $(el).attr('unselectable','on') .css({'-moz-user-select':'-moz-none', '-moz-user-select':'none', '-o-user-select':'none', '-khtml-user-select':'none', /* you could also put this in a class */ '-webkit-user-select':'none',/* and add the CSS

javascrpt 屏蔽双击选中文字的代码

指定div  代码如下 复制代码 <div class="picBox" onselectstart="return false;" style="-moz-user-select:none;">屏蔽双击选中文字的区域</div> 如果要屏蔽整个页面 我们在页面的body上加 这个是兼容ie浏览器  代码如下 复制代码 <body onselectstart="return false ">