搜尋
首頁php教程php手册ThinkPHP3.2.3实现手机摇一摇随机推荐文章效果

手机摇一摇效果基于html5方向感应DeviceOrientation,它将底层的方向和运动传感器进行了高级封装,轻松的实现重力感应、指南针等有趣的功能。今天我们以实例展示THINKPHP3.2.3实现手机摇一摇随机推荐文章效果。
可手机或微信访问www.gouugoyin.cn首页,用手机摇一摇,即可在右侧看到摇一摇随机推荐效果。
ThinkPHP3.2.3实现手机摇一摇随机推荐文章效果
首先在需要摇一摇的模板页引入jquery.js和检测手机摇晃的shade.js,HTML结构如下:<script></script><br> <script></script><br> <div> <br>     <h4> <br>        摇一摇随机推荐<br>     </h4> <br>     <ul> <br>  <br>     </ul> <br> </div>然后使用shake.js检测到用户手机摇晃,当摇晃发生时调用函数shakeEventDidOccur(),向服务器发送Ajax请求,JS代码如下:<script><br /> $(function(){<br /> var myShakeEvent = new Shake({ <br /> threshold: 15 <br /> }); <br /> <br /> myShakeEvent.start(); <br /> <br /> window.addEventListener(&#039;shake&#039;, shakeEventDidOccur, false); <br /> <br /> function shakeEventDidOccur () { <br /> var url = "{:U(&#039;home/article/get_rand_list&#039;)}";<br /> $.post(url , { num:10,order:&#039;rand()&#039; }, function(data){<br /> if(data.status == &#039;ok&#039;){<br /> $(".js_shadeBox ul").append(data.html);<br /> }else{<br /> alert(data.msg);<br /> }<br /> }, &#039;json&#039;).error(function(){<br /> alert(&#039;网络错误,请稍后再试&#039;);<br /> });<br /> } <br /> });<br /> </script>服务器根据提交的请求参数生成随机文章列表数组并循环拼接好的html代码片段,我们将返回html片段追加到ul里,实现了摇一摇随机推荐的效果。
PS:为方便大家使用,特将所有涉及的代码和数据库打包上传,下载地址:http://www.gouguoyin.cn/php/62.html

AD:真正免费,域名+虚机+企业邮箱=0元

陳述
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

AI Hentai Generator

AI Hentai Generator

免費產生 AI 無盡。

熱門文章

R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
1 個月前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳圖形設置
1 個月前By尊渡假赌尊渡假赌尊渡假赌
威爾R.E.P.O.有交叉遊戲嗎?
1 個月前By尊渡假赌尊渡假赌尊渡假赌

熱工具

MinGW - Minimalist GNU for Windows

MinGW - Minimalist GNU for Windows

這個專案正在遷移到osdn.net/projects/mingw的過程中,你可以繼續在那裡關注我們。 MinGW:GNU編譯器集合(GCC)的本機Windows移植版本,可自由分發的導入函式庫和用於建置本機Windows應用程式的頭檔;包括對MSVC執行時間的擴展,以支援C99功能。 MinGW的所有軟體都可以在64位元Windows平台上運作。

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

WebStorm Mac版

WebStorm Mac版

好用的JavaScript開發工具

Dreamweaver Mac版

Dreamweaver Mac版

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)