javascript实现元素的移动

最新推荐文章于 2024-04-18 13:21:59 发布

manbujingxin

最新推荐文章于 2024-04-18 13:21:59 发布

阅读量2.8k

点赞数

CC 4.0 BY-SA版权

分类专栏： web开发文章标签： javascript function callback timer stylesheet null

本文链接：https://blog.youkuaiyun.com/manbujingxin/article/details/6749971

web开发专栏收录该内容

36 篇文章

订阅专栏

本文介绍了如何利用JavaScript实现页面元素的位置动态改变。通过函数、回调和定时器，可以实现元素的平滑移动效果，同时涉及到CSS样式表的动态修改以调整元素位置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

        	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>