您的位置：首页 > Web前端 > JavaScript

使用JS控制页面元素位置移动

2018-04-03 14:29 603 查看

使用JS控制页面元素位置移动

主要的原理如下

使用

window.getComputedStyle(element).top

获取元素的top或left

使用定时器更改元素样式

element.style.top=(top+10)+'px'

全部代码如下

<!DOCTYPE html>
<html>
<head>
<title>flex</title>
<meta charset="utf-8">
<style>
#bg{background: #000;opacity: .5;position: fixed;top:0;bottom: 0;left: 0;right: 0;display: none;}
.box{position: fixed;top: 30%;left: 0px;right: 0px;width: 300px;height: 200px;margin-left:auto;margin-right:auto;display: none;}
.box-left{width:145px;height:100px;float: left;position: absolute;top:0;left:-1000px}
.box-right{width:145px;height:100px;float: left;position: absolute;top:0;right:-1000px}
.box-bottom{position: absolute;width: 100%;height:100px;float: left;top:1000px;}
</style>
</head>
<body>

<div id="bg"></div>
<div class="box" id="box">
<div class="box-left" id="box-left"><img src="http://pic7.nipic.com/20100602/2177138_170759552925_2.jpg" style="width:145px;height:100px;"></div>
<div class="box-right" id="box-right"><img src="http://pic7.nipic.com/20100602/2177138_170759552925_2.jpg" style="width:145px;height:100px;"></div>
<div class="box-bottom" id="box-bottom">一段文字,左边图片从左飘入，右边图片从右侧飘入，底部文字从底部飘入</div>
</div>

<script>
window.onload = function() {
setTimeout(function(){
show();
},300);

function show() {
var box = document.getElementById('box');
var bg = document.getElementById('bg');
var boxLeft = document.getElementById('box-left');
var boxRight = document.getElementById('box-right');
var boxBottom = document.getElementById('box-bottom');

box.style.display = "block";
bg.style.display = "block";

move(boxLeft,'left',{end:0})
move(boxRight,'right',{end:155})
move(boxBottom,'bottom',{end:100})

}

/*
* 移动方法
* @param element 元素节点
* @param direction 移动方向 left,right,top,bottom
* @param options 移动选项
*           speed 移动距离
*           time  定时器时间间隔
*           end    移动结束时的位置
* */
function move(element,direction,options){
var settings = {
speed:100,
time:30,
end:0,
}
if(options){
Object.assign(settings,options);
}

var timer;
clearInterval(timer);
var handler = function(){
var top = parseInt(window.getComputedStyle(element).top.slice(0, -2));
var left = parseInt(window.getComputedStyle(element).left.slice(0, -2));

if(direction=='top'){
if (top >= settings.end) {
clearInterval(timer);
} else {
element.style.top = (top + settings.speed) + 'px';
}
}else if(direction=='bottom'){
if(top<= settings.end){
clearInterval(timer);
}else{
element.style.top = (top - settings.speed) + 'px';
}
}else if(direction=='left'){
if(left>= settings.end){
clearInterval(timer);
}else{
element.style.left = (left + settings.speed) + 'px';
}
}else if(direction=='right'){
if(left <= settings.end){
clearInterval(timer);
}else{
element.style.left = (left - settings.speed) + 'px';
}
}
};
timer = setInterval(handler,settings.time);
}
}
</script>
</body>
</html>

第二种方法

function move2run(element, direction, options) {
var settings = {
speed: 100,
time: 30,
end: 0,
}
if (options) {
Object.assign(settings, options);
}
var timer = setInterval(function(){
var top = parseInt(window.getComputedStyle(element).top.slice(0, -2));
var left = parseInt(window.getComputedStyle(element).left.slice(0, -2));
if(direction=='top'){
if (top >= settings.end) {
return clearInterval(timer);
}
}else if(direction=='bottom'){
if(top<= settings.end){
return clearInterval(timer);
}
}else if(direction=='left'){
if(left>= settings.end){
return clearInterval(timer);
}
}else if(direction=='right'){
if(left <= settings.end){
return clearInterval(timer);
}
}else{
return clearInterval(timer);
}
move2(element,direction,options);
},settings.time)
}

function move2(element, direction, options) {
var settings = {
speed: 100,
}
if (options) {
Object.assign(settings, options);
}
var top = parseInt(window.getComputedStyle(element).top.slice(0, -2));
var left = parseInt(window.getComputedStyle(element).left.slice(0, -2));
if (direction == 'top') {
element.style.top = (top + settings.speed) + 'px';
} else if (direction == 'bottom') {
element.style.top = (top - settings.speed) + 'px';
} else if (direction == 'left') {
element.style.left = (left + settings.speed) + 'px';
} else if (direction == 'right') {
element.style.left = (left - settings.speed) + 'px';
}
}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航