zoukankan      html  css  js  c++  java
  • 给博客添加Flash时钟

    依稀记得在cnblogs很多大牛的博客里见到过大牛的新闻公告栏里那种动感十足的Flash时钟控件,先上图:

     

    作为一名刚的接触博客菜鸟,自然免不了一番好奇。博客设置选项里翻来覆去找(以为是cnblogs自带的功能...),主题样式换了好几个,就是找不到带Flash样式的。不过倒是在设置里找到个“博客侧边栏公告”的东东,如图所示。

    想起刚上大学那会大家在网上搜免费的QQ空间主题js代码的经历,感觉突破口就是它了。稍稍问了一下度姑娘,还真找到了解决方案,总结如下:

    1、添加object标签

    既然说支持HTML代码,那灵活度就大了,找到这个酷炫的Flash时钟swf资源的URI,设定一下object的标签属性即可,上代码:

    1 <object width="200" height="75" data="https://files.cnblogs.com/arthurymn/honehone_clock_wh.swf" type="application/x-shockwave-flash">
    2   <param name="src" value="https://files.cnblogs.com/arthurymn/honehone_clock_wh.swf" />
    3 </object>

    只需要将data属性的值修改成你喜欢的Flash的URI即可,当然,width和height也需要根据页面的情况调整一下。这里有个比较人性化的地方,在博客的“管理-文件”页面,可以上传自己本地的Flash,然后这个swf文件将成为你的资源外链,再也不用担心自己挂的网络URI无效了之后出现个空白框框了。

    (这种方案似乎不能兼容所有浏览器,自己测试360极速和兼容模式,以及IE11下可以正常显示)

    2、embed标签

    <embed src="https://files.cnblogs.com/arthurymn/honehone_clock_wh.swf" />

     <embed> 标签是 HTML 5 中的新标签,当然也就只能在支持HTML5的浏览器下正常显示了。一般使用如下写法:

    (参考:http://www.cnblogs.com/wenyang-rio/archive/2013/01/05/2845973.html)

    <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="160" height="70" id="honehoneclock" align="middle"><param name="allowScriptAccess" value="always"><param name="movie" value="http://chabudai.sakura.ne.jp/blogparts/honehoneclock/honehone_clock_wh.swf"><param name="quality" value="high"><param name="bgcolor" value="#ffffff"><param name="wmode" value="transparent"><embed wmode="transparent" src="http://chabudai.sakura.ne.jp/blogparts/honehoneclock/honehone_clock_wh.swf" quality="high" bgcolor="#ffffff" width="160" height="70" name="honehoneclock" align="middle" allowscriptaccess="always" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer"></object>

    这个方案里头object中嵌套着一个embed标签,确实提高了代码对各类浏览器的兼容性,自己保存成.html文件在自己本本的所有浏览器上试了一下,都可以正常显示,可谓是绝佳方案,绝非吾等菜鸟写出来的网页代码。然而一个奇怪的事情发生了,修改完毕之后点击保存,进入“我的博客”看效果,竟然没出来!!!再回去设置里,发现<embed/>里的代码消失了,又多试了几次,效果一样,看来cnblogs不大待见embed啊,提交不上去啊,bug了有木有......于是乎第3种方案!

    3、js动态写入HTML代码

    <script type="text/javascript">
    var swfTitle = "honehoneclock";
    var sUrl = "https://files.cnblogs.com/arthurymn/honehone_clock_wh.swf";
    var sHtml = "";
    sHtml += '<object width="200" height="75" data="https://files.cnblogs.com/arthurymn/honehone_clock_wh.swf" type="application/x-shockwave-flash">';
    sHtml += '<param name="src" value="https://files.cnblogs.com/arthurymn/honehone_clock_wh.swf" />';
    sHtml += '<embed wmode="transparent" src="' + sUrl + '" quality="high" bgcolor="#ffffff" width="160" height="70" name="' + swfTitle + '" align="middle" allowScriptAccess="always" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />';
    sHtml += '</object>';
    document.write(sHtml);
    </script>

    这样,不论是object标签还是embed标签,document.write之前都是当做字符串处理的,点击设置里的“保存”按钮,再返回“我的博客”,顺利成功显示!

    (注:在让js生效之前,需要向“博客园团队”发送消息,申请js权限才能使用,本人昨晚抱着试试的态度,发了条信息,说想申请js,今天果断通过申请了,cnblogs一如既往的高效啊,向高效率精神致敬!)

     纯业余整理,若有解释不当之处,欢迎指正:)

  • 相关阅读:
    Python: 编程遇到的一些问题以及网上解决办法?
    Python: Win7下使用 pip install lxml 无法安装lxml?
    Python:Pycharm下无法导入安装好的第三方模块?
    Python:如何删除文件中的空白行?
    Pycharm 快捷键
    Python读取二进制文件
    python实现grep
    Python学习笔记
    VBA批量查找和复制文件
    %~dp0是什么意思
  • 原文地址:https://www.cnblogs.com/arthurymn/p/3813933.html
Copyright © 2011-2022 走看看