この記事では、Tencent Picture Stationの画像ページターンボタンを模倣するJSの効果について説明します。次のように、参照のために共有してください。
実行効果のスクリーンショットは次のとおりです。
特定のコードは次のとおりです。
< tencent picture flip </title> <style type = "text/css"> *{margin：none;パディング：なし; } body {背景：＃000000; } #tip {position：absolute;幅：564px;高さ：362px;上：-362px;背景：url（../ img/tencentimg/tiplayer.png）; } #left {position：absolute;幅：101px;高さ：95px;背景：url（../ img/tencentimg/left.png）;ボーダー：1pxソリッド＃F2F2F2;表示：なし;カーソル：手; } #right {position：absolute;幅：101px;高さ：95px;背景：url（../ img/tencentimg/right.png）;ボーダー：1pxソリッド＃F2F2F2;表示：なし;カーソル：手; } #mousexposition {width：30px;高さ：20px;色：#ffffff;表示：インライン; } #mouseyposition {width：30px;高さ：20px;色：#ffffff;表示：インライン; } #divtop {width：30px;高さ：20px;色：#ffffff;表示：インライン; } </style> <script type = "text/javascript"> function init（）{var ml = document.body.clientwidth/2-40; document.getElementById（ "left"）。style.pixeltop = 300; document.getElementById（ "right"）。style.pixeltop= 300; document.getElementById（ "left"）。style.pixelleft= ml -101*4; document.getElementById（ "right"）。style.pixelleft= ml + 101*4; var tip = document.getElementById（ "TIP"）; var inith =（document.body.clientwidth -tip.offsetwidth）/2; document.getElementById（ "TIP"）。style.left = inith; document.getElementById（ "TIP"）。style.pixeltop = -362; } function mouseposition（ev）{if（ev.pagex || ev.pagey）{return {x：ev.pagex、y：ev.pagey}; } return {x：ev.clientx + document.body.scrollleft -document.body.clientleft、y：ev.clienty + document.body.scrolltop -document.body.clienttop}; } document.onmousemove = mousemove;関数mousemove（e）{e = e || window.event; var mousepos = mouseposition（e）; var mid = document.body.clientwidth/2; document.getElementById（ 'mousexposition'）。innerhtml = mousepos.x; document.getElementById（ 'mousePosition'）。innerhtml = mousepos.y; if（mousepos.x <mid）{document.getElementById（ "left"）。style.display= "block"; document.getElementById（ "right"）。style.display = "none"; } else if（mousepos.x> mid）{document.getElementById（ "right"）。style.display= "block"; document.getElementById（ "left"）。style.display = "none"; }} function show（）{if（document.getElementById（ "Tip"）。style.pixeltop<80）{document.getElementById（ "tip"）。style.pixeltop += 20; document.getElementById（ "divtop"）。innerhtml = document.getElementById（ "tip"）。style.pixeltop; setimeout（ "show（）"、10）}} function hid（）{if（document.getElementbyId（ "tip"）。pixeltop> -362）{document.getElementbyId（ "tip"）。style.pixeltop- = 20; document.getElementById（ "divtop"）。innerhtml = document.getElementById（ "tip"）。style.pixeltop; Settimeout（ "Hide（）"、10）}} </script> </head> <body onload = "init（）" init（） "left" onclick = "hide（）"> </div> <div div = "right" onclick = "show（）"> </div> <span style = "color：#fffffffff id = "mousexposition"> 0 </div> <br/> <span style = "color：#ffffff"> mouse y axis：</span> <div id = "mouseposition"> 0 </div> <br/> <span style = "color：#ffffff; font-size：13px;"> pictup：</span <div div div div = div div = "< "tip"> 0 </div> </body> </html>JavaScript関連のコンテンツの詳細については、このサイトのトピックをご覧ください：「JavaScriptの切り替え効果とテクニックの要約」、「JavaScript検索アルゴリズムスキルの要約」、「JavaScriptアニメーション効果とテクニックの概要」、「Javascriptエラー、および「Javascriptデータ構造」の概要」の概要の要約の要約をご覧ください。 JavaScriptトラバーサルアルゴリズムとテクニック」、および「JavaScriptの数学的操作の使用法の要約」
この記事がみんなのJavaScriptプログラミングに役立つことを願っています。