В этой статье описывается эффект того, что JS имитирует кнопку поворота страницы изображения на картинной станции Tencent. Поделитесь этим для вашей ссылки, следующим образом:
Скриншот экрана бега выглядит следующим образом:
Конкретный код заключается в следующем:
<! Doctype html public "-// w3c // dtd html 4.01 // en" "http://www.w3.org/tr/html4/strict.dtd"> <html> <Head> <meta http-equiv = "content-type" content = "text/html; Tencent Picture Flip </title> <style type = "text/css"> *{margin: none; Надо: нет; } body {founale:#000000; } #tip {position: Absolute; Ширина: 564px; Высота: 362px; Верх: -362px; Фон: url (../ img/tencentimg/tiplayer.png); } #left {position: Absolute; Ширина: 101px; Высота: 95px; Фон: url (../ img/tencentimg/left.png); Граница: 1px sold #f2f2f2; дисплей: нет; курсор: рука; } #right {position: Absolute; Ширина: 101px; Высота: 95px; Предпосылки: URL (../ img/tencentimg/right.png); Граница: 1px sold #f2f2f2; дисплей: нет; курсор: рука; } #mousexposition {width: 30px; Высота: 20px; Цвет: #ffffff; дисплей: inline; } #mouseyposition {width: 30px; Высота: 20px; Цвет: #ffffff; дисплей: inline; } #divtop {width: 30px; Высота: 20px; Цвет: #ffffff; дисплей: inline; } </style> <script type = "text/javascript"> function init () {var ml = document.body.clientwidth/2 - 40; document.getElementbyId ("слева"). Style.pixeltop = 300; document.getElementbyId ("right"). style.pixeltop = 300; document.getElementbyId ("слева"). 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 mouseSosition (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 mouseepos = mouseposition (e); var mid = document.body.clientwidth/2; document.getElementbyId ('mousexposition'). innerhtml = mousepos.x; document.getElementById ('MouseyPosition'). 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 ("слева"). 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; setTimeout ("show ()", 10)}} function hide () {if (document.getElementById ("tip"). Style.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 ()"> <div id = "Left" onclick = "hide ()"> </div> <div id = "справа" onclick = "show ()"> </div> <span style = color: #ffff id = "mousexposition"> 0 </div> <br/> <span style = "color: #ffffff"> ось y мыши: </span> <div id = "mouseyposition"> 0 </div> <br/> <span style = "color: #fffff; «Совет»> 0 </div> </body> </html>For more information about JavaScript related content, please check out the topics of this site: "Summary of JavaScript switching effects and techniques", "Summary of JavaScript search algorithm skills", "Summary of JavaScript animation effects and techniques", "Summary of JavaScript errors and debugging techniques", "Summary of JavaScript data structures and algorithm skills", "Summary of Алгоритмы и методы обхода JavaScript »и« Сводка использования математических операций JavaScript ».
Я надеюсь, что эта статья будет полезна для каждого программирования JavaScript.