商品下架特效製作：定時器，倒數計時，抖動特效程式碼-js教程-PHP中文網

;標題標題> .clear:after { 內容: ''; } ul { 列表樣式：無； 邊距：100px auto 0; 填充：0; # 心#000; } li { 內邊距：10px; 浮動：左； 寬度：300px; # 寬度：300px; # div { 文字對齊：置中； } li div:nth-of-type(2) { 邊距: 20px 0; :nth-of-類型（2）跨度{ 內邊界：10px; 背景：#e15671; } .text1 { 寬度: 240px; } li div:nth-of-type(3) { 內邊距: 20px; 行高: 40px; } .img { 寬度: 100px; 高度: 140px;# c 位置: 絕對; 左：-38px; -左：61px; # 上方：0; -上方：76px; 1 寬度為寬度：396 寬度# 右：396px; -高度： 198px; 不透明度: 0; 顯示:無; # 寬度: 100%; 高度：100 %; 位置：絕對； 左：0; 背景：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; } </style> </head> <body> <ul class="clear"> <li> <div> <input type="text" class="text1"> <button>确定</button> </div> <div class="time"> 剩余： 0 0 : 0 0 : 0 0 </div> <div> <img class="img" src="images/goods_1.png" alt=""> </div> <div> iphone6s </div> <div> 抢购价：￥ 6000 </div> <img class="sold_out" src="images/sold-out.png" alt=""> <div class="mask"></div> </li> <li> <div> <input type="text" class="text1"> <button>确定</button> </div> <div class="time"> 剩余： 0 0 : 0 0 : 0 0 </div> <div> <img class="img" src="images/goods_2.png" alt=""> </div> <div> iMac </div> <div> 抢购价：￥ 19999 </div> <img class="sold_out" src="images/sold-out.png" alt=""> <div class="mask"></div> </li> <li> <div> <input type="text" class="text1"> <button>确定</button> </div> <div class="time"> 剩余： 0 0 : 0 0 : 0 0 </div> <div> <img class="img" src="images/goods_3.png" alt=""> </div> <div> ipod </div> <div> 抢购价：￥ 1000 </div> <img class="sold_out" src="images/sold-out.png" alt=""> <div class="mask"></div> </li> <li> <div> <input type="text" class="text1"> <button>确定</button> </div> <div class="time"> 剩余： 0 0 : 0 0 : 0 0 </div> <div> <img class="img" src="images/goods_4.png" alt=""> </div> <div> iWatch </div> <div> 抢购价：￥ 2000 </div> <img class="sold_out" src="images/sold-out.png" alt=""> <div class="mask"></div> </li> </ul> <div class="table"> <table width="1300" border="1"> <thead> <tr> <th>商品</th> <th>价格</th> <th>图片</th> </tr> </thead> <tbody></tbody> </table> </div> <script src="animation.js?1.1.11"></script> <script></script> var liElements = document.querySelectorAll ('li' ); var tbodyElements = document.querySelector('.table tbody'); liElements.forEach(function (li) { soldOut(li); #function sellOut(li) { /* * 其中給予一個li一個邏輯處理 Selector('button '); var text1Element = li.querySelector('.text1'); var maskElement = li.querySelector('.mask'); var. var timeSpanElement = li.querySelectorAll('.time span'); vargoodsName = li.querySelector('.goods_name').innerHTML; vargoodsPrice = li.hquerySelector(' .goodinvarsPrice; ## var GoodsImg = li.querySelector('.img').src; /* buttonElement.onclick = function( ) { var times = parseInt(text1Element.value); /* # var timeArr = setInterval(function () { 秒--; ##if (秒>= 0) { '' 從秒 2099999999999% timeArr.forEach(function (item, index) { time ); } else { arInterval(timer ); timeOver(); } }, 1000); }; }; function timeOver() { maskElement.style.display = 'block'; // , { 不透明度: 0.5 }, 500); soldOutElement.style.display = 'block';# 寬度：198， 高度： 198, 左: 61, 上方: 76, 與選擇 1, 10,0,0,0 )> ##setTimeout(function () { 搖晃(li, ' left', 20, 2); }, 200); } ##o/* * * / 函數add2List() { tbodyElements.innerHTML += '<tr><td>'+goodsName+'</td><td>'+goodsPrice+'</td><td><img src="' +goodsImg+'"/></td></tr>'; var trElements = tbodyElements.querySelectorAll('tr'); 目前最新一次新增的元素 // console.log(trElements[trElements.length - 1]); // opacity: 1 // }, 100); trElements.forEach(function (tr) { opacity: 1 }, 100); }, 1000); } } /*# * 將秒鐘轉換為時分格式為秒# (seconds) { var H = addZero(parseInt(seconds / 3600)); var M = addZero(parseInt(seconds % 3600 / 60)) 對# 是(seconds % 60)); return H + M + S; } function addZero(v) { return (v <) 10 ? '') + v; } /* * 顫抖！ * */ function shake(element, attr, range, step) { /* 1 /* ？ var originValue = getCss(element, attr); /* * 表示+或- #var timer = setInterval(function () { if (flag) { //先負 } else { element.style[ attr] = originValue + range + 'px'; //自減 element.style[attr] = originValue + 'px'; clearInterval(timer); #flag = !flag; }, 16); } function getCss(element, attr) { return parseFloat(element.currentStyle ? element.currentStyle[M ;/script></body> </html> function animation(ele, attrs, duration, fx, callback) { #if (ele. timer) { return; } var d = duration || 1000; var obj = {== = {}; obj[attr].b = parseFloat(getComputedStyle(ele)[attr]); obj[attr].c = attrs[attr] - objatt#r. #var fx = fx || 'linear'; var callback = callback || function(){}; var startTime = Date.now(); # ele.timer = setInterval(function () { var t = Date.now() - startTime; if (t >= d) { t = d; } ##for (var attr in attrs) { var value = Tween[fx](t, obj[attr].b, obj[attr]#.c, d); if (attr == '不透明度') { ele.style[attr] = value; } else { } else { # style ; } } if (t == d) { clearInterval(ele.timer); } ##}, 16);#} var Tween = { linear: function (t, b, c, d){ //勻速率 return c*t/d + b; },## return c*t/d + b; },## unction ( t, b, c, d){ //加速曲線 return c*(t/=d)*t + b; //t/=d t = t / d }, easeOut: function(t, b, c, d){ //減速曲線 return -c *(t/=d)*(t-2) + b; }, unc easeBoth: ftion(t , b, c, d){ //加速減速曲線 if ((t/=d/2) < 1) { return c/2*t*t + bo; # return -c/2 * ((--t)*(t-2) - 1) + b; }, easeInStrong: function(t, b, c, d){ //加加速曲線 return c*(t/=d)*t*t*t + b; }, easeOutStrong: function(t, b, c, d){ //減速曲線 return -c * ((t=t/d-1)*t*t*t - 1) + b; }, easeBothStrong: function(t, b, c, d){ / /加加速減速曲線 if ((t/=d/2) < 1) { return c/2*t*t*t*t + b;## -c/2 * ((t-=2)*t*t*t - 2) + b; }, elasticIn: function(t, b, c, d, a, p){ / /正弦衰減曲線（彈動漸進） if (t === 0) { return b; } return b; # return b+c; } if (!p) { . (!a || a < Math.abs(c) ) { a = c; var s = p/4; } else { 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 )) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b; }, elasticOut: function(t, b, c, d, a, p){ //正弦增強曲線（彈動漸出） if (t === 0) { return b; } if ( (t /= d) == 1 ) {#> if (!p) { p=d*0.3; } if (!a || a < Math.abs(c)) { } else { var s = p/(2*Math.PI) * Math.asin (c/a); } } return a Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b; }, elasticBoth: function(t, b, c, d, a, p){ if (t === 0) { return b; } c; } if (!p) { p = d*(0.3*1.5);## # # a = c; a = c; var s = p/4; } .asin (c/a); } if (t < 1) { return - 0.5*(a*Math.pow(2,10*(t-1) * 0.5*(a*Math.pow(2,10*(t-1) * (t* d-s)*(2*Math.PI)/p )) + b; } return a*Math.pow(2,-10*(t-=1)) * ( (t*d-s)*(2*Math.PI)/p )*0.5 + c + b; }, backIn: function(t, b, c, d, s){ //回退加速（回退漸進） if (typeof s == 'undefined') { s = 1.70158; # } 回傳 c*(t/=d)*t*((s+1)*t - s) + b; }, backOut: 函數(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 == 'undefined') { # if (( t /= d/2 ) 返回c/2*(t*t*(((s*=(1.525))+1)*t - s)) + b; # } 返回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) 5. t) + b; } else if (t 返回c*(7.5625*(t-=(1.5/2.75))*t + 007. # } else if (t return c*(7.5625*(t-=(2.25/2.75))) c*(7.5625*(t-=(2.25/2.75))) c*(7.5625*(t-=(2.25/2.75)))*(7.9375 return c *(7.5625*(t-=(2.625/2.75))*t + 0.984375) + b; }, bounceBoth: function(t, b, c, d){ if (t <bounceboth: function b c d></bounceboth:> if (t 回傳Tween['bounceIn'](t*2, 0, c, d) * 0.5 + b; }# d, 0, c, d) * 0.5 + c*0.5 + b; } };

以上是商品下架特效製作：定時器，倒數計時，抖動特效程式碼的詳細內容。更多資訊請關注PHP中文網其他相關文章！