JavaScript - 路人假志

jquery回到顶部插件

想做一个类似新浪微博的回到顶部的效果，网上有好多，可是都不合我意，我只想要一个功能最简单的，当我的滚动条滚动到一定距离，出现一个按钮，点击以后能滑动到页面顶部，然后按钮消失。

于是参考收集的几个插件，自己写了一个

像这个样子使用：

var options = {
	pageWidth:950,//附着容器宽度
	pageWGap:10,//按钮和容器的距离
	pageHGap:30,//按钮和页面底部的距离
	startline:100,//出现按钮时的滚动条滚动的距离
	duration:200,//回到顶部的速度时间ms
	showBtntime:100//显示\隐藏回到顶部按钮的速度时间
}

$('<a href="javascript:void(0);" class="go-top">').appendTo('body').goToTop(options);
// $('<img alt="回到顶部" src="image/up.gif"/>').appendTo('body').goToTop(options);

这里的按钮可以使用链接或者图片，如果是链接的话一个参考的样式如下

.go-top{
	padding:4px 2px;
	background:#d8effd;
	width:1.5em;
	line-height:14px;
	text-align:center;
	display:block;
	-moz-border-radius:0 3px 3px 0;
	border-radius:0 3px 3px 0;
	text-decoration:none;
}
.go-top:hover{
	color:#ff0655;
}

如果你已经看到这里了，此时页面右下角应该已经出现这个按钮了，点一下试试吧。

另外，Chrome更新到10.0.603.3以后突然发现Syntaxhilighter失效了，汗，莫非传说中的新V8引擎不给力了。。。

代码珠玑 JavaScript, 我的作品

December 12, 20105 Comments

在服务端合并js和css文件

YSlow会告诉我们，合并所有的js和css文件可以减少HTTP请求，这样能提升访问速度。

通常为了开发的方便，我们会把js按用途分类，这样就会有很多js文件，比如sablog的jscript文件夹里就有10几个文件，这样访问的时候就是10几个HTTP请求。

那么解决办法就是合并它们，对吧。可是这样有一个问题就是你需要保存所有文件的源文件，并且有修改的时候又要从新合并一次。

实际上我们可以更简单一点，让php去合并这些文件吧，同时我们也不用操心压缩这档子事了。这里就要提到一个开源的php项目，名字叫做Minify，它可以帮助你合并，精简，压缩和缓存Javascript以及CSS文件。

Minify的使用非常简单：

1. 把下载到的源码解压缩，把其中的min文件夹复制到Apache的DOCUMENT_ROOT目录下，即你的网站跟目录。

2. 然后打开min/config.php文件，注意下面一些选项

//去掉下面3项中的一项注释，设置缓存目录
//$min_cachePath = 'c:\\WINDOWS\\Temp';
//$min_cachePath = '/tmp';
//$min_cachePath = preg_replace('/^\\d+;/', '', session_save_path());

//设置缓存时间，以秒为单位，当然是越大越好
//但是更简单的方式是在URL最后加一串数字，比如/min/f=hello.css&123456
//这样Minify会自动把缓存时间设置成一年，当文件有更新时之需要修改URL后面的数字即可
$min_serveOptions['maxAge'] = 1800;

//f参数获取的文件个数限制，建议越大越好，但是会出现URL超长的问题
//如果文件很多的话建议使用g参数设置group
$min_serveOptions['minApp']['maxFiles'] = 10;

3. 下面你可以打开http://yourdomain/min/builder/，这里有一个工具可以帮助你生成引用URL。填好你要合并的js或css文件，点击Update，下面会给出引用代码，类似这个样子

<script type="text/javascript" src="/min/b=sa2/include&amp;f=jscript/show.js,jscript/jquery.js,jscript/common.js,
jscript/ajax.js,jscript/fiximage.js,syntaxhighlighter/scripts/shCore.js,
syntaxhighlighter/scripts/shBrush.js&20100724"></script>

把它放到你的<head></head>标签里，删掉原先的一堆脚本引用，好了，现在访问你的网站只有一个HTTP请求了。

