りー りー 韩雪冬网站效果 - 妙味课堂 - www.miaov.com 素晴らしい教室 - www.miaov.com< /body><br>/*初期幅*/<br>// 関数の自己実行書き込みメソッドを使用して、グローバルな汚染を防ぎます<br>(function(){<br> var picList = document.querySelectorAll('.picList>li'); <br> for (var i = 0; i <picList.length;i++){<br/> [0] var img = picList[i].getElementsByTagName("img ")[0]; [i],"幅",img. width);<br/> img.style.width = "100%";<br/> }<br/>})();<br/>/* 左ボタンのマウスの移動と移動のアニメーション*/<br/>(function( ){<br/> // prev 内の要素はそれ自体よりも高いレベルにあり、その上に構築されるため、onmouseover または onmouseout を prev に追加すると、実際にはマウスは prev 上でまったく移動しなくなるため、干渉を防ぐためにより高いレベルの prevBtn を追加します、 nextBtn にも同じことが当てはまります<br/> var prevBtn = document.querySelector('.prev_div');<br/> var prev = document.querySelector('.prev');<br/> var prevSpan = prev.querySelectorAll('span');<br/> prevBtn .onmouseover = function(){<br/> startMove({時間: <br/> type: "ease Both"<br/> });<br/> startMove({<br/> EL: Prevspan [0], <br/> Target: {<br/> Opacity: 1, <br/> left: 12 <br/>}、<br/>時間：300、<br/>タイプ： "easeboth"<br/>}）; ]、}）;は、「s」を使用して「s」を使用して「s」を使用して「s」を使用して 's' 'を使用します。 <br/> 時間: 300, <br/> タイプ: "Ease Both" <br/>}); },<br/> 時間: 300,<br/> 時間: "ease Both"<br/> =document .querySelector('.next_div');<br/> var next = document.querySelector('. next');<br/> var nextSpan = next.querySelectorAll('span');<br/> nextBtn.onmouseover = function(){<br/> startMove({<br/> el: nextSpan[1],<br/> target: {<br/> right: 12<br/> },<br/> time: 300,<br/> type: "ease Both"<br/> });<br/> startMove({<br/> el: nextSpan[0],<br/> target: {<br/> opacity:1,<br/> right: 12<br/> },<br/> time: 300,<br/> type: "ease Both"<br/> });<br/> startMove({<br/> el: nextSpan[2],<br/> target: {<br/> opacity:1 ,<br/> right: 53<br/> },<br/> time: 300,<br/> type: "ease Both"<br/> });<br/> };<br/> nextBtn.onmouseout = function(){<br/> startMove({<br/> el: nextSpan[1],<br/> target: {<br/> right: 0<br/> },<br/> time: 300,<br/> type: "ease Both"<br/> });<br/> startMove({ <br/> el: nextSpan[0],<br/> target: {<br/> opacity:0,<br/> right: 0<br/> } ,<br/> time: 300,<br/> type: "ease Both"<br/> });<br/> startMove({<br/> el: nextSpan[2],<br/> target: {<br/> 不透明度:0,<br/> 右: 65<br/> },<br/> 時間: 300,<br/> type: "ease Both"<br/> });<br/> };<br/>})();<br/>/*<br/> 点击切换アニメーション画<br/>*/<br/>(function(){<br/> var Wrap = document.querySelector('#automatic');<br/> var prevBtn = document.querySelector('.prev_div');<br/> var nextBtn = document.querySelector('.next_div');<br/> var picList = document.querySelectorAll('.picList>li');<br> var line = document.querySelector( '.line');<br> var attrs = [];<br> var timer = 0;<br> for(var i = 0; i <piclist.length i></piclist.length> // 先给li 数组中对应的空间内に储它の各项属性データを保存するためのオブジェクトを追加します<br> attrs[i] = {};<br> attrs[i].width = css(picList[ i],"width");<br> attrs[i].left = css(picList[i],"left");<br> attrs[i].top = css(picList[i],"top");<br> attrs [i].opacity = css(picList[i],"opacity");<br> attrs[i].zIndex = css(picList[i],"zIndex");<br> }<br> prevBtn.onclick = function(){<br> attrs.push(attrs.shift());<br> setStyle();<br> };<br> nextBtn.onclick = function(){<br> attrs.unshift(attrs.pop());<br> setStyle();<br> }; <br> 機能setStyle(){<br> css(line,"opacity",0);<br> for(var i = 0; i <piclist.length i></piclist.length> // css(picList[i],"left",attrs[私].左);<br> // css(picList[i],"top",attrs[i].top);<br> // css(picList[i],"opacity",attrs[i].opacity);<br> // css(picList[ i],"zIndex",attrs[i].zIndex);<br> // 让图片提前显表示再变化样式<br> css(picList[i],"zIndex",attrs[i].zIndex);<br> startMove({ <br> el: picList[i],<br> target: attrs[i],<br> time: 500,<br> type: "easeOut",<br> callBack: function(){<br> startMove({<br> el:line,<br> target:{opacity: 1},<br> time: 200,<br> type: "easeOut",<br> callBack:function(){<br> console.log(1);<br> }<br> <br> }<br> }<br> timer = setInterval (function(){<br> nextBtn.onclick();<br> },3000);<br> wrap.onmouseover = function(){<br> clearInterval(timer);<br> }<br> wrap.onmouseout = function(){<br>タイマー = setInterval(関数(){<br> nextBtn.onclick();<br> },3000);<br> }<br>})();<br>
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
