个人网站， http://lorem.in

最后的那个模糊效果好厉害啊！有教程么？

卧槽这域名炸了

Server not found.

@JoyNeop 域名怎么了？

git上国内访问慢很正常啊。。。没啥好奇怪的=。=

@pagecho

canvas 重新画一张图 模拟

@Livid 是在Github上的，用dnspod做解析，访问不了我也不明白为什么

我手抖按了下 Tab 键 。。

@pagecho lz 用的是 canvas 实现模糊。

var CanvasImage = function(a, b) {
this.element = a,
this.image = b,
this.element.width = this.image.width,
this.element.height = this.image.height,
this.cOntext= this.element.getContext("2d"),
this.context.drawImage(this.image, 0, 0)
};

CanvasImage.prototype.blur = function(a) {
this.context.globalAlpha = .5;
for (var b = -a; a >= b; b += 2) for (var c = -a; a >= c; c += 2) this.context.drawImage(this.element, c, b), c >= 0 && b >= 0 && this.context.drawImage(this.element, -(c - 1), -(b - 1));
this.context.globalAlpha = 1
},

@pagecho 嫌麻烦的话，可以试试这个：

https://github.com/jakiestfu/Blur.js

blur.js is a jQuery plugin that produces psuedo-transparent blurred elements over other elements.

牛啊。。。

@paloalto 成功了。。。好！！！

能不能把错别字改下，强迫症的表示难受…

@paloalto 补充 SVG Filter

<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
<filter id="blur">
<feGaussianBlur stdDeviation="7" />
</filter>
</svg>


#div { filter:url(#blur) }

上一句在 Firefox 中需要写成 inline style， 写进 CSS 文件中无效，搜了下没人提过，也知道为什么

@wzxjohn 里面有个撸过（guo.lu）的域名，进去后应该注意到

好帅气…

最后 DESIGN 拼错了

很漂亮！

@Geeker 哈哈

@guoqiao 已经修正，不小心打多一个字母

@wintr 谢谢

楼主的http://guo.lu 这个很赞啊

@coraline 好牛啊。是哪里的牛人?

图片模糊能详细说明一下吗？？ 没找到源码

同赞，guo.lu~~~

@wensonsmith

这个是canvas生成模糊image的方法：

var CanvasImage = function(ele,img) {
this.element = ele;
this.image = img;

this.element.width = this.image.width;
this.element.height = this.image.height;

this.cOntext= this.element.getContext("2d");

this.context.drawImage(this.image,0,0)
};

CanvasImage.prototype.blur = function(i) {
this.context.globalAlpha = 0.5;

for (var y = -i; y <= i; y += 2) {
for (var x = -i; x <= i; x += 2) {
this.context.drawImage(this.element, x, y)

if (x >= 0 && y >= 0) {
this.context.drawImage(this.element, -(x-1), -(y-1))
}
}
}
this.context.globalAlpha = 1
};

其实就是双层图片模拟的，上层是canvas，下层是原来image

楼主好强大！

好帅气

请教鼠标点击出现小圈的效果是叫什么名字？

@coraline 调用的话是这样么？ 我怎么成功不了啊你能在http://jsfiddle.net/ 上写一个demo么？

var cImg = CanvasImage(document.getElementById('blur'),document.getElementById('img'));

cImg.blur(2);

@coraline 噢！ 知道自己错在哪了。。

哈哈，成功了，多谢啊！！！

@coraline
还有那句"会变得永远只是人心而已". 设计很不错, 但一个无关痛痒的错别字, 立即让逼格大幅降低.

楼主，图片尺寸如果超出窗口宽度，比如 一张1440 的图，我可以用 width = “100%” 来缩小至重口大小，但是canvas 里面绘制的是原图的大小，怎样处理的呢？

PS： 你给的源码里面的js都是压缩过的。。。看哭了啊！

楼主流弊，给你点赞！(/ w \ )

看了下素锦阅读，我知道你是谁了

@zola https://github.com/LoeiFy/loeify.github.com/blob/master/assets/module/js/tapPlot.js


@wensonsmith 请看Github里面assets目录源码，不要看dist里面的

支持 Retina Display 就更棒了

觉得不算是博客吧，更像幻灯片演示 --_--!@

酷炫。。。http://guo.lu/这个站也不错

我看到了。。。简书。。

@coraline “会变得只是人心”，这张好像从丁一那看到过，你是？

@juo 文章不是我弄的，是另一个作者

帅气，若是兼容RETINA，必然爆了。

挺赞的... 喜欢那个大括号的loading ...

域名好好看 赞

占用了 Safari 的手势，无法正确地 show the previous page

很漂亮

这体验好没逻辑啊。。

从lz的网站找到个很有意思的js插件：Isotope，不过不开源。。

@TimLang

For non-commercial, personal, or open source projects and applications, you may use Isotope under the terms of the GPL v3 License. You may use Isotope for free.

guo.lu 这个网站并没有涉及商业，并且还是属于个人项目

警告

尊敬的用户，您好！
您访问的网站或页面因如下原因而暂时禁止访问:
1、网站未备案，按照国家相关法律法规，该网站被临时屏蔽！
2、网站主机上绑定多个未备案域名。
3、网站页面内含有敏感或有害信息，如涉黄、赌、毒等内容。
4、将备案号/经营许可号显示在网站首页的醒目位置，如当地电管局另有要求则以当地电管局要求为准。

锅炉你好!
:P

我一直想知道这个滑动是怎么做的。

监听的什么事件？能够做到跨平台

@coraline 为嘛 我在网站源文件中 没有找到这些代码 ？

就是 canvas 模糊效果的代码

脑抽了说的不一个，，无视我