JS异步跨域加载实现一言(ヒトコト)轮播的脚本

html部分

<span id="hitokoto"></span>

Javascript部分

// 加载一言的容器。我懒,所以直接用了 document.write
document.write('<div id="hitokotojs"></div>');
// 指定用于显示的元素
var hkField = document.getElementById("hitokoto");
// 指定加载容器
var hkCache = document.getElementById("hitokotojs");
// 等待时间,按毫秒计算
var waitTime = 3500;
// 一个方向过渡用的帧数,每帧 1000 / 60 秒
var fadingFrames = 18;
// 控制动画状态的 Flags
var isAnim = false;
var isFadeout = false;
var isLoaded = false;
var animProgress = 0;
var i = 0;
// 逐帧动画控制
hkAnim = function() {
// 当前进度步进
animProgress++;
curAlphaStep = animProgress / fadingFrames;
curAlpha = isFadeout ? (1 - curAlphaStep) : curAlphaStep;
// 设置元素透明度
hkField.style.filter = "alpha(opacity=" + Math.round(curAlpha * 100) + ")";
hkField.style.opacity = curAlpha;
// 如果一部分动画结束
if (animProgress >= fadingFrames) {
// 如果是刚刚淡出
if (isFadeout) {
// 准备加载下一条内容
hkAnimNext()
} else {
// 否则等待若干时间后进行下一组动画
setTimeout("hkAnimPre()", waitTime)
}
} else {
window.requestAnimationFrame(hkAnim)
}
}
// 加载一言内容,将返回 retrieveHitokoto(xxxxxx) 指令
hkAnimNext = function() {
isLoaded = false;
var hkLoader = document.createElement('script');
hkLoader.setAttribute('id', 'hkLoader');
hkLoader.setAttribute('src', 'http://api.hitokoto.us/rand?encode=jsc&fun=retrieveHitokoto');
hkCache.appendChild(hkLoader)
setTimeout("checkLoaded()", (waitTime / 2));
}
// 取回内容
retrieveHitokoto = function(result) {
isLoaded = true;
var retrieved = eval(result);
isFadeout = false;
animProgress = 0;
hkField.innerHTML = retrieved.hitokoto;
hkCache.removeChild(document.getElementById("hkLoader"));
hkAnim()
}
// 容错处理
checkLoaded = function() {
if(!isLoaded) {
hkCache.removeChild(document.getElementById("hkLoader"));
hkAnimNext();
}
}
// 准备下一轮内容的展示
hkAnimPre = function() {
isFadeout = true;
animProgress = 0;
window.requestAnimationFrame(hkAnim)
}
// 开始首次加载
hkAnimNext();

script by tcdw

 【灰色的迷宫】【全程剧透式吐槽】
【说说动漫】【Re:从零开始的异世界生活】 
上一篇:【灰色的迷宫】【全程剧透式吐槽】
下一篇:【说说动漫】【Re:从零开始的异世界生活】


仅有一条评论


  1. 刚大木
    刚大木

    哈哈

     Reply

如果我的文章对你有帮助,或许可以打赏一下呀!

支付宝
微信
QQ