手机摇一摇效果基于html5方向感应DeviceOrientation,它将底层的方向和运动传感器进行了高级封装,轻松的实现重力感应、指南针等有趣的功能。今天我们以实例展示THINKPHP3.2.3实现手机摇一摇随机推荐文章效果。
可手机或微信访问www.gouugoyin.cn首页,用手机摇一摇,即可在右侧看到摇一摇随机推荐效果。
首先在需要摇一摇的模板页引入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('shake', shakeEventDidOccur, false); <br />
<br />
function shakeEventDidOccur () { <br />
var url = "{:U('home/article/get_rand_list')}";<br />
$.post(url , { num:10,order:'rand()' }, function(data){<br />
if(data.status == 'ok'){<br />
$(".js_shadeBox ul").append(data.html);<br />
}else{<br />
alert(data.msg);<br />
}<br />
}, 'json').error(function(){<br />
alert('网络错误,请稍后再试');<br />
});<br />
} <br />
});<br />
</script>
服务器根据提交的请求参数生成随机文章列表数组并循环拼接好的html代码片段,我们将返回html片段追加到ul里,实现了摇一摇随机推荐的效果。
PS:为方便大家使用,特将所有涉及的代码和数据库打包上传,下载地址:http://www.gouguoyin.cn/php/62.html
AD:真正免费,域名+虚机+企业邮箱=0元

熱AI工具

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

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

Undress AI Tool
免費脫衣圖片

Clothoff.io
AI脫衣器

AI Hentai Generator
免費產生 AI 無盡。

熱門文章

熱工具

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

記事本++7.3.1
好用且免費的程式碼編輯器

WebStorm Mac版
好用的JavaScript開發工具

Dreamweaver Mac版
視覺化網頁開發工具

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