js——小动画

来源：互联网发布：维基百科数据库下载编辑：程序博客网时间：2024/06/05 07:54

最近写了个小动画练练手，这是我制作的一个小动画(待改进) mark

source:

html:

<!DOCTYPE html><html><head>    <title>demo</title>    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes" />    <meta http-equiv="content-type" content="text/html;charset=utf-8">    <link rel="stylesheet" href="default/index.css"></head><body>    <div id="content">        <div id="card1">            <div id="top">                <img src="112.png" alt="">            </div>            <div id="bottom">                <div id="card1L">                    <p class="card1T1">Gift Card</p>                    <p class="card1T2">$25.00</p>                </div>                <div id="card1R">                    <div id="bottom1">                        <span id="buy">Buy</span>                        <p id="but">                            <span id="btop"></span>                            <span id="bbottom"></span>                            <span id="left"></span>                            <span id="right"></span>                            <img id="yellow" src="yellow.png">                        </p>                    </div>                </div>            </div>        </div>        <div id="card2">            <div id="top2">                <p class="title1">YOUR ORDER WILL BE SHIPPED TO:</p>                <p class="title2">Nick Chuan</p>                <p id="title3"  class="title3">255 king St, Apt 338</p>                <p id="title4" class="title4">San Francisco.CA 94107</p>                <p id="title5" class="title5">Available to ship:1 business day</p>            </div>            <div id="bottom2">                <input id="text" type="text" value="Enter a gift message">                <p id="but2">Checkout</p>            </div>        </div>    </div></body><script type="text/javascript" src="default/index.js"></script></html>

css:

body,div{ box-sizing: border-box; }#content{  width: 300px;  height: 200px;  border:solid #ccc 1px;  box-shadow: 3px 3px 2px #eee;  border-radius: 10px;  position: absolute; top: 0;left: 0;right: 0;bottom: 0; margin: auto;  overflow:hidden;  }#card1,#card2{ width: 100%; height: 100%;  position: relative; }#card1{ z-index: 1; }#top{  width: 300px;  height: 130px;position:absolute; bottom:70px; overflow: hidden;  }#bottom{  width: 300px;  height: auto; overflow:hidden; position:absolute; top: 130px;left:0;}#top img{width: 100%; height: auto;}#card1L, #card1R{ width: 150px; height: 70px;  padding: 5px 20px; overflow: hidden;}#card1L{  float: left; z-index: 1;}.card1T1{ color: deeppink; font: bold 18px/7px Arial;}.card1T2{ color: #777; font: 17px/0 Arial;}#buy{  font: 20px/38px Arial; color: #fff; display: block; text-align: center; cursor: pointer; z-index: 1; }.title1{ font: bold 14px/25px Arial;}.title2{ font: bold 13px/9px Arial;}.title3,.title4{ font: 10px/9px Arial; color: #aaa; position: absolute; }.title3{  left: 30px;top:50px;}.title4{  left: 50px; top:70px;}.title5{ width: 260px; font: 10px/15px Arial; color: #aaa; padding-bottom: 5px; border-bottom: solid 1px #ccc; position: absolute; left: 70px; top:90px;}#bottom1{  width: 300px;  height: 70px;  position: absolute; }#but,#buy{  width: 70px;  height: 40px;  border-radius: 5px;  position: absolute;  left: 25px;  top: 10px;  margin:0;  overflow: hidden;  }#but{  background: #ef9a00;  }/*此处开始为丝带动画*/#btop{  width:6px;  height:20px;  background:#ff0;  position:absolute;  left:18px;  top:-20px;  display:block;   }#bbottom{  width:6px;  height:30px;  background:#ff0;  position:absolute;  left:18px;  top:40px; display:block;}#left{  width: 1px;  height: 6px;  background: #ff0;  position: absolute;  left: -1px;  top: 12px;  display: block;}#right{  width: 50px;  height: 6px;  background: #ff0;  position: absolute;  left: 70px;  top: 12px;  display: block;}#yellow{  width:0;  height:0;  position:absolute;  top:15px;  left:17px;  display:block; }/*单击按钮时调用这个类，执行时间为1s之后里面的黄条会延迟1s在加载*/.opacity{ opacity: 0; -moz-opacity:0;}.opacity1{ opacity: 1; -moz-opacity:1;}.once{   animation: one 1s 1;   -moz-animation: one 1s 1;   -webkit-animation: one 1s 1;}@-webkit-keyframes one{ 30%{  transform:scale(0.7); } 100%{  transform:scale(1);  } }@-moz-keyframes one{ 30%{  transform:scale(0.7); } 100%{  transform:scale(1);  } }@keyframes one{ 30%{  transform:scale(0.7); } 100%{  transform:scale(1);  } }#card2{ padding: 0 20px; top:-200px; left: 70px;  opacity: 0;}#top2{  width: 260px;  height: 130px; border-top-left-radius:19px;  border-top-right-radius:19px;  }#bottom2{ width: 300px;  height: 70px; padding-top: 10px; position: absolute; top:122px; }#bottom2 img{ width: 60px; height: 40px; float: left;}#text{  width:125px;  height:38px; margin: 0 10px 0 70px;padding: 0;border:1px solid #ccc;  border-radius:5px;  color:#ddd;  float: left; }#but2{  width:60px;  height:40px;  border-radius:5px;  margin:0; background:#51a5f3; color: #fff; float: left; font:10px/40px Arial; display: inline-block; text-align: center; cursor: pointer; }/* 动画效果   *//* 礼盒 1.3s   [持续 缓冲 延迟]*/.transitionGift{  -webkit-transition:all .3s linear 1s;  -moz-transition:all .3s linear 1s;transition:all .3s linear 1s; }/* 缩放  1.5s */.transitionTab{  transition: all .3s linear 1.3s;  -webkit-transition: all .3s linear 1.3s;  -moz-transition: all .3s linear 1.3s;}.transitionTab2{  transition: all .4s linear 1.3s;  -webkit-transition: all .4s linear 1.3s;  -moz-transition: all .4s linear 1.3s;}.transitionTab3{  transition: all .6s ease-in 1.3s;  -webkit-transition: all .6s ease-in 1.3s;  -moz-transition: all .6s ease-in 1.3s;}.transitionTab4{  transition: all .8s ease-in-out 1.3s;  -webkit-transition: all .8s ease-in-out 1.3s;  -moz-transition: all .8s ease-in-out 1.3s;}/* 切换 1.8s   */.transitionChange{   transition: all .3s linear 1.3s;  -webkit-transition: all .3s linear 1.3s;  -moz-transition: all .3s linear 1.3s; }.transitionChange{   transition: all .3s linear 1.3s;  -webkit-transition: all .3s linear 1.3s;  -moz-transition: all .3s linear 1.3s; }/*反转180*/.transform180{   transform: rotateX(360deg);-webkit-transform: rotateX(360deg);  -moz-transform: rotateX(360deg); }.flipper {  transition:all 1s linear 1s;  transform-style: preserve-3d;  }/*礼物还原*/.gifrHidden{  transition: all .1s linear 1.3s;  -webkit-transition: all .1s linear 1.3s;  -moz-transition: all .1s linear 1.3s;}

