zoukankan      html  css  js  c++  java
  • jQuery实现鼠标选中文字后弹出提示窗口效果

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title></title>
    </head>
    <body>
    <!--在文章内添加 selected-article ID-->
    <div id="selectedArticle">
     <p>欢迎来到脚本之家...</p>
     <p>脚本之家是国内专业的网站建设资源、脚本编程学习类网站...</p>
     <p>提供asp、php、asp.net、javascript、jquery、vbscript、dos批处理、网页制作、网络编程、网站建设等编程资料...</p>
    </div>
    <script type="text/javascript" src="jquery-1.7.2.min.js"></script>
    <script type="text/javascript">
    document.writeln("<style>");
    document.writeln(".tooltip {219px;height:33px;background:url(bg-wenzi.png) no-repeat left top;}");
    document.writeln(".tooltip a {219px;height:33px;display:block;}");
    document.writeln("</style>");
    $(function () {
     //将该id下的文章,鼠标选中松开后弹窗
     $("#selectedArticle").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 href='###' target='_blank'>" + 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();
     });
    });
    </script>
    </body>
    </html>
  • 相关阅读:
    word-wrap和word-break
    sass编译生成的几个文件
    block settings drupal 8 configuration
    cookie 和 session
    程序员思维
    psr-0 和 psr-4
    eclipse的字符编码问题
    合并代码并上传
    如何部署代码
    301 CACHE
  • 原文地址:https://www.cnblogs.com/sjqq/p/6361505.html
Copyright © 2011-2022 走看看