`
907182878
  • 浏览: 7335 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

用js让透明的div跟着鼠标移动,兼容火狐和IE

阅读更多

废话不多说,代码如下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>

<body>
sfsdfsfsfsfsfsd<a id="item" href="#" onmouseout="move2(this)" onmousemove="move1(this)">给我出来,出来,出来</a> sfdsfsfsfsfsfsfdfs<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;您能看见我吗?
<br>
<div id="f" style="display: none;color:blue;position:absolute;background-color: gray;filter: alpha(opacity=70); opacity: 0.7;">
	出来了出来了<br>出来了出来了<br>出来了出来了
<span id="span"></span>
</div>
</body>
<script type="text/javascript">
function mousePos(e){
	var x,y;
	var e = e||window.event;
	return {
		x:e.clientX+document.body.scrollLeft+document.documentElement.scrollLeft, 
		y:e.clientY+document.body.scrollTop+document.documentElement.scrollTop
	}; 
}
function move1(t,e) {
	onne(e,"");
	document.getElementById("span").innerText = t.innerText;
}
function move2(t,e) {
	onne(e,"none");
}
function onne(e,v) {
	var mouse = mousePos(e);     
	var t = document.getElementById("f")
	t.style.left = mouse.x ; 
	t.style.top = mouse.y; 
	t.style.display = v; 
}
</script>
</html>

 

分享到:
评论

相关推荐

    div随鼠标移动.html

    div随鼠标自由移动,代码简单,移动流畅,兼容ie、firefox、chrome等主流浏览器。

    JavaScript获取鼠标移动时的坐标(兼容IE8、chome谷歌、Firefox)

    JavaScript获取鼠标移动时的坐标(兼容:IE8、谷歌、Firefox、Opera ),测试通过 直接复制成html文件,即可运行。 为方便大家测试特准备了一份在线演示 &lt;!DOCTYPE ...

    javascript 移动鼠标得到单元格所在table表中的rowIndex位置[兼容ie,firefox] 原创

    从cnblogs看到的代码,作者的代码随便不兼容firefox但,有助于大家学习为什么下面的代码兼容了firefox,大家可以对比下,有助于学习,对于更多的文章可以参考软件开发网以前发布的文章。 &nbsp; &nbsp; &nbsp;...

    js实现鼠标拖动图片并兼容IE/FF火狐/谷歌等主流浏览器

    js实现鼠标拖动图片做了兼容IE,FF火狐,谷歌等主流浏览器,具体实现代码如下,感兴趣的朋友可以参考下哈,希望对你有所帮助

    javascript 移动鼠标得到单元格所在table表中的rowIndex位置[兼容ie,firefox] <font color=red>原创</font>

    移动鼠标,得到单元格所在表中的位置,主要是学习使用js的e.srcElement.

    纯JS和CSS3炫酷桌面便签贴纸特效源码.zip

    本特效代码是一款基于使用纯JavaScript和CSS3来制作炫酷桌面便签贴纸特效的插件Sticker.js的特效。通过该插件可以将任何块级元素转换为桌面便签,并且在鼠标滑过便签时,便签会随着鼠标移动产生卷纸弯曲效果,非常的...

    Highcharts开源的JS图表控件简介

    Highcharts开源的JS图表控件简介:制作图表的纯Js控件,Highcharts v2.2.0主要特性:兼容当今所有的浏览器,包括iPhone、IE和火狐等等;对个人用户完全免费;纯JS,无BS支持大部分的图表类型:直线图,曲线图、区域图...

    自制JQuery弹出层插件 PopupDiv-v1.0

    兼容 IE6.0、IE7.0、FIREFOX 自动适应需要弹出层的高宽 弹出后自动居中 自动带标题栏和关闭按钮 支持弹出层的鼠标拖动移动,该部分用纯js编写执行效率更高 支持ajax加载页面到弹出层 支持一个页面,同时弹出多...

    JavaScript 图表库Highcharts v6.2.0

    主要特性如下:兼容性:兼容当今所有的浏览器,包括iPhone、IE和火狐等等;对个人用户完全免费;纯JS,无BS;支持大部分的图表类型:直线图,曲线图、区域图、区域曲线图、柱状图、饼状图、散布图;跨语言:不管是...

    非常完美的web绘制图表Javascript类库

    •兼容性:兼容当今所有的浏览器,包括iPhone、IE和火狐等等; •对个人用户完全免费; •纯JS,无BS; •支持大部分的图表类型:直线图,曲线图、区域图、区域曲线图、柱状图、饼装图、散布图; •跨语言:不管是...

    HighchartsDemo案例

    兼容性:兼容当今所有的浏览器,包括iPhone、IE和火狐等等; 对个人用户完全免费; 纯JS,无BS; 支持大部分的图表类型:直线图,曲线图、区域图、区域曲线图、柱状图、饼装图、散布图; 跨语言:不管是PHP、Asp.net...

    最全的HighchartsDemo案例,可以在本地浏览器直接打开,包含一个自己写静态数据展示的柱状图

    兼容性:兼容当今所有的浏览器,包括iPhone、IE和火狐等等; 对个人用户完全免费; 纯JS,无BS; 支持大部分的图表类型:直线图,曲线图、区域图、区域曲线图、柱状图、饼装图、散布图; 跨语言:不管是PHP、Asp.net...

    highcharts 中文文档

    兼容性:兼容当今所有的浏览器,包括iPhone、IE和火狐等等; 对个人用户完全免费; 纯JS,无BS; 支持大部分的图表类型:直线图,曲线图、区域图、区域曲线图、柱状图、饼装图、散布图; 跨语言:不管是PHP、Asp.net...

    Highcharts-2.1.2

    兼容性:兼容当今所有的浏览器,包括iPhone、IE和火狐等等; 对个人用户完全免费; 纯JS,无BS; 支持大部分的图表类型:直线图,曲线图、区域图、区域曲线图、柱状图、饼装图、散布图; 跨语言:不管是PHP、...

    JQuery Highcharts图表使用说明

    • 兼容性:兼容当今所有的浏览器,包括iPhone、IE和火狐等等; • 对个人用户完全免费; • 纯JS,无BS; • 支持大部分的图表类型:柱状图,直线图,曲线图、区域图、区域曲线图、饼装图、散布图等; • 跨语言:...

    Highcharts图表使用说明

    • 兼容性:兼容当今所有的浏览器,包括iPhone、IE和火狐等等; • 对个人用户完全免费; • 纯JS,无BS; • 支持大部分的图表类型:柱状图,直线图,曲线图、区域图、区域曲线图、饼装图、散布图等; • 跨语言:...

    highcharts

    •兼容性:兼容当今所有的浏览器,包括iPhone、IE和火狐等等; •对个人用户完全免费; •纯JS,无BS; •支持大部分的图表类型:直线图,曲线图、区域图、区域曲线图、柱状图、饼装图、散布图; •跨语言:不管是...

    Highcharts实例+详解

    4、兼容性:兼容当今所有的浏览器,包括iPhone、IE和火狐等等 5、跨语言:不管是PHP、Asp.net还是Java都可以使用,它只需要三个文件:一个是Highcharts的核心文件highcharts.js,还有a canvas emulator for IE和...

    免费jquery图表库,包括柱状图,曲线图,饼状图,仪表盘等,jquery实现,使用简单,带有详细的例子。

    •兼容性:兼容当今所有的浏览器,包括iPhone、IE和火狐等等; •对个人用户完全免费; •纯JS,无BS; •支持大部分的图表类型:直线图,曲线图、区域图、区域曲线图、柱状图、饼装图、散布图; •跨语言:不管是...

Global site tag (gtag.js) - Google Analytics