jQuery实现鼠标选中文字后弹出提示窗口效果

最新推荐文章于 2021-06-09 11:02:29 发布

weixin_30607659

最新推荐文章于 2021-06-09 11:02:29 发布

阅读量679

点赞数

文章标签： javascript 前端操作系统 ViewUI

原文链接：http://www.cnblogs.com/sjqq/p/6361505.html

版权

 
  <!DOCTYPE HTML PUBLIC  
  "-//W3C//DTD HTML 4.01 Transitional//EN" 
 
  "http://www.w3.org/TR/html4/loose.dtd" 
  > 
 
  <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 {width:219px;height:33px;background:url(bg-wenzi.png) no-repeat left top;}" 
  ); 
 
  document.writeln( 
  ".tooltip a {width: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>

转载于:https://www.cnblogs.com/sjqq/p/6361505.html

weixin_30607659

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
jQuery实现鼠标选中文字后弹出提示窗口效果

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; c...
复制链接

扫一扫