js鼠标提示

简介:

 兼容各浏览器:

 

 
  1. <script> 
  2. <!-- 
  3.     function wsug(e, str){ 
  4.         var oThis = arguments.callee; 
  5.         if(!str) { 
  6.             oThis.sug.style.visibility = 'hidden'
  7.             document.onmousemove = null
  8.             return; 
  9.         }        
  10.         if(!oThis.sug){ 
  11.             var div = document.createElement('div'), css = 'top:0; left:0; position:absolute; z-index:100; visibility:hidden'
  12.                 div.style.cssText = css; 
  13.                 div.setAttribute('style',css); 
  14.             var sug = document.createElement('div'), css'font:normal 12px/16px "宋体"; white-space:nowrap; color:#666; padding:3px; position:absolute; left:0; top:0; z-index:10; background:#f9fdfd; border:1px solid #0aa'
  15.                 sug.style.cssText = css; 
  16.                 sug.setAttribute('style',css); 
  17.             var dr = document.createElement('div'), css = 'position:absolute; top:3px; left:3px; background:#333; filter:alpha(opacity=50); opacity:0.5; z-index:9'
  18.                 dr.style.cssText = css; 
  19.                 dr.setAttribute('style',css); 
  20.             var ifr = document.createElement('iframe'), css='position:absolute; left:0; top:0; z-index:8; filter:alpha(opacity=0); opacity:0'
  21.                 ifr.style.cssText = css; 
  22.                 ifr.setAttribute('style',css); 
  23.             div.appendChild(ifr); 
  24.             div.appendChild(dr); 
  25.             div.appendChild(sug); 
  26.             div.sug = sug; 
  27.             document.body.appendChild(div); 
  28.             oThis.sug = div
  29.             oThis.dr = dr; 
  30.             oThis.ifr = ifr; 
  31.             div = dr = ifr = sug = null; 
  32.         } 
  33.         var ee = e || window.event, obj = oThis.sug, dr = oThis.dr, ifr = oThis.ifr; 
  34.         obj.sug.innerHTML = str
  35.         var w = obj.sug.offsetWidth, h = obj.sug.offsetHeight, dw = document.documentElement.clientWidth||document.body.clientWidth; dh = document.documentElement.clientHeight || document.body.clientHeight; 
  36.         var st = document.documentElement.scrollTop || document.body.scrollTop, sl = document.documentElement.scrollLeft || document.body.scrollLeft; 
  37.         var left = e.clientX +sl +17 + w < dw + sl && e.clientX + sl + 15 || e.clientX +sl-8 - w, top = e.clientY + st + 17; 
  38.         obj.style.left = left+ 10 + 'px'; 
  39.         obj.style.top = top + 10 + 'px'; 
  40.         dr.style.width = w + 'px'; 
  41.         dr.style.height = h + 'px'; 
  42.         ifr.style.width = w + 3 + 'px'; 
  43.         ifr.style.height = h + 3 + 'px'; 
  44.         obj.style.visibility = 'visible'
  45.         document.onmousemove = function(e){ 
  46.             var ee = e || window.event, st = document.documentElement.scrollTop || document.body.scrollTop, sl = document.documentElement.scrollLeft || document.body.scrollLeft; 
  47.             var left = e.clientX +sl +17 + w < dw + sl && e.clientX + sl + 15 || e.clientX +sl-8 - w, top = e.clientY + st +17 + h < dh + st && e.clientY + st + 17 || e.clientY + st - 5 - h; 
  48.             obj.style.left = left + 'px'; 
  49.             obj.style.top = top + 'px'; 
  50.         } 
  51.     } 
  52. //--> 
  53. </script> 
  54. <a onmouseover="wsug(event, '共 100 个')" onmouseout="wsug(event, 0)" href="#">okok</a> 

 




      本文转自许琴 51CTO博客,原文链接:http://blog.51cto.com/xuqin/944742,如需转载请自行联系原作者



相关文章
|
8月前
|
JavaScript 前端开发
JavaScript实现鼠标放上去之后高亮显示且隔行换色
JavaScript实现鼠标放上去之后高亮显示且隔行换色
|
2月前
|
数据采集 存储 监控
实现自动化数据抓取:使用Node.js操控鼠标点击与位置坐标
本文介绍了如何使用Node.js和Puppeteer实现自动化数据抓取,特别是针对新闻网站“澎湃新闻”。通过设置代理IP、User-Agent和Cookie,提高爬虫的效率和隐蔽性,避免被网站封锁。代码示例展示了如何模拟鼠标点击、键盘输入等操作,抓取并整理新闻数据,适用于需要规避IP限制和突破频率限制的场景。
102 10
|
2月前
|
JavaScript
JS鼠标框选并删除HTML源码
这是一个js鼠标框选效果,可实现鼠标右击出现框选效果的功能。右击鼠标可拖拽框选元素,向下拖拽可实现删除效果,简单实用,欢迎下载
46 4
|
7月前
|
JavaScript 前端开发
杨老师课堂之JavaScript悬浮事件(鼠标移入移出事件)
杨老师课堂之JavaScript悬浮事件(鼠标移入移出事件)
45 1
|
7月前
|
Web App开发 监控 JavaScript
JS 鼠标框选(页面选择)时返回对应的 HTML 或文案内容
JS 鼠标框选(页面选择)时返回对应的 HTML 或文案内容 当用户进行鼠标框选选择了页面上的内容时,把选择的内容进行上报。 分为以下几点: 选择文案时 选择图片、svg、iframe、video、audio 等标签时 选择 input、select、textarea 等标签时 选择 input、textarea 标签内容时 选择类似 &nbsp; 字符时 键盘全选时 鼠标右键选择 以上各模块结合时 当包含标签的时候,返回 html 结构,只有文本时返回文本内容
93 1
|
6月前
|
JavaScript
js 滚动鼠标滑轮放大缩小图片
js 滚动鼠标滑轮放大缩小图片
29 0
|
7月前
|
JavaScript
一篇文章讲明白js鼠标侧键监听(也有左键,中键和右键)
一篇文章讲明白js鼠标侧键监听(也有左键,中键和右键)
316 0
|
8月前
|
JavaScript 前端开发
JavaScript实现点击鼠标弹钢琴的效果
JavaScript实现点击鼠标弹钢琴的效果
36 0
|
8月前
|
JavaScript 前端开发
JavaScript实现鼠标移动特效
JavaScript实现鼠标移动特效
50 0
|
8月前
|
JavaScript
js的鼠标移入移出事件
js的鼠标移入移出事件