注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

Copper peas ' Bolg

Keep On Moving...This Is My Life...

 
 
 

日志

 
 

【原】div层兼容firefox ie ,流畅拖动  

2011-03-24 12:04:29|  分类: javascript |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

关键:
1.FF与ie的兼容
2.边线拖动容易丢失和抖动
3.获取css样式里属性值

1.
e = e || window.event;  不加这行兼容也可以使用,但ie拖动不会流畅
FF 传递进去必须要有event
onmousedown='down(event)'

2.激活move在down里面,而不是在外面重新激活,这样移动鼠标过快也能反应 
document.onmousemove = move;

3.
获取css样式里的样式和<div style="">不同
css:
/*ie下获取css里的属性
alert(obj.currentStyle.left);
*/
/* ff下获取css里的属性
var myComputedStyle = document.defaultView.getComputedStyle(obj, null); 
alert(myComputedStyle.left);
*/
<div style="">:
var left = obj.style.left;


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>title</title>
<style type="text/css">
body{font-family:Verdana;font-size:11px;color:#333;}
#win{width:200px;height:430px;border:1px solid red;position:absolute;left:100px;top:200px;}
#title{width:100%;background:#000;height:18px;color:#fff;cursor:hand;}
</style>
</head>
<body>
<script type="text/javascript">
<!--
var posX;  
var posY;  
var popDiv;  
var dragable;  
function down(e){  
    obj = document.getElementById("title");
    e = e || window.event;
    popDiv = obj.parentNode;
 
    posX = e.clientX - parseInt(getcssstyle(popDiv,"left"));     
    posY = e.clientY - parseInt(getcssstyle(popDiv,"top"));  
    dragable = true;  
    document.onmousemove = move;  
}  
 
function move(ev){
    if(dragable == true){  
        ev = ev || window.event;
        popDiv.style.left = (ev.clientX - posX) + "px";     
        popDiv.style.top = (ev.clientY - posY) + "px";     
    }  
}  
 
function up(){  
    dragable = false;  
}

//兼容性获取css里FFIE和文本样式函数
function getcssstyle(obj,cssstyle)
    {
    //Firefox浏览器支持
    if (document.defaultView && document.defaultView.getComputedStyle) {
    var css = document.defaultView.getComputedStyle(obj, null);  
    value = css ? css[cssstyle] : null;  
    }
    else if (obj.currentStyle) {   
  //IE支持.  
       value = obj.currentStyle[cssstyle];  
    }
    //如果css没有定义,获取文本样式里
    else if(obj.style)
    {
          value = obj.style[cssstyle]; 
    }
    return value;
    }
//-->
</script>
<div id="win" style='width:520px;height:430px;border:1px solid red;position: absolute;left:100px;top:200px;'>  
 <div id='title' onmousedown='down(event)' onmouseup='up()' onmousemove='move(event)'>1</div>
 <div>
dsad<br>
 dsad<br>sad
 </div>
</div>
</body>
</html>
</body>
</html>

  评论这张
 
阅读(252)| 评论(0)
推荐 转载

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2018