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

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

已注册用户请登录

爱意满满的作品展示区。

这是一个创建于 4158 天前的主题，其中的信息可能已经有所发展或是发生改变。

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

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

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

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

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

第 1 条附言 2014-06-21 22:49:27 +08:00

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

第 2 条附言 2014-07-02 09:29:28 +08:00

更新一个版本：

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

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

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

4.界面细微调整

已知bug：

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

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

兼容

Navigator

网站

54 条回复 2015-09-17 22:50:48 +08:00

pagecho

2014-06-21 16:47:56 +08:00

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

JoyNeop

2014-06-21 16:52:07 +08:00

卧槽这域名炸了

Livid

MOD

PRO

2014-06-21 17:10:52 +08:00

Server not found.

wzxjohn

2014-06-21 17:12:45 +08:00

@JoyNeop 域名怎么了？

wzxjohn

2014-06-21 17:13:09 +08:00

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

coraline

2014-06-21 17:22:52 +08:00

@pagecho

canvas 重新画一张图模拟

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

Geeker

2014-06-21 17:24:08 +08:00

我手抖按了下 Tab 键。。

paloalto

2014-06-21 17:26:11 +08:00

@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

2014-06-21 17:27:38 +08:00

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

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

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

mortal

2014-06-21 17:29:43 +08:00

牛啊。。。

pagecho

2014-06-21 17:43:25 +08:00

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

guoqiao

2014-06-21 17:43:34 +08:00 via iPhone

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

P233

2014-06-21 17:47:52 +08:00

@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

2014-06-21 17:50:17 +08:00

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

jdqingm

2014-06-21 19:22:32 +08:00 via iPhone

好帅气…

wintr

2014-06-21 20:01:51 +08:00

最后 DESIGN 拼错了

taobeier

2014-06-21 20:05:18 +08:00

很漂亮！

coraline

2014-06-21 20:24:50 +08:00

@Geeker 哈哈

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

@wintr 谢谢

jaylong

2014-06-21 20:51:58 +08:00

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

wildplant

2014-06-21 21:17:09 +08:00

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

falconeye

2014-06-21 21:31:14 +08:00

Good！

wensonsmith

2014-06-21 22:12:47 +08:00

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

openroc

2014-06-21 22:41:59 +08:00

同赞，guo.lu~~~

coraline

2014-06-21 22:52:14 +08:00

@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

2014-06-21 23:16:01 +08:00

楼主好强大！

cxshun

2014-06-22 00:25:36 +08:00

好帅气

zola

2014-06-22 04:39:46 +08:00

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

wensonsmith

2014-06-22 07:11:33 +08:00

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

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

cImg.blur(2);

wensonsmith

2014-06-22 07:13:56 +08:00

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

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

guoqiao

2014-06-22 07:17:01 +08:00

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

wensonsmith

2014-06-22 07:48:52 +08:00

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

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

Artotria

2014-06-22 09:27:50 +08:00

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

Artotria

2014-06-22 09:40:00 +08:00

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

coraline &nbs;

2014-06-22 09:50:31 +08:00

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

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

ychongsaytc

2014-06-22 12:27:00 +08:00

支持 Retina Display 就更棒了

h2sky

2014-06-22 12:57:00 +08:00

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

g0thic

2014-06-22 13:15:26 +08:00

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

xunxun

2014-06-22 17:40:51 +08:00

我看到了。。。简书。。

juo

2014-06-23 03:05:54 +08:00

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

coraline

2014-06-23 09:13:12 +08:00

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

imSam

2014-06-24 14:07:29 +08:00

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

goldenlove

2014-07-02 12:36:51 +08:00

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

lisposter

2014-07-02 15:47:49 +08:00

域名好好看赞

JoyNeop

2014-07-02 16:42:30 +08:00

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

hellov22ex

2014-07-02 16:53:28 +08:00

很漂亮

ansenlee

2014-07-02 18:01:13 +08:00

这体验好没逻辑啊。。

TimLang

2014-07-02 18:02:40 +08:00

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

coraline

2014-07-02 21:24:39 +08:00

@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

2014-07-03 11:10:05 +08:00

警告

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