wordpress 摇一摇实现随机文章

这里主要用到一个 js脚本shake.js 在手机浏览器 晃动手机可实现显示随机文章。

shake.js脚本

<code>
/*
 *
 * Find more about this plugin by visiting
 * http://alxgbsn.co.uk/
 *
 * Copyright (c) 2010-2012 Alex Gibson
 * Released under MIT license
 *
 */

(function (window, document) {

    function Shake() {

        //feature detect
        this.hasDeviceMotion = 'ondevicemotion' in window;

        //default velocity threshold for shake to register
        this.threshold = 15;

        //use date to prevent multiple shakes firing
        this.lastTime = new Date();

        //accelerometer values
        this.lastX = null;
        this.lastY = null;
        this.lastZ = null;

        //create custom event
        if (typeof document.CustomEvent === "function") {
            this.event = new document.CustomEvent('shake', {
                bubbles: true,
                cancelable: true
            });
        } else if (typeof document.createEvent === "function") {
            this.event = document.createEvent('Event');
            this.event.initEvent('shake', true, true);
        } else { 
          return false;
        }
    }

    //reset timer values
    Shake.prototype.reset = function () {
        this.lastTime = new Date();
        this.lastX = null;
        this.lastY = null;
        this.lastZ = null;
    };

    //start listening for devicemotion
    Shake.prototype.start = function () {
        this.reset();
        if (this.hasDeviceMotion) { window.addEventListener('devicemotion', this, false); }
    };

    //stop listening for devicemotion
    Shake.prototype.stop = function () {

        if (this.hasDeviceMotion) { window.removeEventListener('devicemotion', this, false); }
        this.reset();
    };

    //calculates if shake did occur
    Shake.prototype.devicemotion = function (e) {

        var current = e.accelerationIncludingGravity,
            currentTime,
            timeDifference,
            deltaX = 0,
            deltaY = 0,
            deltaZ = 0;

        if ((this.lastX === null) && (this.lastY === null) && (this.lastZ === null)) {
            this.lastX = current.x;
            this.lastY = current.y;
            this.lastZ = current.z;
            return;
        }

        deltaX = Math.abs(this.lastX - current.x);
        deltaY = Math.abs(this.lastY - current.y);
        deltaZ = Math.abs(this.lastZ - current.z);

        if (((deltaX > this.threshold) && (deltaY > this.threshold)) || ((deltaX > this.threshold) && (deltaZ > this.threshold)) || ((deltaY > this.threshold) && (deltaZ > this.threshold))) {
            //calculate time in milliseconds since last shake registered
            currentTime = new Date();
            timeDifference = currentTime.getTime() - this.lastTime.getTime();

            if (timeDifference > 1000) {
                window.dispatchEvent(this.event);
                this.lastTime = new Date();
            }
        }

        this.lastX = current.x;
        this.lastY = current.y;
        this.lastZ = current.z;

    };

    //event handler
    Shake.prototype.handleEvent = function (e) {

        if (typeof (this[e.type]) === 'function') {
            return this[e.type](e);
        }
    };

    //create a new instance of shake.js.
    var myShakeEvent = new Shake();
    myShakeEvent && myShakeEvent.start();

}(window, document));
</code>

添加“摇一摇”事件监听

<code>
window.addEventListener('shake', shakeEventDidOccur, false);

//function to call when shake occurs
function shakeEventDidOccur () {

    //put your own code here etc.
    if (confirm("Undo?")) {

    }
}</code>

取消监听

<code>
window.removeEventListener('shake', shakeEventDidOccur, false);</code>

随机文章实现方式

JS代码,当然在这之前需要进入shake.js脚本

<code>
window.addEventListener('shake', shakeEventDidOccur, false);

//function to call when shake occurs
function shakeEventDidOccur () {

    jQuery.post(Bigfa.ajaxurl, {
                action : 'random_post',
                }, function(data) {
                    window.location.href = data;
            });
}</code>

下面的代码扔到functions.php中,如果你已经添加了上一篇随机文章的代码这里就不需要

<code>
wp_enqueue_script( 'key', true);
wp_localize_script('key', 'Bigfa', array(
     "ajaxurl" => admin_url('admin-ajax.php')
));
add_action( 'wp_ajax_random_post', 'bigfa_random_post' );
add_action( 'wp_ajax_nopriv_random_post', 'bigfa_random_post' );
function bigfa_random_post() {
    $posts = get_posts('post_type=post&orderby=rand&numberposts=1');
    foreach($posts as $post) {
        $link = get_permalink($post);
    }
    echo $link;
    exit;
}</code>

浏览器和设备支持情况

  • iOS Safari 4.2.1 (and above)
  • Android 4.0.3 (default browser)
  • Opera Mobile (Android)
  • BlackBerry PlayBook 2.0
  • Firefox for Android
  • FirefoxOS Devices

文章转自 大发 http://fatesinger.com/random-post-botton.html

0 thoughts on “wordpress 摇一摇实现随机文章
添加一条新回复 回到顶部

亲爱的,主人已经关闭了这篇文章的评论 。