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

发布:smiling　来源: PHP粉丝网　添加日期：2015-01-21 22:12:35　浏览: 评论：0　

一个常见的关于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="http://www.111cn.net/php/image/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">

    

 最近迷恋上了【宫锁心玉】这部电视剧，真的是特别好看，让我每晚都要睡到12点以后了，不过有个小小的发现，就是宫和流星花园好像，呵呵，完全可以说是古装版【流星花园】

    

 1.先不说具体事情，人物上，一直与晴川作对欺负晴川的八阿哥就是古版道明寺，和九阿哥十阿哥是F3，四阿哥就扮演了那个花泽类的角色。还有一般小像的素VS那个杉菜的好朋友（忘了叫什么以下用L代替），小春VS清河，老欺负晴川的心莲和那个不知道叫什么的功宫女VS那两个拜金女、、、、

     具体事件：

    

 1.得罪了八阿哥的宫女被赶出宫VS得罪了F4的同学被赶出学校

    

 2.晴川为素言得罪八阿哥VS杉菜为了她的朋友L得罪F4

    

 3.得罪八阿哥后大家不敢同情晴川，晴川跪铁链素言也不敢上前，但是偷偷给晴川留馒头VS杉菜得罪了F4

 L也不敢靠近他但是偷偷留言安慰

    

 4.魔头们安排的强暴戏码，一个被四阿哥解救一个被花泽类解救，接着又都上演了怎么让眼泪不流出的戏码

    

 5.四阿哥的琴声VS花泽类的琴声

    

 6.在宫里晴川和小春被众太监追被四阿哥解救，四阿哥和八阿哥呛声，四福晋带晴川去梳洗VS杉菜和清河被追花泽类解救，类还跟道明寺呛了一下，藤堂静带杉菜去梳洗

    

 7.听到晴川和四阿哥的谣言八阿哥生气找晴川并强吻了她见晴川哭了又反过来安慰她VS道明寺强吻杉菜

    

 8.晴川为和八阿哥斗争训练自己的体力猛吃饭+跑步VS杉菜猛吃饭+跑步。并都出现"我不会屈服的"台词

    

 9.四阿哥和道明寺都说过"一个好消息一个坏消息""耐力赢得了尊重""加倍对付你"

    

 10.斗着斗着八阿哥爱上了晴川道明寺爱上了杉菜，而女主角还都不屑一顾，爱上的是别人；当然还都是在接触中爱上了对方

    

 11.晴川在太子所过夜并换了衣服被误会VS杉菜和老外在酒店遭遇。时候均差点被伤害而又出现了"只要你说我就相信"的感人台词

    

 呵呵，还有很多相似之处，太晚了脑子开始犯迷糊就不多说了，这当然不是诟病，因为本人确实很喜欢宫这布电视剧，只是无聊随便罗列一下，娱乐而已。

 </div>

 <img id="imgSinaShare" class="img_sina_share" title="将选中内容分享到新浪微博" src="http://simg.sinajs.cn/blog7style/images/common/share.gif" />

 </div>

 </div>

 </div>

</div>

<div id="footer">

 Designed & Powerd by <a href="http://www.111cn.net/">hzhuti</a> 

 Copyright© 张鑫旭-鑫空间-鑫生活 

 <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";

 }//开源软件:phpfensi.com

};

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>