null

前段时间在张戈博客找教程的时候,偶然发现他的博客about页面有个时间轴,我觉得挺好玩的,就F12扒了一下,结果死活弄不出同样的效果,打算放弃,寻找别的脚本。一番搜索,居然在在站长之家的素材库里发现了这个时间轴的完整代码,好了,具体怎么折腾的我就不写了,直接放上我正在使用的代码,我是不会告诉你,我做这个时间轴前前后后花了将近半天时间。

iframe

//在指定页面调用html<iframe id="mainFrame" name="mainFrame" scrolling="no" src="http://eveaz.com/timeline/" frameborder="0" style="padding: 0px; width: 100%; height: 1000px;"></iframe>

js

//指定iframe元素自适应调用页面高度startInit('mainFrame', 160);var browserVersion = window.navigator.userAgent.toUpperCase();var isOpera = browserVersion.indexOf("OPERA") > -1 ? true : false;var isFireFox = browserVersion.indexOf("FIREFOX") > -1 ? true : false;var isChrome = browserVersion.indexOf("CHROME") > -1 ? true : false;var isSafari = browserVersion.indexOf("SAFARI") > -1 ? true : false;var isIE = (!!window.ActiveXObject || "ActiveXObject" in window);var isIE9More = (! -[1, ] == false);function reinitIframe(iframeId, minHeight) { try { var iframe = document.getElementById(iframeId); var bHeight = 0; if (isChrome == false && isSafari == false) bHeight = iframe.contentWindow.document.body.scrollHeight; var dHeight = 0; if (isFireFox == true) dHeight = iframe.contentWindow.document.documentElement.offsetHeight + 2; else if (isIE == false && isOpera == false) dHeight = iframe.contentWindow.document.documentElement.scrollHeight; else if (isIE == true && isIE9More) {//ie9+ var heightDeviation = bHeight - eval("window.IE9MoreRealHeight" + iframeId); if (heightDeviation == 0) { bHeight += 3; } else if (heightDeviation != 3) { eval("window.IE9MoreRealHeight" + iframeId + "=" + bHeight); bHeight += 3; } } else//ie[6-8]、OPERA bHeight += 3; var height = Math.max(bHeight, dHeight); if (height < minHeight) height = minHeight; iframe.style.height = height + "px"; } catch (ex) { }}function startInit(iframeId, minHeight) { eval("window.IE9MoreRealHeight" + iframeId + "=0"); window.setInterval("reinitIframe('" + iframeId + "'," + minHeight + ")", 100);}

识别手机并跳转到指定页面

//手机访问iframe调用页面自动跳转到主页if( /Android|webOS|iPhone|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {window.location = "http://eveaz.com/"; //这里改地址}

不足

1、iframe宽度未能够自适应
2、需要在FTP里手动修改子页面的日志记录(不知是否有大神帮忙设计一套后台,可以在后台直接编辑?)
3、展开折叠的时候导致子页面下方元素像跳帧一样,一卡一卡的。

源码出处:站长素材
演示地址:我的博客折腾记录

13 thoughts on “给博客添加了一个时间轴

  1. 尹先生说道:

    让他自动点开呀,这样多方便

    1. 小五说道:

      @尹先生 将就这样吧,js我看不懂~

  2. nyun说道:

    功能很好,就是觉得有点太花哨了!

    1. 小五说道:

      @nyun 现在怎么样?

      1. nyun说道:

        @小五 去掉满屏的动画特效后,立马觉得高大上了不少,不错了~我的审美也就到此了~

  3. 灰狼说道:

    说好的不折腾呢?

    1. 小五说道:

      @灰狼 额~这个弄好了就不弄了~maybe

  4. 我说说道:

    好萌啊 23333

    1. 小五说道:

      @我说 what for what?

  5. sys说道:

    http://eveaz.com/timeline/ 没看到效果啊 撤下了?

    1. 小五说道:

      @sys 文章底部有演示地址的:http://eveaz.com/history

  6. PHP学习博客说道:

    看起来很酷炫的说

    1. 小五说道:

      @PHP学习博客 嗯哼,我也是觉得好看才弄的~

发表评论

电子邮件地址不会被公开。 必填项已用*标注