兼容FF/IE跟随鼠标的层的效果

#level{
border: 1px solid #ccc;
background: #CCFFCC;
width:100px;height:30px;
position:absolute;
}

function addEvent(elm, evType, fn, useCapture)
{
if (elm.addEventListener){
elm.addEventListener(evType, fn, useCapture);
return true;
} else if (elm.attachEvent){
var r = elm.attachEvent("on"+evType, fn);
return r;
} else {
alert("Handler could not be removed");
}
}
var x,y,t;
function doit(evt){
var event=evt||window.event;
var level=document.getElementById("level");
/*如果是第一次调用该函数level.style.left和level.style.top都为空，所以要初始化*/
if(!level.style.left)level.style.left="1px";
if(!level.style.top)level.style.top="1px";
//用setTimeout函数调用该函数时event对象不存在，只有移动事件触发时event才存在
if(event){x=(event.x||event.pageX)};
if(event){y=(event.y||event.pageY)};
var theLeft=parseInt(level.style.left);
var theTop=parseInt(level.style.top);
if(x!=theLeft){
if(theLeft

content

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

赞 (0)

相关推荐

  • 兼容FF/IE跟随鼠标的层的效果

    #level{ border: 1px solid #ccc; background: #CCFFCC; width:100px;height:30px; position:absolute; } function addEvent(elm, evType, fn, useCapture) { if (elm.addEventListener){ elm.addEventListener(evType, fn, useCapture); return true; } else if (elm.a

  • 使用JS实现气泡跟随鼠标移动的动画效果

    使用JS实现气泡跟随鼠标移动的动画效果

    气泡跟随鼠标移动,并在每次点击时产生不同的变化 效果如下 <!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title> 简单的气泡效果 </title> <style type="text

  • JavaScript实现鼠标点击后层展开效果的方法

    本文实例讲述了JavaScript实现鼠标点击后层展开效果的方法.分享给大家供大家参考.具体分析如下: 这段JavaScript代码可实现鼠标点击后层展开的功能,代码稍嫌复杂,重在学习研究,有兴趣的可以修改简化一下. <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>层展开折叠</tit

  • vue实现组件跟随鼠标位置弹出效果(示例代码)

    vue实现组件跟随鼠标位置弹出效果(示例代码)

    实现鼠标放置在“我的”上时出现卡片,卡片位置跟随鼠标.当鼠标移除卡片时卡片隐藏.当鼠标移入时获取鼠标坐标,并把父组件的鼠标位置通过prop传给子组件. toCenter(event){ const{x,y}=event this.mouse_x=x; this.mouse_y=y; this.showCenter=true; }, 子组件通过动态绑定style改变div坐标. 注意!!! 一开始没用watch,而是在data里直接修改,如上所示.这样会出现刷新以后data获取不到prop中的属性

  • 一个跟随鼠标的图片放大效果，与FF兼容

    一个跟随鼠标的图片放大效果，与FF兼容

    <div align=center style="overfow: hidden; width: 100px; height: 100px"><img src="http://files.jb51.net/upload/2007426163751315.jpg" width="100" height="100" border="0" onmouseover="show(this)

  • js实现的跟随鼠标移动的时钟效果(中英文日期显示)

    中文日期限制 "; props2=""; Split=360/n; Dsplit=360/D.length; HandHeight=ClockHeight/4.5 HandWidth=ClockWidth/4.5 HandY=-7; HandX=-2.5; scrll=0; step=0.06; currStep=0; y=new Array();x=new Array();Y=new Array();X=new Array(); for (i=0; i '+props2+D

  • 原生JS+HTML5实现跟随鼠标一起流动的粒子动画效果

    原生JS+HTML5实现跟随鼠标一起流动的粒子动画效果

    本文实例讲述了原生JS+HTML5实现跟随鼠标一起流动的粒子动画效果.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset=gbk> <title>www.jb51.net 粒子效果演示</title> <meta name="description" content="HTML5/canva

  • 基于JavaScript实现鼠标悬浮弹出跟随鼠标移动的带箭头的信息层

    很多网站,当鼠标悬浮在一个元素上的时候能够弹出一个信息说明层,并且此层能够跟随鼠标移动,同时弹出的层带有箭头,此箭头指向鼠标悬浮的元素,下面就通过实例代码简单介绍一下如何实现此效果. 代码实例如下: <!DOCTYPE html> <html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta nam

  • jQuery实现跟随鼠标运动图层效果的方法

    jQuery实现跟随鼠标运动图层效果的方法

    本文实例讲述了jQuery实现跟随鼠标运动图层效果的方法.分享给大家供大家参考.具体分析如下: 一.基本目标 写一个跟随鼠标运动的图层, 图层中显示当前鼠标的位置, 如下图所示: 此图层之所以使用jQuery,而不是因为javascript,是因为jQuery的代码其便于兼容当前的所有主流的浏览器,至少IE8是没有任何问题的,不用像javascript大段大段的代码都用到兼容性上面了. 二.制作过程 本次实验的核心是jquery里面的mousemove事件, 鼠标移动则触发. 代码如下: 复制代

  • js实现文字跟随鼠标移动而移动的方法

    本文实例讲述了js实现文字跟随鼠标移动而移动的方法.分享给大家供大家参考.具体分析如下: 这是一款非常简单的鼠标特性代码,在网页中移动鼠标的时候,后面跟着一串文字跟随者鼠标移动 复制代码 代码如下: <html> <head> <style type="text/css"> .spanstyle { COLOR: 000000; FONT-SIZE: 10pt; POSITION: absolute; TOP: -50px; VISIBILITY:

随机推荐