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>
  • 相关阅读:
    39)自定义String类(没看)
    37)智能指针(就是自动delete空间)
    36)友元函数和重载操作符 (没看) 可以看视频
    35)类和结构体类比---this
    34)static 静态成员和静态成员函数
    33)new和delete关键字
    32)(典型)构造和析构 拷贝构造 小样例
    31)类中成员初始化
    30)构造函数的初始化列表
    29)深拷贝和浅拷贝
  • 原文地址:https://www.cnblogs.com/sjqq/p/6361505.html
Copyright © 2011-2022 走看看