学习目标
学习web前端设计技术（HTML、css、JavaScript、jQuery等），综合运用技术，将其与HTML元素结合，设计样式、监听事件、添加动画等，给用户呈现出更好的视觉交互效果。本文主要学习分页按钮自动放大、元素移入移出、自动轮播动画效果。
一、分页按钮自动放大效果
当鼠标悬停在某个图标上时，这个图标会自动变大。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
li{
float: left;
/* 去除列表元素的样式 */
list-style: none;
width: 30px;
height: 30px;
border: 1px solid #ccc;
margin: 10px;
/* 居中显示 */
text-align: center;
line-height: 30px;
/* 绘制正圆，设置鼠标悬停时的鼠标举手样式 */
border-radius: 50%;
cursor: pointer;
/* 设置过渡效果*/
transition: all .4s;
}
li:hover{
/* 设置鼠标悬停时的效果，正圆半径放大 */
transform:scale(1.2);
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
</body>
</html>二、设置列表元素的移入移出效果
当鼠标悬停在某个/所有图标上时，方块先自动移出再移入。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="jquery-migrate-1.9.1.min.js"></script>
<style>
/*设置所有元素样式*/
*{
margin: 0;
padding:0
}
ul{
list-style: none;
width:400px;
height:250px;
/*设置黑色边框*/
border: 1px solid black;
margin:100px auto;
}
ul>li{
width:100px;
height:50px;
text-align: center;
float:left;
margin-top: 50px;
/* 隐藏超出的部分 */
overflow: hidden;
}
ul>li>span{
display: inline-block;
width:24px;
height: 24px;
background-color: red;
/*设置相对布局*/
position: relative;
}
div>ul>li{
margin: 0px;
padding:0px;
float: left;
width: 300px;
height: 161px;
}
img{
width: 300px;
height: 161px;
}
</style>
<script>
$(function(){
//鼠标悬停效果
$("li").mouseenter(function(){
$(this).children("span").stop();
$(this).children("span").animate({
//移出
top:-50
},1000,function(){
//移入
$(this).css("top","50px");
$(this).animate({top:0},1000)
})
})
autoPlay();
//监听li的移入和移出
$("div>ul>li").hover(function(){
// 停止滚动
clearInterval(timer);
},function(){
// 继续滚动
autoPlay();
})
})
</script>
</head>
<body>
<ul>
<li><span></span><p>百度</p></li>
<li><span></span><p>百度</p></li>
<li><span></span><p>百度</p></li>
<li><span></span><p>百度</p></li>
<li><span></span><p>百度</p></li>
<li><span></span><p>百度</p></li>
<li><span></span><p>百度</p></li>
<li><span></span><p>百度</p></li>
</ul>
</body>
</html>三、自动轮播动画效果
在容器内放置几张图片并为其添加动画，使其自动滚动播放轮播图。当鼠标悬停在某张图片上时，该图片悬停在容器中，同时轮播停止；移出图片时，轮播自动开始。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="jquery-migrate-1.9.1.min.js"></script>
<style>
*{
margin: 0;
padding:0
}
ul{
list-style: none;
width:400px;
height:250px;
border: 1px solid black;
margin:100px auto;
}
ul>li{
width:100px;
height:50px;
text-align: center;
float:left;
margin-top: 50px;
/* 隐藏超出的部分 */
overflow: hidden;
}
ul>li>span{
display: inline-block;
width:24px;
height: 24px;
background-color: red;
position: relative;
}
/* 无限循环滚动图片 */
div{
height: 161px;
width: 600px;
border:1px solid black;
margin:100px auto;
overflow: hidden;
background-color: black;
}
div>ul{
margin: 0px;
padding:0px;
list-style: none;
width: 1800px;
height: 161px;
background-color: black;
}
div>ul>li{
margin: 0px;
padding:0px;
float: left;
width: 300px;
height: 161px;
}
img{
width: 300px;
height: 161px;
}
</style>
<script>
$(function(){
$("li").mouseenter(function(){
$(this).children("span").stop();
})
// 图片滚动章
var offset=0;
var timer;
function autoPlay(){
timer=setInterval(function(){
offset+=-10;
if(offset<=-1200){
offset=0;
}
$("div>ul").css("marginLeft",offset)
},50);
}
autoPlay();
//监听li的移入和移出
$("div>ul>li").hover(function(){
// 停止滚动
clearInterval(timer);
//给非当前的图片添加蒙版
$(this).siblings().fadeTo(100,0.5);
//去除当前选中的蒙版
$(this).fadeTo(100,1);
},function(){
// 继续滚动
autoPlay();
$("div>ul>li").fadeTo(100,1);
})
})
</script>
</head>
<body>
<div>
<ul>
<li><img src="img/1.jpg" width=300 height=161></li>
<li><img src="img/2.jpg"></li>
<li><img src="img/3.jpg"></li>
<li><img src="img/4.jpg"></li>
<li><img src="img/1.jpg" width=300 height=161></li>
<li><img src="img/2.jpg"></li>
</ul>
</div>
</body>
</html>