4. 你可能会嫌上面的URL是不是太长了点，当然我们还有更好的方法，并且效率会更高。我们可以使用g参数

这个方法需要在min/groupsConfig.php里进行设置，比如刚才的那一堆js可以写成这样

return array(
    'js' => array('//sa2/include/syntaxhighlighter/scripts/shCore.js',
    			  '//sa2/include/syntaxhighlighter/scripts/shBrush.js',
    			  '//sa2/include/jscript/show.js',
    			  '//sa2/include/jscript/jquery.js',
    			  '//sa2/include/jscript/fiximage.js',
    			  '//sa2/include/jscript/common.js',
    			  '//sa2/include/jscript/ajax.js')
);

这段代码也是可以用上面提到的builder来生成的。

这样在你的网页中就只需要这样来引用了

<script type="text/javascript" src="/min/g=js&20100724"></script>

看起来简洁许多吧~

代码珠玑 JavaScript, PHP, css

July 24, 201010 Comments

兼容firefox，chrome的网页灰度效果

今天全天下网页都变灰了对吧，话说我对这种强制行为很不解。哀悼与否在于一个人的内心是否善良。表面上的让网页没有颜色，让视频网站不能搜索，究竟有多大意义呢？

强国先强心，表面文章少做为好。

只是在技术上来看，要实现网页灰度，最稳妥的办法莫过于直接处理所有图像，不用考虑兼容，不用考虑效率。但是，工作量比较大，切换回来也费力。

ie系列支持css滤镜，一句 filter:gray; 就解决了所有问题。但是，众所周知，ie以效率低著名，你会发现开启以后速度显著下降。并且，最致命的，在其他浏览器下无效。

有没有兼容所有浏览器的办法呢？有。JavaScript能做到，早就有人用js模拟了ie的gray滤镜，如果你感兴趣并且愿意看英文，可以去看看《“GRAYSCALING” IN NON-IE BROWSERS》。如果你不愿意看，我可以直接告诉你怎么用。

1. 下载grayscale.js文件

2. 在你的header里引用这个js文件

<script type="text/javascript" src="../include/jscript/grayscale.js"></script>

3. 要实现全站灰度，在onload事件中调用

grayscale(document.body);

我的主题背景图片比较多，处理起来较吃力，可能出现部分图片消失的情况。。。

我会把这个效果开启三天，如果因为处理问题导致主题显示不正常影响了大家的浏览效果还请见谅。反正来这儿的都是熟人，要影响也就你们几个。。。

代码珠玑 JavaScript, 浏览器

April 21, 201016 Comments

它山之石

最近非常非常忙，手上悬着好几个计划，以至于似乎都没有时间上来码字了。分享近日看到的几个好东西吧。

首先，在刘未鹏那里看到了一篇关于为什么要写博客的文章，刘未鹏是《代码之美》一书的译者，这本书值得一看，这个译者的博客更值得一看。那里有很多有意思的东西。最近看了太多的人写自己为什么要写博客，大概这是独立博客作者在一定的时期都会思考的事情，而lurenfake.com在诞生的那一天，我就很清楚它是为什么存在的。我根本不在乎我有多少流量，多少人气，实际上大部分来到这里的人是通过搜索引擎，他们在这里找到他们想要的东西，解决了自己的问题，我就满足了。我不喜欢看到回复里面出现跟文章无关的乱七八糟的话，那样的留言我通常无视，而且一定不会回访，想通过这种方式拉流量的可以直接绕道了。

其二，偶然看到一篇高效JavaScript，优秀程序员和普通程序员的区别之一就是，前者能用比后者更精练的代码写出更高效的程序。仅仅用代码实现功能是北大青鸟这种地方一个月就能培训出来的，从IT民工走向IT精英，大概缺的就是修炼。若干年前，当我看完《Effective C++》和《More Effective C++》之后，我意识到会写代码和写好代码之间的差距，而这也会导致日后收入的差距甚至人生的差距。永远把效率问题排在日程表上，不光对于代码，对于工作生活同样应该如此。

