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>
  • 相关阅读:
    字符数组+数组复习
    C语言博客作业05-指针
    C语言博客作业04 数组
    C语言博客作业03 函数
    Java与C# socket通信
    JDBC复制数据库(sqlite)
    mysql Connector/net不能更新或删除(转载)
    MATLAB回归、插值、逼近、拟合【转载】
    前端请求RestController发送数据方法汇总
    elementUI el-input 输入框 设置高度和宽度
  • 原文地址:https://www.cnblogs.com/sjqq/p/6361505.html
Copyright © 2011-2022 走看看