sayong
- 浏览: 12760 次
- 性别:
- 来自: 深圳
-
最新评论
-
白色熊猫：
不错，谢谢了
让scroll事件在滚动条停止时响应 -
sayong：
wubaodong 写道871656094 写道求源码解压密码 ...
交叉滚动带来的视觉效果 -
jychenok：
www.lav.so 楼主放在压缩文件里了
交叉滚动带来的视觉效果 -
wubaodong：
871656094 写道求源码解压密码
同求
交叉滚动带来的视觉效果 -
871656094：
求源码解压密码
交叉滚动带来的视觉效果
文章列表
经过一个多月的努力，终于完成网站metro风格化的调整。这次升级中，也是对compass及coffeescript的一种尝试，整体效果还是比较满意。后期会还将对网站功能进行调整及丰富，也将会共享一些coffeescript代码。
这次升级在功能上没有做大的改动，主要是视觉方面的。尝试了新的前端开发方法。放弃了对ie6的支持，也算是为消灭ie6做点贡献！
之前在做项目的时候，跟同事一直争论登录界面设计问题，最终自己认为的方案由于跟用户体验相关理论有偏移。今天在网上看到一遍文章《关于163邮箱登录框的改进探索
》，
发现其中设计的方案跟自己的当初提出的方案类似。个人觉得登录框的意义对于用户来说，使用的概率相比用户注册和忘记密码来说高很多，因此主张登录框应该尽
量减少对用户的干扰功能，提供一个功能单一的界面，而其他相关的功能应该布局在主视觉之外，而又很容易发现的位置。而用户注册大部分情况只有新用户才需要
这个功能，大多数登录界面都把注册放在用户名输入框后面，对于老用户每天需要面对这个功能。忘记密码也是同样的道理。
我的设计方案：
...
用过scroll事件的人都知道，在每次拖动滚动条的时候会相应的事件会相应多次，而在大多数情况下我们都只希望它在滚动条停止滚动的时候 响应。经过多次测试，终于发现了一个比较好的解决方案，那就是通过setTimeout，给scroll加个延迟。例如用jQuery为页面加入 scroll事件，可以这样写：
var timeout = false;
$(window).scroll(function(){
if (timeout){clearTimeout(timeout);}
timeout = setTimeout(function() ...
映射（Map）是 ECMAScript 6 规范中引入的一种数据结构。这是一种存储键值对列表很方便的方法，类似于其他编程语言中的词典或者哈希表。让我们一起来看一下映射这种数据结构。
什么是映射
javascript 的对象（Object），本质上是键值对的集合（Hash结构），但是传统上只能用字符串当作键，这给使用带来了很大的限制。为了解决这个问题，ECMAScript 6 引入了 Map 数据结构。它类似于对象，也是键值对的集合，但是"键"的范围不仅仅局限于字符串，而是各种类型的值（包括对象）都可以当作键。也就是说，Object 结构（对象结构）提供了" ...
从百度搜索来看，响应式Web设计(Responsive Web design)的理念是集中创建页面的图片排版大小，可以智能地根据用户行为以及使用的设备环境（系统平台、屏幕尺寸、屏幕定向等）进行相对应的布局。
这里我要说的这个网站，可能不全完全说是响应式WEB设计，整个设计过程中放弃了一些小分辨率的响应，不过整体效果在大部分情况还是挺不错的。整个网站还有一个亮点就是生动背景的使用，使得整个网站更加的生动！主题更加显著！上图！
体验网址：http://nb.cgrpark.com/
在这里为大家带来45个漂亮而新鲜的高品质PSD格式的免费图标集。有了这些PSD文件，你就可以轻松的根据个人需要进行修改，即可以为你带来设计上的灵感又能提高你的设计效率，想必你会有兴趣收藏的。
1、通讯簿
2、闹钟图标
3、镜头图标
4、 公文包图标
5、回收站图标
6、学术图标集
7. 按钮图标
8、绘图工具图标
9、
焦点广告插件，之前最熟悉的莫过于FLASH制作的，结合JS调入数据，定时进行切换，同时也能根据自己需要选择。而现在随着jquery的应用，类似焦点广告等插件都是使用JS来实现，相信大家也看到过很多类似的插件，如土豆、奇艺等网站，在页面固定的位置放置多个信息进行轮换，以达到用最少的空间展示更多的内容。最近看到酷狗播放器7的界面不错，也看了下其官网，发现首页焦点广告的制作显得过于粗糙，而且在首页停留时间过长还会出现图片重叠，原因是通过更改图片透明度来切换造成的，时间过长导致切换不够彻底，以至于已经切换了的图片还可以看到。于是就想着模仿一个类似效果的插件，今天已经实现了效果，日后再整理下代码拿出来分享 ...
通常在做一些工具条的时候，使其固定在页面的指定位置，如顶部、底部等，并且不会随着滚动条的改变而改变，做前端的应该都知道，在除IE6外的浏览器中可以使用CSS的fixed属性。而在IE6中的解决办法大部分使用脚本来动态的更改工具条的位置，在效果上并没有fixed的效果好，在滚动条的时候会出现短暂的闪烁。周末在家使用电脑的时候，发现显示器右下角的图标并不会随着浏览器的滚动条的改变而改变，始终保持在显示器右下角，这个效果有点类似fixed属性。于是就一个DIV用来显示内容，并且可视高度始终保持与浏览器的可视区域一直，超过的部分就使用DIV的滚动条，在内容DIV上面加一个DIV，并使其始终定位在浏览器的 ...
曾经看到一个网站，利用不同的png图片交叉水平滚动带来的那种逼真感，或许在FLASH里面很常见，但是利用javascript来实现那就不常见了。jquery给我们带来了很多的便利，同样也让我们的网站变得越来越复杂，效果越来越震撼。单一的水平滚动效果或者垂直滚动效果现在已经应用很广了，之前发过一篇文章《滚动效果在网站中的应用》，其中也模仿过一个网站的滚动效果，今天也稍微改了下，改成滚动结束后展开内容。而像这种利用图层加滚动制作出来的效果，不得不让我佩服站长的构思！于是就花时间模仿了一个类似效果的框架，IE6的兼容性没有做过多的优化，其他浏览器都能够看到正常的效果。
模仿效果：http://w ...
曾经在一个网上订餐网站上看到一个不错的应用，进而抽时间模仿了这个效果，挺不错的。^_^。在一些需要填写简单表单数据的模块可以使用这个效果来为用户提供便捷，同时也节省了页面的空间。如贺卡发送就可以在贺卡预览图下面加入发送按钮，点击之后在贺卡预览图区域弹出图层填写需要的必要信息就可以发送。下面是如实模仿订餐网站的其中一个模块。
预览地址：http://www.lav.so/demo/slider.html
原文地址：http://www.lav.so/?aid=27
以前做网站维护的时候有接触过GZIP压缩，这里具体谈谈GZIP压缩原理及使用GZIP优化网站性能。
GZIP，即网页压缩，是由WEB服务器和浏览器之间共同遵守的协议，也就是说WEB服务器和浏览器都必须支持该技术，而现在主流的浏览器都是支持的，包括IE、FireFox、谷歌浏览器、Opera 等。常见的WEB服务器有Apache 和IIS 等。双方的协商过程如下：
1、首先浏览器请求某个URL 地址，并在请求的头 (head) 中设置属性accept-encoding值为gzip、deflate，表明浏览器支持gzip和deflate这两种压缩方式（事实上deflate也是使用gzip压缩协议 ...