Life Studio » JS http://wange.im My Life, My Studio... Fri, 20 Jan 2012 01:49:17 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 WordPress 将选中文字转发到微博 http://wange.im/wordpress-share-selected-text-to-weibo.html http://wange.im/wordpress-share-selected-text-to-weibo.html#comments Sat, 29 Oct 2011 23:19:45 +0000 万戈 http://wange.im/?p=5152 最近在看腾讯新闻的时候，无意中发现，当我选中新闻中的文字的时候，鼠标右上角会显示一个“转播至微博”的按钮，点击后就会将选中的文字转发到微博上。这是一个很不错的用户体验，如果能把它引入到 WordPress 博客中，那不是很好吗？

为此我还特地去注册了一个腾讯微博开放平台的开发者，当我开始阅读开发文档的时候，才发现，他妹的，腾讯官方已经推出一个相同功能的应用，叫作 “Q-Share”，再翻阅了一下其他资料，原来已经有前辈写出了 js 页面文字选中后分享到新浪微博的方法，那我就省力多了，两者结合一下，把新浪微博和腾讯微博两个按钮都加上了，然后闲的蛋疼的我又把它翻译成了 jQuery 的方法。

效果的话就可以看本站了，选中任何文字，就会在右上角显示两个微博按钮，点击试试吧。

实现的方法也很简单，只需要两步：

1、引入 jQuery，相信大多数 WordPress 博客都已经引入了 jQuery，那就可以直接进行第二步了。

2、在页面底部，或者更确切的说，在引入 jQuery 库的后面加上这样一段 JS，你就可以看到和本站一样的效果了。

var miniBlogShare = function() {
    //指定位置驻入节点
    $('<img id="imgSinaShare" class="img_share" title="将选中内容分享到新浪微博" src="http://wange.im/wp-content/themes/wange/images/sina_share.gif" /><img id="imgQqShare" class="img_share" title="将选中内容分享到腾讯微博" src="http://wange.im/wp-content/themes/wange/images/tt_share.png" />').appendTo('body');
   
    //默认样式
    $('.img_share').css({
        display : 'none',
        position : 'absolute',
        cursor : 'pointer'
    });
   
    //选中文字
    var funGetSelectTxt = function() {
        var txt = '';
        if(document.selection) {
            txt = document.selection.createRange().text;
        } else {
            txt = document.getSelection();
        }
        return txt.toString();
    };
   
    //选中文字后显示微博图标
    $('html,body').mouseup(function(e) {
        if (e.target.id == 'imgSinaShare' || e.target.id == 'imgQqShare') {
            return
        }
        e = e || window.event;
        var txt = funGetSelectTxt(),
            sh = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0,
            left = (e.clientX - 40 < 0) ? e.clientX + 20 : e.clientX - 40,
            top = (e.clientY - 40 < 0) ? e.clientY + sh + 20 : e.clientY + sh - 40;
        if (txt) {
            $('#imgSinaShare').css({
                display : 'inline',
                left : left,
                top : top
            });
            $('#imgQqShare').css({
                display : 'inline',
                left : left + 30,
                top : top
            });
        } else {
            $('#imgSinaShare').css('display', 'none');
            $('#imgQqShare').css('display', 'none');
        }
    });
   
    //点击新浪微博
    $('#imgSinaShare').click(function() {
        var txt = funGetSelectTxt(), title = $('title').html();
        if (txt) {
            window.open('http://v.t.sina.com.cn/share/share.php?title=' + txt + ' —— 转载自：' + title + '&url=' + window.location.href);
        }
    });
   
    //点击腾讯微博
    $('#imgQqShare').click(function() {
        var txt = funGetSelectTxt(), title = $('title').html();
        if (txt) {
            window.open('http://v.t.qq.com/share/share.php?title=' + encodeURIComponent(txt + ' —— 转载自：' + title) + '&url=' + window.location.href);
        }
    });
}();

是不是很简单呀？

赶紧选中本文的标题，在微博上通知你的好友来围观吧，哈哈~

