제품제거 특수효과 제작 : 타이머, 카운트다운, 디더링 특수효과 코드

   
   <제목>제목
          .clear:after {
           content: '';
           display: block;
           clear: 둘 다;
       }
       ul {
           목록 스타일: 없음;
           여백: 100px 자동 0;
           패딩: 0;
           너비: 1300px;
           테두리: 1px 솔리드 #000;
       }
       li {
           패딩: 10px;
           플로트: 왼쪽;
           너비: 300px;
           위치: 상대;
       }
       li div {
           text-align: center;
       }
       li div:nth-of-type(2) {
           margin: 20px 0;
           text-align: center;
       }
       li div:nth-of-type(2) 범위 {
          패딩: 10px;
           배경: #e15671;
           색상: 흰색;
           테두리 반경: 10px;
       }
       .text1 {
           너비: 240px;
       }
       li div:nth-of-type(3) {
           패딩: 20px;
       }
       . 상품 이름 {
           줄 높이: 40px;
       }
       .img {
           너비: 100px;
           높이: 140px;
       }
       li .sold_out {
           위치: 절대;
           왼쪽: -38px;
           -왼쪽: 61px;
상단: 0;
           -상단: 76px;
           폭: 396px;
           -폭: 198px;
           높이: 396px;
           -높이: 198px;
           불투명도: 0;
           디스플레이: 없음;
           z-색인: 999999;
}
       li .mask {
           너비: 100%;
           높이: 100%;
           위치: 절대;
           왼쪽: 0;
          상위: 0;
           z-색인: 999;
           배경: rgb(0,0,0 );
           불투명도: 0;
           디스플레이: 없음;
       }
       /*li .sold_out {*/
           /*위치: 절대;*/
           /*왼쪽: 84px;*/
           /*위쪽: 134px;*/
           /*너비: 132px;*/
           /*높이: 132px;*/
       /*}*/

.table {
margin: 30px auto 0;
width: 1300px;
}
tbody tr {
opacity: 0;
}
tbody img {
width: 50px;
height: 50px;
}

       
• 
             
  
                 
                 确定
             
  
             
  
                 剩余：
                 0
                 0
                 :
                 0
                 0
                 :
                 0
                 0
             
  
             
  
                 
             
  
             
  
                 iphone6s
             
  
             
  
                 抢购价：￥ 6000
             

  
             

  
         

       
• 
             
  
                 
                 确定
             
  
             
  
                 剩余：
                 0
                 0
                 :
                 0
                 0
                 :
                 0
                 0
             
  
             
  
                 
             
  
             
  
                 iMac
             
  
             
  
                 抢购价：￥ 19999
             

  
             

  
         

       
• 
             
  
                 
                 确定
             
  
             
  
                 剩余：
                 0
                 0
                 :
                 0
                 0
                 :
                 0
                 0
             
  
             
  
                 
             
  
             
  
                 ipod
             
  
             
  
                 抢购价：￥ 1000
             

  
             

  
         

       
• 
             
  
                 
                 确定
             
  
             
  
                 剩余：
                 0
                 0
                 :
                 0
                 0
                 :
                 0
                 0
             
  
             
  
                 
             
  
             
  
                 iWatch
             
  
             
  
                 抢购价：￥ 2000
             

  
             

  
         

   

       
           
           
               
               
               
           
           
           
       

商品	价格	图片

   

