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

[coraline]

之前弄了个基于grunt的前端开发，上线框架 Wframe https://github.com/LoeiFy/WFrame

为了弄个例子出来，就顺势做一个网站出来， http://lorem.in

网站是挂在Github上，可能奇怪的有点慢。

同时对pc跟手机做了适配，体验都不错，鼠标键盘都可以操作 swipe, tap, scroll or keyboard to navigator

兼容性的话都明白的，我没那么多心思去兼容，但是高级点的浏览器都没有问题，可能有一些bug，以后在修复了

o，忘了说了，源码在这里，https://github.com/LoeiFy/loeify.github.com ，修改的话首先你得装上grunt

更新一个版本：

1.添加fav ico 可以在Safari添加到主屏幕，像一个app的样子

2.添加svg动画，支持Retina Display

3.功能函数都分离出来，模块更清晰

4.界面细微调整

已知bug：

1.手机设备点击不了作品链接，这个暂时没想到办法

2.浏览器前进后退有点问题，这个是没有处理好history api 逻辑要变一下

[pagecho]

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

[JoyNeop]

卧槽这域名屌炸了

[Livid]

Server not found.

[wzxjohn]

@JoyNeop 域名怎么了？

[wzxjohn]

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

[coraline]

@pagecho

canvas 重新画一张图 模拟

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

[Geeker]

我手抖按了下 Tab 键 。。

[paloalto]

@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
},

[paloalto]

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

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

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

[mortal]

牛啊。。。

[pagecho]

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

[guoqiao]

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

[P233]

@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 文件中无效，搜了下没人提过，也不知道为什么

[iislong]

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

[jdqingm]

好帅气…

[wintr]

最后 DESIGN 拼错了

[taobeier]

很漂亮！

[coraline]

@Geeker 哈哈

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

@wintr 谢谢

[jaylong]

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

[wildplant]

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

[falconeye]

Good！

[wensonsmith]

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

[openroc]

同赞，guo.lu~~~

[coraline]

@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

[hustlzp]

楼主好强大！

[cxshun]

好帅气

[zola]

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

[wensonsmith]

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

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

cImg.blur(2);

[wensonsmith]

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

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

[guoqiao]

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

[wensonsmith]

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

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

[shyrz]

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

[shyrz]

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

[coraline]

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


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

[ychongsaytc]

支持 Retina Display 就更棒了

[h2sky]

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

[g0thic]

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

[xunxun]

我看到了。。。简书。。

[juo]

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

[coraline]

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

[imSam]

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

[goldenlove]

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

[lisposter]

域名好好看 赞

[JoyNeop]

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

[hellov22ex]

很漂亮

[ansenlee]

这体验好没逻辑啊。。

[TimLang]

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

[coraline]

@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 这个网站并没有涉及商业，并且还是属于个人项目

[ytf4425]

警告

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

[iam36]

锅炉你好!
:P

[yangkeao]

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

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

[bydgd]

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

[bydgd]

就是 canvas 模糊效果的代码

[bydgd]

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