Rumah > hujung hadapan web > tutorial js > jQuery melaksanakan kaedah memilih teks dengan tetikus untuk disiarkan pada Sina Weibo_jquery

jQuery melaksanakan kaedah memilih teks dengan tetikus untuk disiarkan pada Sina Weibo_jquery

WBOY
Lepaskan: 2016-05-16 15:06:54
asal
1384 orang telah melayarinya

Contoh dalam artikel ini menerangkan cara jQuery melaksanakan teks yang dipilih tetikus untuk disiarkan di Sina Weibo. Kongsikan dengan semua orang untuk rujukan anda, butirannya adalah seperti berikut:

Baru-baru ini saya perasan bahawa Sina Blog mempunyai fungsi kecil, iaitu apabila tetikus memilih sekeping teks, gambar kecil akan muncul Klik pada gambar ini untuk menghantar kandungan yang dipilih ke Sina Weibo menulis demo malam tadi untuk bermain. Sila lihat, kod itu sangat mudah dan tidak dioptimumkan. Rakan yang berminat boleh memperbaikinya sendiri.

Prinsipnya sangat mudah, mula-mula dapatkan tetikus untuk memilih teks, kemudian panggil halaman yang disediakan dalam Sina Blog, dan hantar teks sebagai parameter.

Kod adalah seperti berikut:

<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 = "发送到新浪微博";
          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&#63;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>

Salin selepas log masuk

Semudah itu, anda boleh mencubanya sendiri. Sudah tentu, terdapat operasi lain untuk mendapatkan teks yang dipilih Ini hanyalah helah untuk menghubungi halaman Sina Jika anda berminat, anda boleh membuat aplikasi anda sendiri dan melaksanakannya sendiri.

Pembaca yang berminat dengan lebih banyak kandungan berkaitan jQuery boleh menyemak topik khas di tapak ini: "Kesan seret JQuery dan ringkasan kemahiran", "ringkasan kemahiran sambungan jQuery" , "ringkasan kesan khas klasik biasa JQuery", "animasi jQuery dan ringkasan penggunaan kesan khas", "ringkasan penggunaan pemilih jquery" dan "jQuery pemalam biasa dan ringkasan penggunaan

Saya harap artikel ini akan membantu semua orang dalam pengaturcaraan jQuery.

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan