前端开发之 ------------动画（1）------------

本章主要讲解怎样使用js来制作相关的页面动画！ 

　　首先我们来回顾一下怎么样在html文档中加载js脚本文件：

　　　　1：内嵌脚本

　　　　　　　　1》在head标签内进行添加

　　　　　　　　2》在body标签内进行添加

　　　　　　　　　　二者的添加方式都是在script标签内进行js代码的编写。

<script type="text/javascript">




</script>

　　　　2：外链脚本

　　　　　　　　在head标签内添加如下语句：

<script type="text/javascript" src="script.js"></script>

现在我们已经做好了准备，那么接下来我们就要制作我们的动画样式了！

　　第一步：编辑html样式

　　　　jsImgMove.html代码如下：

　　　　　　html代码很简单，在一个div盒子里面加载一张图片；图片

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>js动画</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="../css/js动画.css" rel="stylesheet">
<script src="../js/js动画.js" type="text/javascript" ></script>
</head>
<body>
    <div id="main">
    	<div id="image"><img src="../Images/jsmove.jpg" alt=""></div>
    </div>
</body>
</html>

　　第二步：编写css样式表文件

　　　　jsImgMove.css代码如下：

#main{
	width:456px;
	height: 300px;
	margin:0 auto;
	overflow: hidden;
	position: relative;
}
#image{
	position: absolute;	
}

　　第三步：编写js代码

　　　　

window.onload = moveDiv;
function moveDiv(){
    var left = 0;
    var param = 0;
    function loop(){
        updata();
        draw();
    }
    // document.getElementById("image").innerHtml = "!es is so cold";
    // alert("Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur, minus?");
    document.getElementById("main").style.border = " 2px solid red";
    function updata(){
        param += 1;
        left = param*450;
        if (left>1000) {
            left = 0;
            param = 0;
        }
    }
    function draw(){
        document.getElementById("image").style.left = "-"+left +"px";
    }
    setInterval(loop,2000);
    }

　

 

 

至此通过javascript来控制position left 的定位值来改变图片的轮播也就完成了！

如果大家有什么不懂得或想交流一下前端开发相关的知识的话可以给我留言！

如果有什么差错的地方或者需要改进的，还望大家斧正与指导！

posted @ 2016-09-28 12:08  毅栈  阅读(172)  评论(0)    收藏  举报