请问老师我这个动画效果有没有好方法实现
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1, maximum-scale=1, user-scalable=no">
<title>作业</title>
<link rel="stylesheet" type="text/css" href="./css/style.css">
</head>
<body>
<!-- 第一区域 -->
<!-- 头部导航 -->
<header>
<span>imooc</span>
<button type="button" id="btn"></button>
<nav>
<a href="#">前端</a>
<a href="#">Java</a>
<a href="#">ios</a>
<a href="#">Android</a>
<a href="#">php</a>
</nav>
</header>
<section class="s1">
<img src="./img/1.png">
<h1>IMOOC</h1>
<button type="button" id="btn1">点我start图，再点stop</button>
</section>
<!-- 第二区域 -->
<section>
<nav>
<a href="#">关于慕课网</a>
<a href="#">关于课程</a>
<a href="#">核心团队</a>
<a href="#">慕课专题</a>
</nav>
</section>
<!-- 第三区域 -->
<section>
<article>
<h1>响应式</h1>
<p>响应式布局是Ethan Marcotte在2010年5月份提出的一个概念，简而言之，就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。
响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验，而且随着目前大屏幕移动设备的普及，用“大势所趋”来形容也不为过。随着越来越多的设计师采用这个技术，我们不仅看到很多的创新，还看到了一些成形的模式。</p>
</article>
</section>
<!-- 第四区域 -->
<section>
<span>IMOOC</span>
<span>welcome to <a href="#">www.imooc.com</a></span>
</section>
<!-- 第五区域 -->
<section>
<h1>主打课程</h1>
<div>
<div class="items"><img src="./img/1.jpg"></div>
<div class="items"><img src="./img/2.jpg"></div>
<div class="items"><img src="./img/3.jpg"></div>
<div class="items"><img src="./img/4.jpg"></div>
<div class="items"><img src="./img/5.jpg"></div>
<div class="items"><img src="./img/6.jpg"></div>
</div>
</section>
<!-- 第五区域 -->
<section>
<p>Copyright © 2017 imooc.com All Rights Reserved</p>
</section>
<script type="text/javascript" src="./js/style.js"></script>
</body>
</html>
/* all tag */
* {
margin:0;
padding:0;
border: none;
}
a {
text-decoration: none;
}
/* 第1区域 */
header {
height: 4rem;
width: 100%;
text-align: center;
}
header > span {
display: none;
}
header > button {
display: none;
}
header > nav {
padding-top: 2rem;
}
header > nav > a {
margin-left: 4rem;
color: #757575;
font-size: 1.2rem;
}
header > nav > a:nth-child(1) {
color: #afafaf;
}
header,.s1{
background: #B2C5CC;
}
.s1 {
text-align: center;
padding:6rem 0;
}
/* 给花图增加动画效果*/
.s1 .img {
animation: move 1s ease-in-out infinite alternate;
}
.s1 > h1 {
color: white;
font-size: 1.2rem;
margin: 2rem 0;
}
.s1 > button {
text-align: center;
height: 2rem;
width: 15rem;
margin: 2rem 0;
background: rgb(255,255,255);
font-size: 1.2rem;
cursor: pointer;
}
/* 第2区域 */
section:nth-of-type(2) > nav{
height: 5rem;
width: 100%;
background: white;
border-bottom: 1px solid gray;
text-align: center;
display: flex;
}
section:nth-of-type(2) > nav > a {
width: 25%;
display: flex;
justify-content: center;
align-items: center;
color: #bababa;
}
section > nav > a:nth-child(1) {
color:#545454;
}
/*第3区域*/
section:nth-of-type(3) {
height: 26rem;
width: 100%;
}
section > article {
height: 100%;
width: 100%;
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
}
section > article > h1 {
height: 2rem;
width: 100%;
font-size: 1.2rem;
color: #545454;
display: flex;
justify-content: center;
align-items: center;
}
section > article > p {
margin-top: 1rem;
color: #bababa;
font-size: 16px;
line-height: 1.8rem;
display: flex;
justify-content: center;
width: 80%;
}
/* 第4区域 */
section:nth-of-type(4) {
height: 5rem;
width: 100%;
background: #f4f4f4;
display: flex;
justify-content: space-between;
align-items: center;
}
section:nth-of-type(4) > span:nth-child(1) {
margin-left: 4rem;
font-size: 1.3rem;
}
section:nth-of-type(4) > span:nth-child(2) {
margin-right: 4rem;
font-size: 1.2rem;
}
/* 第5区域 */
section:nth-of-type(5) {
height: 25rem;
width: 100%;
background: url('../img/bg.jpg');
background-repeat: repeat;
background-size: 100% 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
section:nth-of-type(5) > h1 {
width: 90%;
margin-top: 3rem;
display: block;
text-align: left;
color: #545454;
padding-left: 1.2rem;
}
section:nth-of-type(5) > div {
height: 20rem;
width: 90%;
margin-bottom: 2rem;
display: flex;
flex-wrap:wrap;
justify-content: space-around;
}
section:nth-of-type(5) > div > .items{
width: 30%;
height: 48%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
section > div > div > img {
height: 100%;
width: 100%;
}
/*图片放大效果 */
.newItemLeft {
animation: newItemLeft 1s linear 1 alternate forwards;
}
.newItem {
animation: newItem 1s linear 1 alternate;
}
.newItemRight{
animation: newItemRight 1s linear 1 alternate;
}
/*第6区域 */
section:nth-of-type(6) {
height: 5rem;
width: 100%;
background: #f4f4f4;
}
section:nth-of-type(6) > p {
height: 100%;
width: 100%;
text-align:center;
line-height: 5rem;
}
/* iphone6 */
@media screen and (max-width: 760px) {
/* 第1区域变化 */
header{
background: #7EA6B1;
position: relative;
}
header > span {
display: block;
width: 100%;
height: 100%;
text-align: center;
line-height: 4rem;
font-size: 1.2rem;
color: white;
z-index: 2;
position: absolute;
background: #7EA6B1;
}
header > button {
display: block;
width: 1.2rem;
height: 1.2rem;
border: 1px solid white;
background: #7EA6B1;
position: absolute;
top: 1.2rem;
right: 0.7rem;
z-index: 3;
}
header > nav {
padding: 0;
background: #7EA6B1;
position: absolute;
top: -7rem;
width: 100%;
z-index: 1;
}
header > nav > a{
width: 100%;
height: 2rem;
display: block;
border-bottom: 1px solid gray;
margin: 0;
color: white;
font-size: 1rem;
}
header > nav > a:nth-child(1) {
color: white;
}
/* 第4部分 */
section:nth-of-type(4) {
flex-direction: column;
justify-content: center;
}
section:nth-of-type(4) > span:nth-child(1) {
margin-left: 0;
font-size: 1.3rem;
}
section:nth-of-type(4) > span:nth-child(2) {
margin-right: 0;
font-size: 1.2rem;
}
/* 第5区域 */
section:nth-of-type(5) > div > .items{
width: 45%;
height: 30%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
}
css文件：style.css
/* 引入动画效果 */
@keyframes move {
0%{
transform: scale(1) rotate(0deg);
}
25%{
transform: scale(1.5) rotate(90deg);
}
50%{
transform: scale(2) rotate(180deg);
}
75%{
transform: scale(1.5) rotate(270deg);
}
100%{
transform: scale(1) rotate(360deg);
}
}
@keyframes newItemLeft {
from{
transform: scale(1) translateX(0);
}
to{
transform: scale(1.5);
}
}
js文件
window.onload = function() {
//第1区域导航下滑上升效果
var btn = document.getElementById('btn'),
nav = document.getElementsByTagName('nav');
btn.onclick = function() {
if(nav[0].style.top != '4rem'){
nav[0].style.transition = 'top 300ms ease-in';
nav[0].style.top = '4rem';
}else {
nav[0].style.transition = 'top 300ms ease-in';
nav[0].style.top = '-7rem';
}
}
//第1区域，花图旋转效果
var btn1 = document.getElementById('btn1'),
img = document.getElementsByTagName('img');
btn1.onclick = function(){
if(img[0].classList.contains('img') ){
//检测是否有这个类名，为真就移除，为假就添加
img[0].classList.remove('img');
}else{
img[0].className = 'img';
}
}
//第5区域放大图
var items = document.getElementsByClassName('items');
/*
items[0].onclick = function(){
if(items[0].classList.contains('newItemLeft')){
items[0].classList.remove('newItemLeft');
}else{
for(var i=0;i<items.length;i++){
items[i].classList.remove('newItemLeft');
}
items[0].className += ' newItemLeft';
}
}
items[1].onclick = function(){
if(items[1].classList.contains('newItemLeft')){
items[1].classList.remove('newItemLeft');
}else{
for(var i=0;i<items.length;i++){
items[i].classList.remove('newItemLeft');
}
items[1].className += ' newItemLeft';
}
}
items[2].onclick = function(){
if(items[2].classList.contains('newItemLeft')){
items[2].classList.remove('newItemLeft');
}else{
for(var i=0;i<items.length;i++){
items[i].classList.remove('newItemLeft');
}
items[2].className += ' newItemLeft';
}
}
items[3].onclick = function(){
if(items[3].classList.contains('newItemLeft')){
items[3].classList.remove('newItemLeft');
}else{
for(var i=0;i<items.length;i++){
items[i].classList.remove('newItemLeft');
}
items[3].className += ' newItemLeft';
}
}
items[4].onclick = function(){
if(items[4].classList.contains('newItemLeft')){
items[4].classList.remove('newItemLeft');
}else{
for(var i=0;i<items.length;i++){
items[i].classList.remove('newItemLeft');
}
items[4].className += ' newItemLeft';
}
}
items[5].onclick = function(){
if(items[5].classList.contains('newItemLeft')){
items[5].classList.remove('newItemLeft');
}else{
for(var i=0;i<items.length;i++){
items[i].classList.remove('newItemLeft');
}
items[5].className += ' newItemLeft';
}
}
*/
//封装函数优化代码重复
function numFive(x){
//判断本身是否运行过动画效果
if(items[x].classList.contains('newItemLeft')){
items[x].classList.remove('newItemLeft');
}else{
for(var i=0;i<items.length;i++){
items[i].classList.remove('newItemLeft');
}
items[x].className += ' newItemLeft';
}
}
items[0].onclick=function(){
numFive(0);
};
items[1].onclick=function(){
numFive(1);
};
items[2].onclick=function(){
numFive(2);
};
items[3].onclick=function(){
numFive(3);
};
items[4].onclick=function(){
numFive(4);
};
items[5].onclick=function(){
numFive(5);
};
}
点击图片后让它放大并显示到中间去。
我的思路是，定义三个动画，这样两排3列的时候，左边，中间，右边 都各自应用动画，让它放大并往中间偏移。这样的问题是，Iphone的时候图片变成2排3列，又不合适了~接着思路是js判断被点击的图片位置，不管它是IPad和iphone，当它是左或右边的则往中间移动，中间直接放大并可能往上下偏移……另外这个判断这图片位置不知道有没有好方法……
或者干脆两套js，两个平台各自应用，倒是可以解决同一图片位置变化导致效果需要重新定义问题
正在回答
关于鼠标经过图片，图片放大的效果，老师这边给你一个案例作为参考：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#div1{
width: 200px;
height: 138px;
border: #000 solid 1px;
margin: 50px auto;
overflow: hidden;
}
#div1 img{
cursor: pointer;
transition: all 0.6s;
}
#div1 img:hover{
transform: scale(1.4);
}
</style>
</head>
<body>
<div id="div1">
<img src="demo.jpg" />
</div>
</body>
</html>希望可以帮到你！
- 参与学习 人
- 提交作业 2198 份
- 解答问题 5012 个
如果你有web端基础，既想进阶，又想进军移动端开发，那就来吧，我们专题为你带来的课程有HTML5、CSS3、移动基础、响应式、bootstrap、less等，让你在前端道路上畅通无阻！
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星