其三，看到一个BT工作原理演示动画，很有意思，非常生动地演示了BT的原理，不过貌似用IE是看不了的。。。盯着这个动画发呆了好久，据说是JavaScript写成的，之前还见过一个JavaScript写的windows 3.1，这些人似乎都是天才，可惜我不是。

分享主义 JavaScript, blog, 杂谈

March 17, 201015 Comments

基于jQuery的iframe遮罩层

呃，自从告诉大家“上上下下左右左右BA”这档子事之后，Nox打算也去自己那里弄一个，然后据说他遇到障碍鸟。好吧，其实我这里只有一行代码啦

var k = [];
document.onkeydown = function(e){
    e = e || window.event;
    k.push(e.keyCode);
    if (k.toString().indexOf("38,38,40,40,37,39,37,39,66,65") >= 0) {
        liteFrame(391, 410, "$options[url]demo/snake/index.html", "哎呀，您发现了一个秘密^_^");
        k = [];
    }
}

liteFrame是干啥的呀？这是来自于一个叫做liteBox的jQuery插件，我把它精简了一下，只剩这么一点点代码啦

function loadFrame(){
    $("#liteloading").remove();
    $("#lite-content").show();
}

function activeFrame(){
    if (document.all) {
        top.frames[0].focus();
    }
    else {
        $("#liteFrame").focus();
    }
}

function liteFrame(liteWidth, liteHeight, url, captionStr){

    marginLeft = -liteWidth / 2;
    marginTop = -liteHeight / 2;
    
    //lite show append
    $liteOverlay = "<div id='lite-overlay'><div id='liteloading'></div></div>";
    $liteContent = "<div id='lite-content' style='width:" + liteWidth + "px;height:" + (liteHeight + 30) + "px;margin-left:" + marginLeft + "px;margin-top:" + marginTop + "px;width:" + (liteWidth) + "px;'><div class='liteTitle'>" + captionStr + "</div><div class='liteClose'>关闭</div><iframe name='liteFrame' id='liteFrame' src='" + url + "' style='width:" + liteWidth + "px;height:" + liteHeight + "px;' frameborder='0' scrolling='no' onload='loadFrame();activeFrame()'></iframe></div>"
    $("body").append($liteOverlay);
    $("#lite-overlay").append($liteContent);
    
    $(".liteClose").click(function(){
        $("#lite-overlay").remove();
        $("#lite-content").remove();
    });
}

其实就是显示一个绝对定位的遮罩层，里面套一个iframe，iframe里显示目标网页，就是那个贪吃蛇的页面啦，页面loading过程中还会显示一个图片

这样还不够哦，还需要最关键的css啦

body {
    width: 100%;
    height: 100%;
}
* {
    margin: 0;
    padding: 0;
}

#lite-overlay {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: #000;
    filter: alpha(opacity = 75);
    -moz-opacity: 0.75;
    opacity: 0.75;
}
* html #lite-overlay {
    position: absolute;
}

.liteTitle {
    height: 30px;
    line-height: 30px;
    text-indent: 12px;
    font-size: 12px;
    font-weight: bold;
    background: #69f;
    position: relative;
}

.liteClose {
    height: 30px;
    line-height: 30px;
    cursor: pointer;
    position: absolute;
    right: 15px;
    top: 0;
    font-size: 12px;
}

#lite-content {
    background: #fff;
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 100;
    display: none;
}
* html #lite-content {
    position: absolute;
}

/*-- loading --*/
#liteloading {
    position: absolute;
    width: 208px;
    height: 13px;
    left: 50%;
    top: 50%;
    margin-left: -104px;
    margin-top: -6px;
    z-index: 10000;
    background: url(./images/loadingAnimation.gif) no-repeat;
}

其实，不一定要像我这样嵌个网页哦~开动脑筋，用Konami Code可以加上很多好玩的效果呢~

代码珠玑 JavaScript, konami code

February 22, 201029 Comments