JS:

// JavaScript Document/*  点击事件1   */var butb=document.getElementById("buy");butb.onclick=function(){    click1();   /*点击效果*/    gift();     /*礼物拼合*/    move();     /*向下 向右移动*/    coming();   /*卡片第二面淡入效果*/    zindex(0,1);   /*改变拉片1，2的层叠关系*/    animDel('but2','once'); /*删除按钮的动画*/};/*  点击事件2   */var butb2=document.getElementById("but2");butb2.onclick=function() {    click2();   /*点击效果*/    //flipper();  /*翻转效果*/    cardDef();  /*显示卡片1*/    zindex(1,0);   /*改变拉片1，2的层叠关系*/    giftDef();      /*还原buy按钮 还原礼物初始状态*/    animDel('buy','once'); /*删除按钮的动画*/    animDel('but','once'); /*删除按钮的动画*/};/* 点击效果1 */function click1(){    buy.className=" once opacity transitionGift";    document.getElementById("buy").style.visibility='hidden';    but.className="once transitionGift";    var but = document.getElementById("but")    but.style.backgroundColor="#f00";}/*礼盒动画*/function gift(){    childNodes(but,'transitionGift');    change('left','w','20px');    change('right','l','20px');    change('btop','t','-5px');    change('bbottom','t','15px');    document.getElementById("yellow").setAttribute("style","width:35px; height:25px; top:3px; left:5px;");}/*向下 向右移动*/function move(){    document.getElementById('top').style.height = 0;    childNodes(card1,'transitionTab');    change('bottom','l','-180px');}/*卡片第二面淡入效果*/function coming(){    childNodes(bottom,'transitionTab');    childNodes(content,'transitionTab');    childNodes(card2,'transitionTab');    addClass('title3','transitionTab2');    addClass('title4','transitionTab3');    addClass('title5','transitionTab4');    /*位置初始化*/    change('card2','l','0');    change('title3','l','20px');    change('title4','l','20px');    change('title5','l','20px');    /*改变卡片2的透明度*/    opacityChange('card2');}/*改变拉片1，2的层叠关系*/function zindex(num1,num2){    card1 = document.getElementById('card1');    card2 = document.getElementById('card2');    card1.style.zIndex = num1;    card2.style.zIndex = num2;    card2.style.opacity = num2;}/*移除动画效果*/function animDel(name,cName){    temp = document.getElementById(name);    temp.className = temp.className.replace( new RegExp( "(\\s|^)" + cName + "(\\s|$)" )," " );}/* 点击效果2 */function click2(){    but2.className = " once ";}/* 翻转效果 */function flipper(){    addClass('card1', 'transform180');    addClass('card1', 'flipper');}/* 显示卡片1 */function cardDef(){    document.getElementById('top').style.height = '130px';    change('bottom','l', '0');}/* 还原buy按钮 还原礼物初始状态 */function giftDef(){    temp = document.getElementById("buy");    temp2 = document.getElementById("but");    temp.style.visibility='visible';    addClass('buy', 'opacity1');    temp2.style.backgroundColor= '#ef9a00';    /*还原礼物状态*/    change('left','w','1px');    change('right','l','70px');    change('btop','t','-20px');    change('bbottom','t','40px');    document.getElementById("yellow").setAttribute("style","width:0; height:0; top:15px; left:17px;");    childNodes(but,' ');    childNodes(but,'gifrHidden');}/*改变元素属性*/function change(name,attr,value){    id = document.getElementById(name);   if(attr=='w'){       id.style.width=value;    }    else if(attr=='l'){        id.style.left = value;    }    else if(attr=='t'){        id.style.top = value;    }}/*获取子元素 并添加指定class*/function childNodes(name,action){    this.temp = name.childNodes;        //将ID为name的子元素赋值给temp    for(i=1; i<temp.length;i++){        //依次给子元素添加样式        temp[i].className = action;    }}/*  添加指定class   */function addClass(name,style){    this.temp = document.getElementById(name);    temp.className +=" " +style;}/* 改变z-index的值 */function opacityChange(name){    temp = document.getElementById(name).style.opacity;    //alert(temp);    if(temp){        document.getElementById(name).className +=" " +"opacity";    }    else        document.getElementById(name).className +=" " +"opacity1";}

0 0