1.复习回顾
- 让一个盒子向右运动
- 相对定位:相对于元素自身所在位置。
- 缓动公式:leader=leader+(target-leader)/10;
- 无缝滚动图
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div{
width:100px;
height:100px;
background-color: yellow;
position: relative;
}
</style>
</head>
<body>
<button>开始移动</button>
<div id="box"></div>
<script type="text/javascript">
var box=document.getElementById("box");
var btn=document.querySelector("button");
var leader=0;
var target=500;
btn.function(){
setInterval(function(){
leader=leader+(target-leader)/20;
box.style.left=leader+"px";
},20);
}
</script>
</body>
</html>
2.焦点轮播图案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
*{
margin:0;
padding:0;
}
img{
vertical-align: top;
}
#box{
width:590px;
height:470px;
margin:100px auto;
border: 2px solid #333;
padding:10px;
position: relative;
}
#content{
width:100%;
height:100%;
overflow: hidden;
}
ul,ol{
list-style: none;
}
ul{
width:1000%;
position: relative;
}
ul li{
float:left;
}
ol{
position: absolute;
left:50%;
bottom:15px;
}
ol li{
width:40px;
height:40px;
background-color: white;
text-align: center;
line-height: 40px;
border-radius: 20px;
border:1px solid #333;
float: left;
margin-right:5px;
}
.bgc{
background-color: yellow;
}
</style>
</head>
<body>
<div id="box">
<div id="content">
<ul>
<li><img src="img/1.jpg"/></li>
<li><img src="img/2.jpg"/></li>
<li><img src="img/3.jpg"/></li>
<li><img src="img/4.jpg"/></li>
</ul>
</div>
<ol>
<li class="bgc">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ol>
</div>
<script type="text/javascript">
var box=document.getElementById("box");
var uu=box.children[0].children[0];
var oo=box.children[1];
var lis=oo.children;
for(var i=0;i<lis.length;i++){
lis[i].index=i;
lis[i].function(){
for(var j=0;j<lis.length;j++){
lis[j].className="";
}
this.className="bgc";
target=-590*(this.index);
}
}
var leader=0;
var target=0;
setInterval(function(){
leader=leader+(target-leader)/20;
uu.style.left=leader+"px";
},20);
</script>
</body>
</html>
3.点击切换案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
*{
margin:0;
padding:0;
}
#box{
width:590px;
height:470px;
margin:100px auto;
border: 2px solid #333;
padding:10px;
position: relative;
}
#content{
width:100%;
height:100%;
overflow: hidden;
}
ul{
width:1000%;
position: relative;
list-style: none;
}
ul li{
float:left;
}
ol{
position: absolute;
right:10%;
bottom:15px;
list-style: none;
}
ol li{
width:40px;
height:40px;
background-color: white;
text-align: center;
line-height: 40px;
border-radius: 20px;
border:1px solid #333;
float: left;
margin-right:5px;
}
.bgc{
background-color: yellow;
}
button{
position: absolute;
top:0;
background-color:#666;
opacity: .4;
color:#ccc;
height:80px;
width:40px;
font-size:30px;
top:50%;
margin-top:-40px;
display: none;
}
#left{
left:20px;
}
#right{
right: 20px;
}
</style>
</head>
<body>
<div id="box">
<div id="content">
<ul></ul><!--存放照片-->
</div>
<ol></ol><!--存放小圆点-->
<button id="left"><</button>
<button id="right">></button>
</div>
<script type="text/javascript">
var box=document.getElementById("box");
var uu=box.children[0].children[0];
var oo=box.children[1];
var arr=["img/1.jpg","img/2.jpg","img/3.jpg","img/4.jpg"];
for(var i=0;i<arr.length;i++){//创建ul中的li及图片列表
var cImg=document.createElement("img");
cImg.src=arr[i];
var cLi=document.createElement("li");
cLi.appendChild(cImg);
uu.appendChild(cLi);
}
var uulis=uu.children;
for(var i=0;i<uulis.length;i++){//创建ol中的小圆点列表
var cLi=document.createElement("li");
cLi.innerHTML=i+1;
oo.appendChild(cLi);
}
var lis=oo.children;
lis[0].className="bgc";
var left=document.getElementById("left");
var right=document.getElementById("right");
box.function(){//鼠标经过,显示按钮
left.style.display="block";
right.style.display="block";
}
box.function(){//鼠标离开隐藏按钮
left.style.display="none";
right.style.display="none";
}
left.function(){//左边鼠标点击右移动
target+=590;
var i=-target/590;
if(i<=0){
i=0;
}
for(var j=0;j<lis.length;j++){
lis[j].className="";
}
lis[i].className="bgc";
}
right.function(){//右边鼠标点击左移动
target-=590;
var i=-target/590;
if(i>=3){
i=3;
}
for(var j=0;j<lis.length;j++){
lis[j].className="";
}
lis[i].className="bgc";
}
for(var i=0;i<lis.length;i++){
lis[i].index=i;
lis[i].function(){//鼠标经过小圆点,图片移动到对应的那张
for(var j=0;j<lis.length;j++){
lis[j].className="";
}
this.className="bgc";
target=-590*(this.index);
}
}
var leader=0;
var target=0;
setInterval(function(){//定时器,实现动态移动效果
leader=leader+(target-leader)/20;
if(target>=0){
target=0;
}else if(target<=-(590*3)){
target=-(590*3);
}
uu.style.left=leader+"px";
},20);
</script>
</body>
</html>
4.获取元素的尺寸
- 通过style是拿不到写在style样式表中尺寸信息的,只能用来添加行内样式,也只能获取行内样式数据,以字符串形式返回,比如:“200px”。
- offset:自己。offsetWidth、offsetHeight来获取样式表或行内的宽高信息。
- offsetWidth和offsetHeight能获取内容区和内边距、边框的累积尺寸。
- offsetWidth=width+padding+border。
- offsetLeft、offsetTop:找离自己最近的带有定位的父元素,如果父元素都没有添加定位,就找body。
- offsetParent:拿到的是离他最近的带有定位的父元素。tagName,拿到标签名,大写的。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin:0;
padding:0;
}
body{
background-color: #CCCCCC;
}
#box{
width:500px;
height:50px;
border:1px #333 solid;
margin:50px auto;
background-color: white;
position: relative;
}
ul{
list-style: none;
position: absolute;
}
ul li{
float: left;
width:100px;
height: 50px;
text-align: center;
line-height: 50px;
}
span{
display: inline-block;
background: url(img/5.png) no-repeat;
width:100px;
height:50px;
position: absolute;
left: 0;
}
</style>
</head>
<body>
<div id="box">
<span></span>
<ul>
<li>首页</li>
<li>首页</li>
<li>首页</li>
<li>首页</li>
<li>首页</li>
</ul>
</div>
<script type="text/javascript">
var lis=document.getElementsByTagName("li");
var span=document.getElementsByTagName("span")[0];
var flag=0;
for(var i=0;i<lis.length;i++){
lis[i].function(){
target=this.offsetLeft;
}
lis[i].function(){
target=flag;
}
lis[i].function(){
flag=this.offsetLeft;
}
}
var leader=0;
var target=0;
setInterval(function(){
leader=leader+(target-leader)/10;
span.style.left=leader+"px";
},20);
</script>
</body>
</html>
5.event
- js是事件驱动的
- event事件对象
- 存在兼容问题,IE只认识window.event
- event事件对象属性
- clientX; 是以当前窗口、可视区为基准的。
- clientY;
- pageX; 是以整个文档为基准的。
- pageY;
- screenX; 是以电脑屏幕为基准的。
- screenY;
- onmouseover 鼠标经过元素,只触发一次
- onmousemove 鼠标移动,鼠标只要动就会触发事件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin:0;
padding:0;
}
#box{
width:100px;
height:100px;
position: relative;
}
img{
width:100px;
height:100px;
}
</style>
</head>
<body>
<div id="box">
<img src="img/猴子.gif"/>
</div>
<script type="text/javascript">
var box=document.getElementById("box");
document.function(event){
var event = event||document.event;
targetX=event.clientX-box.offsetWidth/2;
targetY=event.clientY-box.offsetWidth/2;
}
var leaderX=0,leaderY=0,targetX=0,targetY=0;
setInterval(function(){
leaderX=leaderX+(targetX-leaderX)/10;
leaderY=leaderY+(targetY-leaderY)/10;
box.style.left=leaderX+"px";
box.style.top=leaderY+"px";
},20);
</script>
</body>
</html>