PS：最后，说一句，其实这个方法不仅仅适用于 WordPress，JS 是通用的，你可以把这段 JS 挂载到任何网站上都可以得到相同的效果 :-)

PS2：最最最后，再说一句，麻烦各位在使用前，把 JS 里的两张微博的图片路径替换成自己的地址，因为小站流量有限，大家帮我省着点花呗，嘿嘿。

]]> http://wange.im/wordpress-share-selected-text-to-weibo.html/feed 116 jQuery/JavaScript 实现的异步加载图片 http://wange.im/jquery-js-ajax-pic.html http://wange.im/jquery-js-ajax-pic.html#comments Sun, 10 Apr 2011 12:55:34 +0000 万戈 http://wange.im/?p=4745 前天我亲奶滴偶像+室友+同事任平生小盆友在为我首页加载的速度上挑刺（YSlow V2下Grade A的我已经神一般的飞速了 O(∩_∩)O~），还真被他一眼挑出几个可以优化的细节之处，比如说首页文章列表页的展开后显示的缩略图，任平生GG 表示，这些图片完全可以不用事先加载，等用户点击展开之后才加载，不点击就不加载。这样一来，以我首页显示10篇文章列表为例，如果每篇缩略图6K左右，一个首页加载就节省了60K左右，何乐而不为呢？

任平生GG 用的是 jQuery 实现的图片异步加载，而我整理了一下，又折腾了一个 JavaScript 版的图片异步加载效果，两者原理是一样一样的，先请看 DEMO。

在上代码之前先说一下简单的原理，我们知道在 img 标签中的 src 属性是指向图片地址，要实现异步加载，就先暂时不给 src 属性赋值，而是先找个中间变量的属性 data-src，把图片地址写在 data-src 属性里，然后当触发 onclick 事件的时候，把 data-src 的值复制给 src，也就实现了异步加载。

代码时间到，因为无论是 jQuery 还是 JavaScript 的方法，HTML 的结构是相同的，如下：

<div id="box">
    <input type="submit" value="异步加载图片" id="submitBtn" />
    <div class="picBox">
        <img data-src="logo.png" alt="" class="logo" />
    </div>
</div>

先上 jQuery 的方法：

$(document).ready(function(){
    $('#submitBtn').click(function() {
        var imgSrc = $(this).next().find('.logo').attr('data-src');
        $(this).next().find('.logo').attr('src', imgSrc);
    });
});

再比较一下 JavaScript 的方法：

window.onload = function(){
    document.getElementById('submitBtn').onclick = submitBtn;
}
function submitBtn(){
    var imgTag = document.getElementById('box').getElementsByTagName('img');
    var imgSrc = imgTag[0].getAttribute('data-src');
    imgTag[0].setAttribute('src',imgSrc);
}

再来玩一下这个 DEMO，按照这个原理，发现自己写一个 lazyload 的 jQuery 插件也并不是很难嘛，哈哈～

]]> http://wange.im/jquery-js-ajax-pic.html/feed 121 WordPress 3.1 偷偷挂载 l10n.js 脚本！ http://wange.im/l10n-js-in-wordpress-3-1.html http://wange.im/l10n-js-in-wordpress-3-1.html#comments Thu, 24 Feb 2011 14:29:16 +0000 万戈 http://wange.im/?p=4571 最近因为龙体欠佳，很少有关注 WordPress 的最新动态，今天趁稍微恢复一点精神看了一下 WordPress 后台，居然有 WordPress 3.1 中文版可以升级了，作为与时俱进的升级控，对自己的主题向后兼容性是绝对有信心的，果断升级！

还没去 WordPress 官方了解过 3.1 版本到底是个什么样的东东，只是从第一眼来看，最明显的是多了一个工具条，和我的万戈牌工具条插件有异曲同工之处。但是再仔细一看，Wordpress 3.1 做了一件非常 YD + 恶心 + 无耻 + 卑鄙的事情！在给我的主题头部偷偷加上了一小段 JS！有图有真相：

