php拖曳式顯示遍歷資料庫資訊
阿新 • • 發佈：2020-01-29
博主在完成自己的畢業設計時，需要在鼎食城畢業設計的前端介面顯示一下菜品詳情，yu’shi 便採用Html5與JavaScript以及PHP連線資料庫遍歷出來：
以下是展示圖片:
<html> <head> <title>拖拽翻頁效果JavaScript特效</title> <style type="text/css"> html,body{ width:100%; height:100%; border:0px; margin:0px; overflow:hidden; } #menu{ width:100%; height:100%; overflow:hidden; background:lightblue; } .page{ position:absolute; width:300px; height:550px; left:350px; top:50px; background:#FFF; border:1px solid #999; } ul{ list-style:none; height:320px; margin:20px; padding:0px; background:#EEE; } li{ font-size:12px; height:20px; line-height:20px; border-bottom:1px dashed #999; } li span{ float:right; } li a{ color:#000; text-decoration:none; } li a:hover{ text-decoration:underline; } .tip{ display:block; height:20px; margin:0px 20px; line-height:20px; text-align:center; font-size:12px; background:#999; } ::-webkit-scrollbar{display: none;} </style> </head> <body> <script type="text/javascript"> function id(obj){ return document.getElementById(obj); } var page; var mx; var md=false; var sh=0; var en=false; window.onload=function(){ page=id("menu").getElementsByTagName("div"); if(page.length>0){ page[0].style.zIndex=2; } for(i=0;i<page.length;i++){ page[i].innerHTML+="<span class=\"tip\">"+(i+1)+"/"+page.length+"頁 拖拽翻頁</span>"; page[i].id="page"+i; page[i].i=i; page[i].onmousedown=function(e){ if(!en){ if(!e){e=e||window.event;} ex=e.pageX?e.pageX:e.x; mx=350-ex; this.style.cursor="move"; md=true; if(document.all){ this.setCapture(); }else{ window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP); } } } page[i].onmousemove=function(e){ if(md){ en=true; if(!e){e=e||window.event;} ex=e.pageX?e.pageX:e.x; this.style.left=ex+mx+"px"; if(this.offsetLeft<350){ var cu=(this.i==0)?page.length-1:this.i-1; page[sh].style.zIndex=0; page[cu].style.zIndex=1; this.style.zIndex=2; sh=cu; } if(this.offsetLeft>350){ var cu=(this.i==page.length-1)?0:this.i+1; page[sh].style.zIndex=0; page[cu].style.zIndex=1; this.style.zIndex=2; sh=cu; } } } page[i].onmouseup=function(){ this.style.cursor="default"; md=false; if(this.offsetLeft==350){ en=false; } if(document.all){ this.releaseCapture(); }else{ window.releaseEvents(Event.MOUSEMOVE|Event.MOUSEUP); } flyout(this); } } } function flyout(obj){ if(obj.offsetLeft < 350){ if( (obj.offsetLeft - 10) > 50 ){ obj.style.left=obj.offsetLeft - 10 + "px"; window.setTimeout("flyout(id('"+obj.id+"'));",0); }else{ obj.style.left= 50 +"px"; obj.style.zIndex=0; flyin(id(obj.id)); } } if(obj.offsetLeft > 350){ if((obj.offsetLeft + 10) < 650){ obj.style.left=obj.offsetLeft + 10 + "px"; window.setTimeout("flyout(id('"+obj.id+"'));",0); }else{ obj.style.left= 650 + "px"; obj.style.zIndex=0; flyin(id(obj.id)); } } } function flyin(obj){ if(obj.offsetLeft<350){ if((obj.offsetLeft + 10) < 350){ obj.style.left=obj.offsetLeft + 10+"px"; window.setTimeout("flyin(id('"+obj.id+"'));",0); }else{ obj.style.left= 350 +"px"; en=false; } } if(obj.offsetLeft>350){ if((obj.offsetLeft - 10) > 350){ obj.style.left=obj.offsetLeft - 10 +"px"; window.setTimeout("flyin(id('"+obj.id+"'));",0); }else{ obj.style.left=350+"px"; en=false; } } } </script> <div id="menu"> <?php require 'conn.php'; $result2 = mysql_query("SELECT * FROM menu "); while($row=mysql_fetch_array($result2)){ ?> <center> <div class="page"> <table style="width:280px;height:680px" align="center"> <br><img src="<?=$row['adress']?>" style="width:260px;height:260px" readonly/><br> <?=$row['name']?> 單價:<?=$row['price']?>元<br> <textarea style="width:260px;height:200px;border:0px" readonly="readonly"><?=$row['description']?></textarea><br> </table> </div> <?php } ?> </div> </center> </body> </html> ```碼字不易，給個讚唄!