学习目标
学习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>