虽说这段脚本不大，也才0.3K 左右，但是 WordPress 的这种做法是让人不能容忍的，凭什么呀凭什么呀，哥明明没在主题里允许你的存在，非要给我多加一段 JS，作为有代码洁癖的我，怎么能容许它的存在呢，除之而后快！

把以下这句函数放在 WordPress 主题的 functions.php 中就可以了：

wp_deregister_script( 'l10n' );

世界又清静了，如果你也升级到了 WordPress 3.1，那估计你的主题中也会多出那么一小段 JS，基本就是个累赘，没啥用，该删就删了吧~

]]> http://wange.im/l10n-js-in-wordpress-3-1.html/feed 186 最短最给力的 IE 版本判断脚本 http://wange.im/ietester-version.html http://wange.im/ietester-version.html#comments Sat, 19 Feb 2011 15:10:05 +0000 万戈 http://wange.im/?p=4559 随着 WEB 标准的发展，随着浏览器时代的推进，重构以及前端工作人员将会面临更多的挑战，而其中就要接受 IE 最严峻的挑战，一方面是因为 IE 的用户量还是无庸质疑的排行老大，另一方面 IE 每个版本都如同新生一般让人捉摸不定。在对网站进行开发时就不可避免地会用到 HACK 或者对各版本 IE 区别对待的特殊处理。

网上有过很多对 IE 版本进行判断的脚本，今天发现了一个最短、最给力、性价比最高的一段，甚至可以说是只有几行的脚本，可以对 IE 版本进行精确判断。当我看到这段脚本时，我震精了，眼中充满了泪花，征服 IE 指日可待了呀~

先来看看我写的一个 DEMO，建议使用 IE 进行测试，因为对 IE 以外的浏览器无法识别（经测试，IE 5 也是辨认不出来滴，不过我相信没有哪个火星人还在用 IE5 吧？）

见证完奇迹的时刻，我们再回头来看这段代码的核心部分：

var ie = (function(){
    var undef,
    v = 3,
    div = document.createElement('div'),
    all = div.getElementsByTagName('i');
    while (
        div.innerHTML = '<!--[if gt IE ' + (++v) + ']><i></i><![endif]-->',
        all[0]
    );
    return v > 4 ? v : undef;
}());

代码短的不能再短了，语法也是基础的不能再基础了，可我就是看不懂他为什么要这么写，唉，牛人自有高招，咱只有佩服的份了。

方法来自：最短的 IE 版本判断

]]> http://wange.im/ietester-version.html/feed 117 WordPress 之欢迎 OOXX 归来 http://wange.im/welcome-ooxx-back-in-wordpress.html http://wange.im/welcome-ooxx-back-in-wordpress.html#comments Wed, 19 Jan 2011 13:28:14 +0000 万戈 http://wange.im/?p=4381 已经有童鞋在迫不急待地抽我的筋扒我的皮了，当然我是指现在这个 WordPress 主题，但是要知道有些东东是无法靠 HTML 和 CSS 就能照搬的，不过这个学习的精神很是可贵。今天又有童鞋问我了，这个 title 标题栏的：OOXX，欢迎归来~这是怎么实现的（只有留过言的小盆友才会看见哟~）这招其实很简单，就是利用 Cookie 来记录的评论者信息，应该已经有很多朋友用上了，但还是会有人来问这个问题，既然这样，就单独写一篇来分享一下这个功能吧。

把以下代码放到你 WordPress 主题的 header.php 或者 footer.php 文件中去就可以了：

<?php if($_COOKIE["comment_author_" . COOKIEHASH]!="") { ?>
    <script type="text/javascript">document.title = "<?php echo $_COOKIE["comment_author_" . COOKIEHASH].'，欢迎归来~'; ?>" + document.title</script>
<?php } ?>

有几点需要申明一下：

