製品除去特殊効果制作: タイマー、カウントダウン、ディザリング特殊効果コード

.clear:after {
content: '';
display: block;
clear: Both;
}
ul {
list-style: none;
margin: 100px auto 0;
padding: 0;
width: 1300px;
border: 1pxソリッド #000;
}
li {
padding: 10px;
float: left;
width: 300px;
position:相対;
}
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;
color: 白;
border-radius: 10px;
}
.text1 {
width: 240px;
}
li div:nth-of-type(3) {
padding: 20px;
}
。 Goods_name {
line-height: 40px;
}
.img {
width: 100px;
height: 140px;
}
li . sold_out {
position: 絶対;
left: -38px;
-left: 61px;
トップ: 0;
-トップ: 76px;
幅: 396px;
-幅: 198px;
-高さ: 1 98px;
不透明度: 0;
表示: なし;
z-index: 999999;
}
li .mask {
幅: 100%;
高さ: 100%;
位置: 絶対;
左: 0;
トップ: 0;
z-index: 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 = document. querySelector('.table tbody');</p> <p>liElements.forEach(function (li) {<br> soldOut(li);<br> });</p> <p>function soldOut(li) {<br> /*<br> *その中に一个来来做逻辑处理<br> * */<br> var buttonElement = li.querySelector('button');<br> var text1Element = li.querySelector('.text1');<br> var MaskElement = li.querySelect or('.mask');<br> var soldOutElement = li.querySelector('. sold_out');<br> var timeSpanElement = li.querySelectorAll('.time span');</p> <p>var GoodsName = li.querySelector('.goods_name').innerHTML;<br> var GoodsPrice = li.querySelector ('.goods_price').innerHTML;<br> var GoodsImg = li.querySelector('.img').src;</p> <p>/*<br> * 点击按钮获取倒计時の時間间<br> * */ <br> buttonElement.onclick = function() { <br> var months = parseInt(text1Element.value);</p> <p>/*<br> * 秒变成時分秒的格式、并计算计時<br> * */<br> var timer = setInterval(function () {<br> 秒--;</p> <p> if (秒 >= 0) {<br> var timeArr = minutes2HMS(秒).split('');</p> <p>timeArr.forEach(function (item,index) {<br> timeSpanElement[index] .innerHTML = item;<br> }) ;<br> } else {<br> //時間间到了<br> clearInterval(timer);<br> timeOver();<br> add2List();<br> }</p> <p><br> }, 1000);</p> <p><br> };</p> <p>function timeOver() {<br> maskElement .style.display = 'block';<br>// maskElement.style.opacity = '0.5';<br> animation(maskElement, {<br> opacity: 0.5<br> }, 500);</p> <p> soldOutElement.style.display = 'ブロック'; <br>アニメーション（soldoutelement、{<br>width：198、<br>height：198、<br>左：61、<br>トップ：76、<br>opacity：1<br>}、500、 'bounceout'）; (li, 'left', 20, 2);</p> }, 200);<p> }<br><br>/*<br> * 現在の商品情報を表格列表中に追加</p> * */ <p> 関数 add2List() {<br></p> <p>tbodyElements.innerHTML += '<tr><td>'+goodsName+'</td><td>'+goodsPrice+'</td><td><img src="'+goodsImg+ '"/> / console.log(trElements[trElements.length - 1]);</p>// アニメーション(trElements[trElements.length - 1], {<p>// 不透明度: 1<br>// 100);<br><br> trelements.foreach（function（tr）{<br>animation（tr、{<br>opacity：1</p>‐ ‐ ‐ ‐ ‐ ‐ ‐ ‐ ‐ ‐ ‐ ‐ ‐ ‐ ‐ ‐ ‐ ‐ ‐ ‐ ‐ ‐ ‐ ‐ ‐ ‐ ‐ ‐ ‐ ‐ ‐ ‐ ‐ ‐ - ）;<p><br>}<br><br>/<br>関数秒（秒） {</p> <p>var H = addZero(parseInt(秒 / 3600)); <br> var M = addZero(parseInt(秒 % 3600 / 60));</p> <p>return H + M + S;<br> }<br><br>function addZero(v) {<br> 震えろ！ " lement, attr);</p> /*<p> * + または - を示します <br> * var flag = true;<br></p>var timer = setInterval(function () {<p><br>if (flag) {</p> ' の ' の ' の ' の' s ‐ ‐ ‐ ‐ to element.style[attr] = OriginValue - range + ' px';<p> range -= ステップ;<br><br>if (range element.style[ attr] = OriginValue + 'px';</p> <p> 6);<br><br>}<br></p>function getCss(element, attr) {<p> return parseFloat( element.currentStyle ? element.currentStyle[attr] : getComputedStyle(element)[ attr]);<br> }<br> </script>



function anime(ele, attrs, period . = {};
obj[attr].b = parseFloat(getComputedStyle (ele)[attr]); obj[attr].c = attrs[attr].b;

var startTime = Date.now();

ele.timer = setInterval(function () {

var t = Date.now () - startTime;

、obj[attr].c、d);

if (attr == 'opacity') {
ele.style[attr] = value;
} else {
ele.style[attr] = value + 'px';
}
}

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

}, 16);
}

var Tween = {
Linear: function (t, b, c, d){ //均一速度
return c*t/d + b;
},
easeIn: function(t, b, c, d){ / /加速曲線 t Return C*(t/= d)*t + b; // t/= d t/d
},
Easeout: function (t, b, c, d) {// 減速曲線
使用するusing using using through using through through out out out out out out out through off ' s ‐to ‐ ‐ out ‐‐ n‐‐‐‐ between },
easyInStrong: function(t, b, c, d){ //ジャーク曲線
return c*(t/=d)*t*t*t + b;
},
easeOutStrong: function(t, b, c, d){ //減速と減速度曲線
を通じてアウト スルー アウト アウト アウト アウト アウト アウト アウト アウト アウト アウト アウト アウト アウト アウト アウト アウト アウト アウト アウト アウト アウト アウト アウト アウト アウト アウト アウト アウト アウト アウト アウト アウト アウト アウト アウト アウト アウト アウト アウト アウト アウト アウト アウト アウト アウト アウト アウト オーバー-c、d）{、d）{//加速および減速曲線
、、 2*（（t- = 2）*t*t*t-2） + b; , 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) {
return b; p=d*0.3;
}
if (!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) * Math.sin ( (t*d-s)*(2*Math.PI)/p ) + c +
},
elastic Both: function(t, b, c, d, a, p){
を使用して を使用して使用してusing using using using ' s ' through ' using ' using using using ' s ' through using ''s ' through to ‐ to ‐‐‐‐‐ to 2) {
Math.abs(c) ) {
a = c;
var s = p/4; a*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 == 'unknown') {
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;
},
back Both: function( t, b, c, d, s){
if (typeof s == '未定義') {
s = 1.70158;
}
if ((t /= d/2 ) 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) return c*(7.5625*t*t) + b;
} else if (t return c*(7.5625*(t-=(1.5/ 2.75))*t + 0.75) + b;
} else if (t return c*(7.5625*(t-=(2.25/2.75))*t + 0.9375) + b ;
}
return c*(7.5625*(t-=(2.625/2.75))*t + 0.984375) + b;
},
bounce Both: function(t, b, c, d){
if (t < ; 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 中国語 Web サイトの他の関連記事を参照してください。