本文介绍了如何利用JavaScript实现页面元素的位置动态改变。通过函数、回调和定时器，可以实现元素的平滑移动效果，同时涉及到CSS样式表的动态修改以调整元素位置。
var $ = function(id) { return document.getElementById(id); }
var Images = function()
{
this.imgs = null;
this.images = new Array();
this.appendImg = function(img)
{
/*
Images.imgs = img;
Images.images = img.split(",");
for(var i=0;i<this.images.length;i++)
{
setTimeout("this.rotation("+i+", 360)",1000*i);
}
*/
}
this.rotation = function(target, degree)
{
var objImg = document.createElement("IMG");
objImg.id = target;
objImg.src= Images.images[target];
objImg.style.left = target*10;
objImg.style.top = 10;
var mDiv = document.getElementById("images");
mDiv.appendChild(objImg);
var i = 0;
var sinDeg = 0;
var cosDeg = 0;
var timer = null ;
target = $(target);
var orginW = target.clientWidth, orginH = target.clientHeight;
clearInterval(timer);
function run(angle) {
target.style.webkitTransform = 'rotate(' + angle + 'deg)';
}
timer = setInterval(function() {
i += 10;
run(i);
if (i > degree - 1) {
i = 0;
clearInterval(timer);
}
}, 30);
}
this.moveDiv = function(objId,endx,endy,second){
if(second == null)
second = 1;
var testDiv = $(objId);
if(testDiv == null)
return;
var xPos = parseInt(testDiv.style.left);
var yPos = parseInt(testDiv.style.top);
var interval = 10;//0.01秒循环一次
var timel = second/interval*1000;//次数
var distanceX = Math.abs(endx - xPos)/timel;//每次移动距离
var distanceY = Math.abs(endy - yPos)/timel;
moveTo(objId,endx,endy,distanceX,distanceY,null);
}
this.moveTo = function(objId,endx,endy,distanceX,distanceY,direction){
var testDiv = $(objId);
if(testDiv == null)
return;
var xPos = parseInt(testDiv.style.left);
var yPos = parseInt(testDiv.style.top);
switch(direction)
{
case 1:
{
//从上、左上方往下滑动
xPos += distanceX;
yPos += distanceY;
if(xPos >= endx && yPos >= endy)
return;
else
{
if(xPos > endx)
xPos = endx;
if(yPos > endy)
yPos = endy;
}
}
break;
//从左、左下方往上滑动
case 4:
{
xPos += distanceX;
yPos -= distanceY;
if(xPos >= endx && yPos <= endy)
return;
else
{
if(xPos > endx)
xPos = endx;
if(yPos < endy)
yPos = endy;
}
}
break;
//从右，右上方往下滑动
case 2:
{
xPos -= distanceX;
yPos += distanceY;
if(xPos <= endx && yPos >= endy)
return;
else
{
if(xPos < endx)
xPos = endx;
if(yPos > endy)
yPos = endy;
}
}
break;
//从右、右下方往上滑动
case 3:
{
xPos -= distanceX;
yPos -= distanceY;
if(xPos <= endx && yPos <= endy)
return;
else
{
if(xPos < endx)
xPos = endx;
if(yPos < endy)
yPos = endy;
}
}
break;
default:
{
if(xPos <= endx && yPos <= endy)
direction = 1;
if(xPos > endx && yPos > endy)
direction = 3;
if(xPos <= endx && yPos > endy)
direction = 4;
if(xPos > endx && yPos <= endy)
direction = 2;
}
}
testDiv.style.left = xPos+"px";
testDiv.style.top = yPos+"px";
setTimeout("moveTo('"+objId+"',"+endx+","+endy+","+distanceX+","+distanceY+","+direction+")",10);
}
return {appendImg: appendImg,rotation: rotation,moveDiv:moveDiv,moveTo:moveTo}
}();
例子：
<!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=utf-8" />
<title>3</title>
<style type="text/css">
html,body{overflow:hidden}
/* body{width:100%;height:100%;background-image: url('images/background.jpg');}*/
.div{ margin:auto; height:695px; width:1024px; background-image:url(images/background.jpg);}
.imgInfo{position: absolute; background-color:#000; color:#FFF; width:0px; height:18px; display:none; text-align:center; line-height:18px;}
</style>
<script type='text/javascript' src='../js/images.js'></script>
<script type='text/javascript' src='../js/jquery.js'></script>
<link href='../css/style4.css' type='text/css' rel='stylesheet' />
<script type="text/javascript">
function loadImage(url, callback) {
var img = new Image();
img.src = url;
img.onload = function(){ //图片下载完毕时异步调用callback函数。
callback.call(img); // 将callback函数this指针切换为img。
};
}
function shows() {
var src1 = "images/1.png";
var src2 = "images/2.png";
var src3 = "images/3.png";
var src4 = "images/4.png";
var src5 = "images/5.png";
var src6 = "images/6.png";
//var src4 = "images/text.png";
loadImage(src1,Images.moveDiv("1",140,350,0.5));
loadImage(src2,Images.moveDiv("2",450,350,0.5));
loadImage(src3,setTimeout('Images.moveDiv("3",230,450,0.5)',500));
loadImage(src4,Images.moveDiv("4",950,250,0.5));
loadImage(src5,setTimeout('Images.moveDiv("5",890,350,0.5)',300));
loadImage(src6,setTimeout('Images.moveDiv("6",930,500,0.5)',600));
//showDiv();
//setTimeout('showDiv()',500);
}
/*
var showImage = function()
{
Images.moveDiv("1",480,10,0.5);
Images.moveDiv("2",20,10,0.5);
setTimeout('Images.moveDiv("3",350,306,0.5)',1000);
setTimeout('Images.moveDiv("4",20,368,0.5)',1000);
setTimeout('Images.moveDiv("5",120,500,0.5)',1000);
setTimeout('showDiv()',2000);
}
*/
var showDiv = function()
{
$("div").show(1000);
}
//style="left:15px;top:150px;position: absolute;"
var imgClick = function(str)
{
window.location = "/image/1";
}
</script>
</head>
<body onload="shows()" scroll="0">
<div class="div">
<img onclick="imgClick('1')" style="left:200px;top:1000px;position: absolute;" src="images/1.png" id="1" width="187" height="176" />
<img onclick="imgClick('2')" style="left:400px;top:1000px;position: absolute;" src="images/2.png" id="2" width="177" height="189" />
<img onclick="imgClick('3')" style="left:300px;top:1000px;position: absolute;" src="images/3.png" id="3" width="286" height="233" />
<img onclick="imgClick('4')" style="left:1300px;top:250px;position: absolute;" src="images/4.png" id="4" width="173" height="172" />
<img onclick="imgClick('5')" style="left:1300px;top:350px;position: absolute;" src="images/5.png" id="5" width="201" height="221" />
<img onclick="imgClick('6')" style="left:1300px;top:500px;position: absolute;" src="images/6.png" id="6" width="229" height="230" />
</div>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
