div直线移动应用html,HTML页面DIV移动 – 适合各种浏览器

在IE浏览器中,要想移动DIV有很多方式,通过DIV的各种属性,使用JavaScript即可。但是,在其他浏览器中也要完成这个效果,那么IE这套方法不一定能搞定了。所以,今天告诉大家一个方法和例子,能在IE,Opera,FireFox,Chrome,Safari下都能实现移动。

原理很简单,我们过去使用的移动的思路是,相对某一个div或窗体移动,使用marginTop和marginLeft属性。但是,这两个属性在IE以外的浏览器,不好用。此时我们使用left和top完成,并且是移动的相对点是浏览器窗口。这个可以多个DIV相对的,前后层的移动。他的活动范围是整个显示窗口。

在浏览器IE,Opera,Safari,Chrome,FireFox下都测试通过。

1、首先建立一个DIV

2、添加样式

代码:

#move{

position:relative;

left:100px;

top:100px;

width:200px;

height:200px;

border:1pxsolid#000;

}

3、编写JavaScript代码:

function move(){

//获取移动的DIV对象

var obj = document.getElementById("move");

//设置样式定位属性,让div从当前文档流中拖出。

//这样,他属于整个活动窗体。可以层叠。

obj.style.position = "absolute";

//动画计数器。

var num = 0;

//获得移动div,在整个活动区域的X坐标

var left = parseInt(obj.offsetLeft);

//获得移动div,在整个活动区域的Y坐标

var top = parseInt(obj.offsetTop);

//使用定时器移动DIV

var timer=setInterval(function(){ //移动的函数

if(num==10){ //移动十次

clearInterval(timer);

}

//通过left样式属性设置。必须带单位

obj.style.left = left + num *(500 - left)/10 + "px";

//通过top样式属性设置,必须带单位

obj.style.top = top + num *(500 - top)/10 + "px";

//计数器加一

num++;

},20);

}

完整代码:

DIV移动

#move{

position:absolute;

left:100px;

top:100px;

width:200px;

height:200px;

border:1px solid #000;

}

function move(){

//获取移动的DIV对象

var obj = document.getElementById("move");

//设置样式定位属性,让div从当前文档流中拖出。

//这样,他属于整个活动窗体。可以层叠。

obj.style.position = "absolute";

//动画计数器。

var num = 0;

//获得移动div,在整个活动区域的X坐标

var left = parseInt(obj.offsetLeft);

//获得移动div,在整个活动区域的Y坐标

var top = parseInt(obj.offsetTop);

//使用定时器移动DIV

var timer=setInterval(function(){ //移动的函数

if(num==10){ //移动十次

clearInterval(timer);

}

//通过left样式属性设置。必须带单位

obj.style.left = left + num *(500 - left)/10 + "px";

//通过top样式属性设置,必须带单位

obj.style.top = top + num *(500 - top)/10 + "px";

//计数器加一

num++;

},20);

}

Move

各种浏览器测试:

IE8下:

4e1245676675ff46aa927af0054d0441.png

点击按钮之后:

a5ed97a6b20edcb2a2e6dda4241ecf89.png

Opera下:

72d0f67e46367d28303bdb6f8a5767d3.png

点击按钮之后:

192af0107265e39b449c7c57972dee37.png

Safari下:

c69f81f3355ea99565cb8347762db615.png

点击按钮之后:

0deadcaf4434ecf28acb4d03962a1c40.png

FireFox下:

b6419d186c9dab0b02c34e376d9d36d1.png

点击按钮之后:

3e57782fec02ed3e04086ac034da158f.png

Chrome下:

4423508894b32a9d8fe16967f692ca7f.png

点击按钮之后:

8f5fe5dfada6329757b31ed6461e28e5.png

  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

表情包
插入表情
评论将由博主筛选后显示,对所有人可见 | 还能输入1000个字符
相关推荐
©️2020 CSDN 皮肤主题: 深蓝海洋 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值