首先有人质疑过这个功能对 SEO 的影响，把 title 都改了？会不会影响收录什么的呢？我可以以“万戈牌”的名誉作担保，这个质疑是多余的，因为我们可以看到被输出的文字是被套在 script 里的，一个 JS 的脚本是无法被搜索爬虫识别的。

另外，这个效果只有在你留过言的前提下再刷新页面才能看到，因为需要浏览器记录你的 Cookie 信息，首次登门的朋友不妨先留言试试。

再另外，这个方法是所有主题通用的，请大家不要再特地发Q和我说加你这段代码进去主题就崩溃了啥啥啥的，给 WordPress 初学者几个建议：第一，修改任何代码前请记得备份；第二，先不要怀疑别人的代码，先检查一下代码放置的位置有没有错；第三，学会独立思考。

再再另外，因为这个方法年代久远，我也忘记是从哪里学来的了，有哪位知道请给个链接吧。

今天就到这里吧，事情堆起来了，干活去~~~

]]> http://wange.im/welcome-ooxx-back-in-wordpress.html/feed 183 精简版的 LavaLamp JQuery 滑动导航 http://wange.im/lavalamp-for-jquery.html http://wange.im/lavalamp-for-jquery.html#comments Sun, 06 Jun 2010 13:49:59 +0000 万戈 http://wange.im/?p=3223 本来是在做 WordPress 主题的，做着做着就想给主题的导航加一个 JQuery 的滑动效果，很久没有折腾 JQuery 了，今天有点手痒痒，于是就深入折腾了一下。用 JQuery 实现的动感导航效果有很多，我之前就介绍过一个，也就是我这个主题正在使用的导航效果，本来想用著名的 LavaLamp 的滑动导航，但是因为 LavaLamp 的代码过于冗长，除了一个 JQuery 库，还需要另外两个脚本再加一段 JQuery 的执行文件，对于小站来说太奢侈了一些。

于是今天又折腾了一个精简版的 LavaLamp 滑动导航效果，为什么说是精简版呢？因为这个滑动效果同样也是用 JQuery 库，不过这个精简版的 LavaLamp 仅需要几行执行脚本，再加上一些样式就可以实现了，同样可以完美支持 IE、Firefox、Chrome 等主流浏览器，其效果和完整版的 LavaLamp 可以媲美。

先看一下这两个 LavaLamp 的对比效果吧：

完整版的 LavaLamp 效果 DEMO：http://www.gmarwaha.com/blog/2007/08/23/lavalamp-for-jquery-lovers/

精简版的 LavaLamp 效果 DEMO：http://wange.im/demo/lavalamp/

精简版 LavaLamp 实现方法：

一、HTML 部分

<ul class="navipages" id="lavalamp">
    <li class="current"><a href="#">分类一</a></li>
    <li><a href="#">分类二</a></li>
    <li><a href="#">分类三</a></li>
    <li><a href="#">分类四</a></li>
</ul>

二、引入 JQuery

这里和完整版的 LavaLamp 有些不同，完整版的 LavaLamp 仅简 JQuery 1.2X 就可以了，而我这里的精简版 LavaLamp 必须 JQuery 1.3X 才行。这里我就以 Google 的 JQuery 库为例了：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js?ver=1.3.2"></script>

三、执行脚本部分

$(function(){
    var $el, leftPos, newWidth,
    $mainNav = $("#lavalamp");
    $mainNav.append("<li id='lavalampbg'></li>");
    var $magicLine = $("#lavalampbg");
    $magicLine
        .css("left", $(".current a").position().left)
        .data("origLeft", $(".current a").position().left)               
    $("#lavalamp li").find("a").hover(function() {
        $el = $(this);
        leftPos = $el.position().left;
        $magicLine.stop().animate({
          left: leftPos
        })
    }, function() {
        $magicLine.stop().animate({
            left: $magicLine.data("origLeft")
        });   
    });
});

四、样式部分

