تصف هذه المقالة تأثير JS تقليد زر تشغيل صفحة الصورة لمحطة صور Tencent. شاركه للرجوع إليه ، على النحو التالي:
لقطة شاشة تأثير الجري كما يلي:
الرمز المحدد كما يلي:
<! doctype html public "-// w3c // dtd html 4.01 // en" "http://www.w3.org/tr/html4/strict.dtd Tencent Picture Flip </itlem> <style type = "text/css"> *{margin: none ؛ الحشو: لا شيء ؛ } body {background:#000000 ؛ } #tip {الموضع: absolute ؛ العرض: 564px ؛ الارتفاع: 362 بكسل ؛ أعلى: -362px ؛ الخلفية: url (../ img/tencentimg/tiplayer.png) ؛ } #LEFT {الموضع: absolute ؛ العرض: 101px ؛ الارتفاع: 95 بكسل ؛ الخلفية: url (../ img/tencentimg/left.png) ؛ الحدود: 1px الصلبة #f2f2f2 ؛ العرض: لا شيء ؛ المؤشر: اليد. } #right {الموضع: absolute ؛ العرض: 101px ؛ الارتفاع: 95 بكسل ؛ الخلفية: url (../ img/tencentimg/right.png) ؛ الحدود: 1px الصلبة #f2f2f2 ؛ العرض: لا شيء ؛ المؤشر: اليد. } #mousexposition {width: 30px ؛ الارتفاع: 20 بكسل ؛ اللون: #ffffff ؛ العرض: مضمّن ؛ } #MousePosition {width: 30px ؛ الارتفاع: 20 بكسل ؛ اللون: #ffffff ؛ العرض: مضمّن ؛ } #divtop {width: 30px ؛ الارتفاع: 20 بكسل ؛ اللون: #ffffff ؛ العرض: مضمّن ؛ } </style> <script type = "text/javaScript"> function init () {var ml = document.body.clientwidth/2 - 40 ؛ document.getElementById ("Left"). style.pixeltop = 300 ؛ document.getElementById ("يمين"). style.pixeltop = 300 ؛ document.getElementById ("Left"). style.pixelleft = ml - 101*4 ؛ document.getElementById ("يمين"). 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 ؛ } وظيفة 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" ؛ } آخر إذا (mousepos.x> mid) {document.getElementById ("right"). style.display = "block" ؛ document.getElementById ("Left"). style.display = "none" ؛ }} وظيفة show () {if (document.getElementById ("tip"). style.pixeltop <80) {document.getElementById ("tip"). style.pixeltop += 20 ؛ document.getElementById ("divtop"). innerhtml = document.getElementById ("tip"). style.pixeltop ؛ setTimeOut ("show ()" ، 10)}} دالة Hide () {if (document.getElementById ("tip"). style.pixeltop> -362) {document.getElementById ("tip"). style.pixelt -= 20 ؛ document.getElementById ("divtop"). innerhtml = document.getElementById ("tip"). style.pixeltop ؛ setTimeOut ("Hide () ، 10)}}} </script> </head> <body onload =" init () "> <div id =" left "onClick =" Hide () "> </viv> <div id =" right "onClick =" show () "</div> <span style =" color: #fffff ؛ id = "mousexposition"> 0 </viv> <br/> <span style = "color: #ffffff"> mouse y axis: </span> <div id = "mouseposition"> 0 </viv> <br/> <span style = "color: #ffffff ؛ font-size: 13px ؛ "tip"> 0 </viv> </body> </html>لمزيد من المعلومات حول المحتوى المتعلق بـ javaScript ، يرجى مراجعة موضوعات هذا الموقع: "ملخص لتأثيرات وتقنيات تبديل JavaScript" ، "ملخص لمهارات خوارزمية بحث JavaScript" ، "ملخص لتأثيرات الرسوم المتحركة JavaScript و Techniques و" ملخص ". خوارزميات وتقنيات JavaScript Traversal "، و" ملخص استخدام العمليات الرياضية JavaScript "
آمل أن تكون هذه المقالة مفيدة لبرمجة JavaScript للجميع.