<script></p> <p>var liElements = document.querySelectorAll('li');<br>        var tbodyElements = 문서. querySelector('.table tbody');</p> <p>liElements.forEach(함수 (li) {<br>            soldOut(li);<br>        });</p> <p>function saleOut(li) {<br>            /*<br>             *以其中给一个li来做逻辑处리<br>             * */<br>            var buttonElement = li.querySelector('button');<br>            var text1Element = li.querySelector('.text1');<br>            var MaskElement = li.que rySelector('.mask');<br>            varoldOutElement = li.querySelector('.sold_out');<br>            var timeSpanElement = li.querySelectorAll('.timespan');</p> <p>var GoodsName = li.querySelector('.goods_name').innerHTML;<br>            var productsPrice = li.querySelector ('.goods_price').innerHTML;<br>            var GoodsImg = li.querySelector('.img').src;</p> <p>/*<br>             * 点击按钮获取倒计时的时间<br>            * */<br>            buttonElement.onclick = function() { <br>                var second =parseInt(text1Element.value);</p> <p>/*<br>                 * 把seconds变成时分秒的格式，并计算倒计时<br>                * */<br>                var 타이머 = setInterval(function () {<br>                    초--;</p> <p> if (초 >= 0) {<br>                        var timeArr = second2HMS(초).split('');</p> <p>timeArr.forEach(함수 (항목, 색인) {<br>                          timeSpanElement[index ].innerHTML = 항목;<br>                        }) ;<br>                  } else {<br>                        //时间到了<br>                        clearInterval(타이머);<br>            > <br>            };<br></p>function timeOver() {<p>                maskElement .style.display = 'block';<br>//            maskElement.style.opacity = '0.5';</p>                animation(maskElement, {<p>                    불투명도: 0.5<br>               }, 500);</p> <p>soldOutElement.style.display = '차단'; and 1,<br>                  상위: 76,<br>                    불투명도: 1<br>              }, 500, 'bounceOut');<br><br>setTimeout(function () {</p>                   흔들기 (li, '왼쪽', 20, 2);<p>                }, 200);<br>            }<br><br>/*<br>            * 添加当前的商品信息到表格列表中<br>            * */<br>            function add2List() {<br></p> <p>tbodyElements.innerHTML += '<tr><td>'+goodsName+'</td><td>'+goodsPrice+'</td><td><img src="'+goodsImg+ '"/></td></tr>';</p> <p>var trElements = tbodyElements.querySelectorAll('tr');<br>                                                          >                                / console.log(trElements[trElements.length - 1]);<br>// animation(trElements[trElements.length - 1], {<br>// 불투명도: 1<br>//             }, 100);<br></p>trElements.forEach( 함수(tr) {<p>                     animation(tr, {<br>                          불투명도: 1<br>                                       ‐ ‐ – – – – – -100); (초 % 3600 /60)); 초 % 60 ));<br><br>return H + M + S;</p> }<p><br>function addZero(v) {</p>                                                                   떨려요! " lement, attr);<p>               /*<br>               * 표시 + 또는 - <br>         * */<br>       var flag = true;<br></p>var 타이머 = setInterval(function () {<p><br>if (flag) {<br> | = OriginValue - 범위 + 'px';</p>                                                                                  범위 -= 단계;<p><br>if (범위 <= 0) {</p>                             element.style[ attr] = OriginValue + 'px';<p>                                      ~                   6);<br><br>}</p> <p>기능 getCss(element, attr) {<br>                 return parseFloat( element.currentStyle ? element.currentStyle[attr] : getCompulatedStyle(element)[attr]);<br>     }<br>   </script>

function animation(ele, attrs, Duration . = {};
          obj[attr].b =parseFloat(getCompulatedStyle(ele)[attr]);           obj[attr].c = attrs[attr] - obj[attr ].b;
}

var fx = fx || 'linear';
var callback = 콜백 || function(){};

var startTime = Date.now();

ele.timer = setInterval( 함수 () {

var t = Date.now () - startTime;

if (t>= d) {
, obj[attr].c, d);

if (attr == '불투명도') {
               ele.style[attr] = value;
           } else {
               ele.style[attr] = value + 'px';
           }
       }

if (t == d) {
           clearInterval(ele.timer);
           ele.timer = null;
           callback();
       }

}, 16);
}

var Tween = {
선형: 함수 (t, b, c, d){ //균일한 속도
        return c*t/d + b;
  },
 easeIn: 함수(t, b, c, d){ / /가속 곡선 t Return C*(t/= d)*t + b; // t/= d t/d
},
완화: 함수 (t, b, c, d) {// 감속 곡선
                                                                           사용 중          through out through out out through out out out through out through out off 's ' through ‐ to ‐ ‐‐‐‐‐ ,
to d를 사용하여 -c *(t/=d)*(t-2를 반환합니다. ) + b;
},
easyBoth: function(t, b, c, d){ },
easyInStrong: function(t, b, c, d){ //저크 곡선
      return c*(t/=d )*t*t*t + b;
},
 easeOutStrong: function(t, b, c, d) {// 속도 곡선 감소
return -c*((t = t/d -)*t* t*t -1) + b
},
Easebothstrong: 함수 (T, B, C, C, C, C, C, C, C, C, C, C, C, C, C, d){ //가속 및 감속 곡선
                                                                                                   > 2 * ((t-=2)*t*t*t - 2) + b;
},
elasticIn: 함수(t, b, c, d, a, p){ //정현파 붕괴 곡선(바운스 기울기)
          if (t === 0) {
                 
            if (!p) {
              p =d*0.3 ;
                                                                                                var s = p /(2 *Math.PI) * Math.asin (c/a);
} }
  return -(a*Math.pow(2,10*(t-=1)) * Math.sin( (t* d-s)*( 2*Math.PI)/p )) + b;
},
elasticOut: function(t, b, c, d, a, p){ //정현파 향상 곡선(바운스 아웃)
if ( t = == 0) {
                 반환 b;                                                                           |
            a = c
          var s = p / 4;
      } else {
              var s = p/(2*Math.PI) * Math.asin (c/a);
} }
  return a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b;
},
elasticBoth: function(t, b, c, d, a, p){
                                                           사용 사용     사용 사용     사용 ' s ' 사용 ' 통해 ' 사용 ' 사용 사용 ' s ' 사용 통해 '' 통해 ‐‐‐‐‐ 2) {
                                                                    Math.abs(c) ) {
a = c;
        var s = p/4;
                                                                > >                 
      }
          반품 *Math.pow(2,-10*(t-=1)) *
            Math.sin( (t*d-s)*(2*Math.PI)/p )*0.5 + c + b ;
},
backIn: function(t, b, c, d, s){ //뒤로 가속(되감기 페이드인)
        if (typeof s == 'undefine') {                       s = 1.70158;
       }
       return c*(t/=d)*t*((s+1)*t - s) + b;
   },
   backOut: function(t, b, c, d, s){
       if ( typeof s == '정의되지 않음') {
           s = 3.70158;  //멋진 설명
       }
       return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b;
   },
   backBoth: function( t, b, c, d, s){
       if (typeof s == '정의되지 않음') {
           s = 1.70158;
       }
       if ((t /= d/2 ) < 1) {
          c/반품 2*(t*t*(((s*=(1.525))+1)*t - s)) + b;
       }
       return c/2*((t-=2)*t*((( s*=(1.525))+1)*t + s) + 2) + b;
   },
   bounceIn: function(t, b, c, d){    //弹球减振(弹球渐출)
       return c - Tween['bounceOut'](d-t, 0, c, d) + b;
   },
   bounceOut: function(t, b, c, d){
       if ((t/=d) < (1/2.75)) {
           return c*(7.5625*t*t) + b;
       } else if (t < (2/2.75)) {
           return c*(7.5625*(t-=(1.5/ 2.75))*t + 0.75) + b;
       } else if (t < (2.5/2.75)) {
           return c*(7.5625*(t-=(2.25/2.75))*t + 0.9375) + b ;
}} 반환 c*(7.5625*(t- = (2.625/2.75))*t + 0.984375) + b;
},
bounceboth : function (t, b, c, d) {
if (t & lt ; d/2) {
           return Tween['bounceIn'](t*2, 0, c, d) * 0.5 + b;
       }
       return Tween['bounceOut'](t*2-d, 0, c , d) * 0.5 + c*0.5 + b;
   }
};

위 내용은 제품제거 특수효과 제작 : 타이머, 카운트다운, 디더링 특수효과 코드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!