.navipages:after {visibility:hidden;display:block;}
*:first-child+html .navipages {zoom:1;} /* IE7 */
#lavalamp li {display:inline;}
#lavalamp li a {width:90px;display:block;float:left;text-align:center;position:relative;z-index:200;}
#lavalamp li a:hover {color:white;}
#lavalamp #lavalampbg {width:90px;height:25px;position:absolute;top:10px;left:0;background:#D90018;z-index:100;}

这样就 OK 了，比完整版的 LavaLamp 可要简单很多吧，不过相比完整版的 LavaLamp 而言还有一点不足，对于每个 li 元素的宽度是固定的，没有完整版的 LavaLamp 那样可以长短伸缩灵活，大家就各取所需吧。

]]> http://wange.im/lavalamp-for-jquery.html/feed 131 JQuery 鼠标滑动渐隐渐显效果 http://wange.im/fadein-and-fadeout-with-jquery.html http://wange.im/fadein-and-fadeout-with-jquery.html#comments Wed, 05 May 2010 13:27:31 +0000 万戈 http://wange.im/?p=3090 最近我工作以外的生活就是围绕着 WordPress 新主题转了，是和尘埃老哥合作的主题，雏形已经做出来了，有好奇心的朋友可以去尘埃的网站一睹为快，这是给尘埃定制的主题，所以主题的名字就由他给起了，PRChina，是一款以红色为主色调的主题。因为刚刚搭好布局，还有很多功能没有完善，自己看着都不是很满意。

尘埃的网站是以图片分享为主题的，所以为了整站的加载速度，预载了 JQuery 的 lazyload，既然已经用上了 JQuery，不多用两个，就显得浪费了。尘埃也是这么认为的，所以还打算给导航部分加个 JQuery 的效果。说到导航部分的 JQuery 效果，我最先想到的就是著名的 lavalamp，不过 MS 要改动的 HTML 和 CSS 都比较多，我又实在懒得大规模修改了，于是我又想到了另一个效果，也就是我现在头部 RSS 订阅部分用到的渐隐渐显的效果，当然，这也是 JQuery，而且不需要另外加载 lavalamp 插件，应该说是精简不少，效果也很显著。

我就先写一下这个渐隐渐显的 JQuery RSS 展示的方法吧，之后再移植到新主题上去。话说这是从某个高手的网站上借鉴来的，不过用的太久，出处早就忘了，向作者说声抱歉啦～

1.加载 JQuery

这个已经说过很多次了吧，可以用 google 的 JQuery 库，又或者是调用自己本地的 JQuery，经测试 JQuery 1.2x 版本就足够了。

<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.2.3.min.js"></script>

2.HTML 部分

<div id="rss">
    <a id="rssurl" href="http://feed.wange.im" target="_blank"></a>
    <div id="rsstip">
    请点击右上角的 RSS 按钮并选择适合您的订阅方式～
    </div>
</div>

3.CSS 部分

这里可以自由发挥，唯一需要注意的是，要给 #rsstip 加入 display:none; 的属性，意思就是默认隐藏提示文字，鼠标移动上之后才渐显出来，也就是下一步。

4.JS 执行代码

$(function() {
    $('#rssurl,#rsstip').mouseover(function() {
        if (window.willhide) clearTimeout(window.willhide);
        $('#rsstip').fadeIn(500)
    });
    $('#rssurl,#rsstip').mouseout(function() {
        window.willhide = setTimeout(function() {
            $('#rsstip').fadeOut(500)
        },
        750)
    });
});

这个也没啥好说的，唯一需要注意的就是这段 JS 代码必须放在 JQuery 之后，顺序问题。

好了，继续折腾去啦。

]]> http://wange.im/fadein-and-fadeout-with-jquery.html/feed 86 利用 JQuery 实现图片显隐特效 http://wange.im/fadeto-effect-with-jquery.html http://wange.im/fadeto-effect-with-jquery.html#comments Thu, 08 Apr 2010 13:00:33 +0000 万戈 http://wange.im/?p=2978 今天又挖到一个 JQuery 特效，迫不及待用到 WordPress 上了，是一个利用 JQuery 实现图片显隐的特效，效果可以见我的评论头像，把鼠标移动上去试试看～可以看到头像会渐隐吧，在 IE、Firefox、Chrome 等各大浏览器下都是兼容的，这就是 JQuery 的魅力。

