最近注意到新浪博客有個(gè)小功能，就是當(dāng)鼠標(biāo)選中一段文字時(shí)會(huì)浮現(xiàn)一個(gè)小圖片，點(diǎn)擊這個(gè)圖片可以把選中內(nèi)容發(fā)送到新浪微博，一時(shí)興起昨晚就寫了一個(gè)Demo玩了一下，代碼超簡(jiǎn)單，沒優(yōu)化，有興趣的朋友可以自己改進(jìn)。

原理很簡(jiǎn)單，先獲得鼠標(biāo)選中文字，然后調(diào)用新浪博客中提供的頁面，把文字作為參數(shù)傳過去就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="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 = "發(fā)送到新浪微博";
          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.nowwamagic.net&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">
    words words words words words words words words words。
  </div>
</body>
</html>

就這么簡(jiǎn)單哦，大家可以自己試試哈。當(dāng)然獲得選中文本還可以有其他操作，這兒只是取巧調(diào)用了新浪的頁面，大家如果有興趣可以自己創(chuàng)建應(yīng)用自己實(shí)現(xiàn)。

更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《jQuery拖拽特效與技巧總結(jié)》、《jQuery擴(kuò)展技巧總結(jié)》、《jQuery常見經(jīng)典特效匯總》、《jQuery動(dòng)畫與特效用法總結(jié)》、《jquery選擇器用法總結(jié)》及《jQuery常用插件及用法總結(jié)》

希望本文所述對(duì)大家jQuery程序設(shè)計(jì)有所幫助。

您可能感興趣的文章: