WordPress中將選中文字轉發到新浪微博

2024-09-07 00:51:31

字體：大中小

來源：轉載

供稿：網友

一個常見的關于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";

 }//開源軟件:Vevb.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>