方法转自：http://www.skyoy.com/jquery-picture-hidden-effects.html

第一步：在 header.php 中加载 jquery，可以使用外链也可以内链。

外链可利用 google 提供的 JQ 库，调用格式为：

<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.2.3.min.js"></script>

内链空间 jquery，把 jquery.min.js 上传到风格的 js 目录下，调用格式为：

<script type="text/javascript" src="<?php bloginfo('stylesheet_directory'); ?>/js/jquery.min.js" ></script>

第二步：在 header.php 中，添加到 </head> 前，插入代码为：

<script type="text/javascript">
$(function () {
$('img').hover(
function() {$(this).fadeTo("fast", 0.5);},
function() {$(this).fadeTo("fast", 1);
});
});
</script>

看到这个效果的时候我第一时间想到了用 CSS 实现，因为通过 hover 伪类也可以实现鼠标移动上图片上显隐的效果，不过唯一区别就是，JQuery 实现的显隐有渐变的过渡效果，虽然区别很微弱，不过细节绝定成败，这个 JQuery 也很小巧，何乐而不为呢？

]]> http://wange.im/fadeto-effect-with-jquery.html/feed 124 JQuery 鼠标提示特效之 Sweet Titles http://wange.im/jquery-sweet-titles-tooltips.html http://wange.im/jquery-sweet-titles-tooltips.html#comments Sun, 14 Mar 2010 13:33:40 +0000 万戈 http://wange.im/?p=2840 JQuery 的 Sweet Titles 鼠标提示特效我早就用过了，但是后来发现和链接平移 JQuery 特效同时使用会在 IE 下有些冲突，虽说只有在我的主题上发现有这个情况，不过还是很可惜被我弃用了一段时间。今天却又被我重新用上了，用了比较折衷的方法，那就是只在友情链接页面使用 Sweet Titles，正好最近对友情链接做了彻底的改革，所以也就顺便对友链页面小小的美化一下。

说了半天，再来介绍一下什么是 Sweet Titles 吧，效果请见我的友情链接页面。sweet titlesSweet Titles 是 JQuery 中有名的鼠标悬浮提示效果之一，与其相类似的 JQuery 插件也不少，比如说，jQuery Plugin - Tooltip、jTip - The jQuery Tool Tip、clueTip、BetterTip、Flash Tooltips using jQuery、ToolTip，这些都是 JQuery 的鼠标提示效果插件，各有特色，不过相比较而言，Sweet Titles 是其中代码最少，使用最方便，效果也相当华丽丽的一个，所以个人感觉很适合博客使用。

接下来说一下使用方法：

一、载入 JQuery 库

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>

其实用 JQuery 1.4 有点浪费，JQuery 1.2x 就完全可以胜任。

二、执行代码

jQuery(document).ready(function($){

$("a").mouseover(function(e){
    this.myTitle = this.title;
    this.myHref = this.href;
    this.myHref = (this.myHref.length > 30 ? this.myHref.toString().substring(0,30)+"..." : this.myHref);
    this.title = "";
    var tooltip = "<div id='tooltip'><p>"+this.myTitle+"<em>"+this.myHref+"</em>"+"</p></div>";
    $('body').append(tooltip);
    $('#tooltip').css({"opacity":"0.8","top":(e.pageY+20)+"px","left":(e.pageX+10)+"px"}).show('fast');
}).mouseout(function(){this.title = this.myTitle;$('#tooltip').remove();
}).mousemove(function(e){$('#tooltip').css({"top":(e.pageY+20)+"px","left":(e.pageX+10)+"px"});
});

});

三、样式美化部分

