JSFiddle - React, Tailwind, and code Playground

by happy Wang

HTML

<div id="flw" class="ad">
    <iframe style="position:absolute;z-index:-1;left:0;top:0;background-color: transparent;" frameborder="0" width="100%" height="100%" src="about:blank"></iframe><a href="http://www.baidu.com/"><img src="http://www.shuizhongyueming.com/wp-content/uploads/2015/01/screen-icon1.png" alt=""></a>
</div>

CSS

.ad {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100px;
    height: 90px;
    z-index: 1000;
}
.ad img {
    display: block;
    width: 100px;
    height: 90px;
    margin: 0;
    padding: 0;
    border: medium none;
}

JavaScript

/* requestAnimationFrame.js
 * by zhangxinxu 2013-09-30
 */ (function () {
    var lastTime = 0;
    var vendors = ['webkit', 'moz', 'ms'];
    for (var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
        window.requestAnimationFrame = window[vendors[x] + 'RequestAnimationFrame'];
        window.cancelAnimationFrame = window[vendors[x] + 'CancelAnimationFrame'] || window[vendors[x] + 'CancelAnimationFrame'] || window[vendors[x] + 'CancelRequestAnimationFrame'];
    }

    if (!window.requestAnimationFrame) {
        window.requestAnimationFrame = function (callback, element) {
            var currTime = new Date().getTime();
            var timeToCall = Math.max(0, 16.7 - (currTime - lastTime));
            var id = window.setTimeout(function () {
                callback(currTime + timeToCall);
            }, timeToCall);
            lastTime = currTime + timeToCall;
            return id;
        };
    }
    if (!window.cancelAnimationFrame) {
        window.cancelAnimationFrame = function (id) {
            clearTimeout(id);
        };
    }
}());
var x = 0,
    y = 0,
    step = 2,
    xin = true,
    yin = true,
    doc = document,
    domBody = doc.body,
    domDoc = document.documentElement,
    domFlw = doc.getElementById('flw'),
    domFlwWidth = domFlw.offsetWidth,
    domFlwHeight = domFlw.offsetHeight;

var L = 0;
var T = 0; //L左边界，T上边界


(function flwAd() {
    requestAnimationFrame(flwAd);

    // 需要考虑窗口变化的情况，所以没缓存，也可以缓存，然后注册window 的resize事件
    var R = domDoc.clientWidth - domFlwWidth;
    var B = domDoc.clientHeight - domFlwHeight;

    domFlw.style.left = x + domBody.scrollLeft + 'px'; //层显示的左边距 随着滚动条而滚动
    domFlw.style.top = y + domBody.scrollTop + 'px'; //层显示的上边距

    // console.log(x, L, R);
    // console.log(y, T, B);

    x = x + step * (xin ? 1 : -1); //判断


    if (x < L) {
        xin = true;
        x = L;
    }
    if (x > R) {
        xin = false;
        x = R;
    }
    y = y + step * (yin ? 1 : -1);
    if...