WordPress中將選中文字轉(zhuǎn)發(fā)到新浪微博

2024-09-07 00:51:31

字體：大中小

供稿：網(wǎng)友

一個常見的關(guān)于WordPress中將選中文字轉(zhuǎn)發(fā)到新浪微博程序代碼,有需要的朋友可參考參考.

實現(xiàn)的方法也很簡單,只需要兩步:

1、引入 jQuery，相信大多數(shù) WordPress 博客都已經(jīng)引入了 jQuery,那就可以直接進(jìn)行第二步了.

2、在頁面底部,或者更確切的說,在引入 jQuery 庫的后面加上這樣一段 JS,你就可以看到和本站一樣的效果了,代碼如下:

var miniBlogShare = function() {

 //指定位置駐入節(jié)點(diǎn)

 $('<img id="imgSinaShare" class="img_share" title="將選中內(nèi)容分享到新浪微博" src="http://wange.im/wp-content/themes/wange/images/sina_share.gif" /><img id="imgQqShare" class="img_share" title="將選中內(nèi)容分享到騰訊微博" src="http://wange.im/wp-content/themes/wange/images/tt_share.png" />').appendTo('body');



 //默認(rèn)樣式

 $('.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();

 };



 //選中文字后顯示微博圖標(biāo)

 $('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');

 }

 });



 //點(diǎn)擊新浪微博

 $('#imgSinaShare').click(function() {

 var txt = funGetSelectTxt(), title = $('title').html();

 if (txt) {

 window.open('http://v.t.sina.com.cn/share/share.php?title=' + txt + ' —— 轉(zhuǎn)載自：' + title + '&url=' + window.location.href);

 }

 });



 //點(diǎn)擊騰訊微博

 $('#imgQqShare').click(function() {

 var txt = funGetSelectTxt(), title = $('title').html();

 if (txt) {

 window.open('http://v.t.qq.com/share/share.php?title=' + encodeURIComponent(txt + ' —— 轉(zhuǎn)載自：' + 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前端學(xué)習(xí)實例頁面" />

<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">回到相關(guān)文章 »</a></div>

 <div class="demo">

 <div id="testContent" class="f14">

    

 最近迷戀上了【宮鎖心玉】這部電視劇，真的是特別好看，讓我每晚都要睡到12點(diǎn)以后了，不過有個小小的發(fā)現(xiàn)，就是宮和流星花園好像，呵呵，完全可以說是古裝版【流星花園】

    

 1.先不說具體事情，人物上，一直與晴川作對欺負(fù)晴川的八阿哥就是古版道明寺，和九阿哥十阿哥是F3，四阿哥就扮演了那個花澤類的角色。還有一般小像的素VS那個杉菜的好朋友（忘了叫什么以下用L代替），小春VS清河，老欺負(fù)晴川的心蓮和那個不知道叫什么的功宮女VS那兩個拜金女、、、、

     具體事件：

    

 1.得罪了八阿哥的宮女被趕出宮VS得罪了F4的同學(xué)被趕出學(xué)校

    

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

    

 3.得罪八阿哥后大家不敢同情晴川，晴川跪鐵鏈素言也不敢上前，但是偷偷給晴川留饅頭VS杉菜得罪了F4

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

    

 4.魔頭們安排的強(qiáng)暴戲碼，一個被四阿哥解救一個被花澤類解救，接著又都上演了怎么讓眼淚不流出的戲碼

    

 5.四阿哥的琴聲VS花澤類的琴聲

    

 6.在宮里晴川和小春被眾太監(jiān)追被四阿哥解救，四阿哥和八阿哥嗆聲，四福晉帶晴川去梳洗VS杉菜和清河被追花澤類解救，類還跟道明寺嗆了一下，藤堂靜帶杉菜去梳洗

    

 7.聽到晴川和四阿哥的謠言八阿哥生氣找晴川并強(qiáng)吻了她見晴川哭了又反過來安慰她VS道明寺強(qiáng)吻杉菜

    

 8.晴川為和八阿哥斗爭訓(xùn)練自己的體力猛吃飯+跑步VS杉菜猛吃飯+跑步。并都出現(xiàn)"我不會屈服的"臺詞

    

 9.四阿哥和道明寺都說過"一個好消息一個壞消息""耐力贏得了尊重""加倍對付你"

    

 10.斗著斗著八阿哥愛上了晴川道明寺愛上了杉菜，而女主角還都不屑一顧，愛上的是別人；當(dāng)然還都是在接觸中愛上了對方

    

 11.晴川在太子所過夜并換了衣服被誤會VS杉菜和老外在酒店遭遇。時候均差點(diǎn)被傷害而又出現(xiàn)了"只要你說我就相信"的感人臺詞

    

 呵呵，還有很多相似之處，太晚了腦子開始犯迷糊就不多說了，這當(dāng)然不是詬病，因為本人確實很喜歡宮這布電視劇，只是無聊隨便羅列一下，娛樂而已。

 </div>

 <img id="imgSinaShare" class="img_sina_share" title="將選中內(nèi)容分享到新浪微博" 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>