#tooltip {position:absolute;z-index:1000;max-width:250px;word-wrap:break-word;background:#000;text-align:left;padding:5px;min-height:1em;-moz-border-radius:5px;-khtml-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;}
#tooltip p {color:#fff;font:12px 'Microsoft YaHei',Arial,宋体,Tahoma,Sans-Serif;}
#tooltip p em {display:block;margin-top:3px;color:#f60;font-style:normal;}

以上代码部分摘自：http://immmmm.com/jquery-study-notes-the-wonderful-title-tips.html

]]> http://wange.im/jquery-sweet-titles-tooltips.html/feed 95 HTML 转换到 Javascript（附源码） http://wange.im/html-to-javascript.html http://wange.im/html-to-javascript.html#comments Thu, 11 Mar 2010 12:55:35 +0000 万戈 http://wange.im/?p=2828 今天发现一个很好玩又比较实用的功能，HTML 转换成 Javascript，请见：http://wange.im/tool/htmltojs/

这个小工具对我来说相当之有用啊，虽然只是用 Javascript 的形式表现 HTML，比如说：

原 HTML：

<title>Life Studio</title><div id="author">万戈</div>

转换后的 Javascript：

document.writeln("<title>Life Studio<\/title><div id=\"author\">万戈<\/div>");

当然，这只是一个很简单的例子，用 HTML 转换成 Javascript 用诸多好处，比如说，我们可以随意地改变 Javascript 加载的地方，如果是出于页面载入速度考虑，我就会把类似于 flash/JQuery 实现的幻灯效果以 Javascript 的形式表现出来，然后加载在</body>标签之前，Yslow 以建议我们把 JS 放在最后，有些不太重要的 HTML 标签就可以用这个方法，然后再用 CSS 定位。

不过嘛，好工具总是一把双刃剑，如果把 HTML 转换成 Javascript 的方法应用于友情链接上，那就不太好咯。因为我们知道蜘蛛爬虫是咬不动 Javascript 的，所以如果把友情链接的 HTML 用 JS 表现出来，那就太不公平了，请三思而用之。

最后，附上 HTML 转换至 Javascript 的源码：

<html>
<head>
<title>HTML转JavaScript</title>
</head>
<body>
<p align="center"><font style="font-size:18pt;">HTML转换为JS</font><br>请将html代码拷至下面文本框中: <br>
<textarea cols="70"id="oSource" onpropertychange="showhideJSTag(change(oSource.value));" rows="10" name="oSource" ></textarea><br>
为您生成的JS代码，双击可以复制:(<input name="ShowJSTag" type="checkbox" id="ShowJSTag" onClick="showhideJSTag(change(oSource.value));" value="yes">是否加上Javascript标签)<p align="center">
  <textarea cols="70" id="oResult" title="双击复制" ondblclick='this.select();oResult.createTextRange().execCommand("Copy")' rows="10" name="oResult"></textarea>        
   <p align="center"> <input type="button" value="  清空  " name="B1" onclick="oSource.value='';showhideJSTag(change(oSource.value));" >&nbsp;&nbsp;&nbsp;   <input type="button" value="预览效果" name="B2" onclick="opentestwin(oResult.value);">  <br>
  <script language="JavaScript" >
function change(oSourceString){
return("document.writeln(\""+oSourceString.replace(/\\/g,"\\\\").replace(/\//g,"\\/").replace(/\'/g,"\\\'").replace(/\"/g,"\\\"").split('\r\n').join("\");\ndocument.writeln(\"")+"\")"+";");
}
function  showhideJSTag(strjs)
{if(ShowJSTag.checked)
oResult.value="<script language=javascript>\n<!--\n"+strjs+"\n//-->\n</"+"script>";
else
oResult.value=strjs; 
}
//http:
function opentestwin(str)                                    
{var testwin=window.open("test","_balnk","toolbar=no,location=no,directories=no,status=yes,menubar=yes,scrollbars=yes,resizable=yes");          testwin.document.write(str);                                 
}      
</script>
</body>
</html>

效果请见：http://wange.im/tool/htmltojs/

]]> http://wange.im/html-to-javascript.html/feed 45