标签: 转载

用history api"偷换"浏览器历史记录

pushstate logo

HTML5提供了新的history接口,例如pushstate,以及popstate。通常情况下,浏览器的历史记录能保存访问历史,但是因为有了history api,pushstate和replacestate,我们甚至可以“偷换掉”浏览器的历史记录,偷走后退按钮,让浏览者点按“后退按钮”时,到一个你指定的网页,看起来就像是真的后退历史记录一样!这个网页还可以跨域,而且就算不存在向前d历史记录也能创建。有什么好处呢?想让访客更多的留在你的网站上?想要……?

用history api"偷走"浏览器后退按钮

history-stealing

jQuery hash 插件

jquery.hash.logo

URL中的hash,也就是网址井号后面的部分,其实是一块宝地,它能创建浏览历史,也能存储一些简单数据。从Twitter开始Hash被用来定义Ajax内容,虽然如今已被HTML5的pushState所替代。这里介绍jQuery Hash 插件,可以帮助你完成简单数据的存储。

Hash存储数据有什么用

首先传统URL传递数据的弊端是,对搜索引擎不友好,搜索引擎会认为 /example和/example?key=val是不同的网址,然而hash则不同,搜索引擎认为 /example 和 /exmaple#;key=val 会是两个完全相同的网页。此外,用hash存储数据也不必刷新页面。

hash可以作为一种本地临时存储的解决方案,正如cookie那样。可以在url中保存临时的用户状态这是cookie做不了的。例如含有Ajax页面的刷新,就可以直接利用hash存储当前的状态。再例如你可以配合Hashchange监听来完成一些事情。

这算是一个尝试,虽然目前少有人在hash存数据上作文章,但是如果你真的需要,可以用这个插件参考一下。

jQuery Scroll (jQuery平滑滚动) 插件

是不是很想实现页面平滑滚动的效果呢?既美观又不唐突,而且还能自己控制速度,岂不是一个很好的效果吗?还好我们有强大的jQuery以及他的插件们,这样武装起来,特效什么的就太简单不过了。

新!无需插件实现 jQuery 平滑滚动!!

jqScrollFunction

 

想要一看个demo么

如果你在看这篇文章没在首页,你应该注意到了文章顶端的这个分享条;你可以点点评论链接,或者这里试试,看看是不是平滑滚动到了评论栏呢?

用Stylish美化你的Google+外观

stylish google plus larry page profile

如果你觉得Google+的外观有点单调,看腻了,而又不知从何入手修改的话,有一款名叫Stylish的插件可以提供给你。其实Stylish是很出名的一款插件了,不论是在Firefox还是Chrome平台上都很受欢迎,现在就介绍如何通过使用Stylish来入手修改美化Google+的外观;并同时提供现成的样式表实现上图所示的效果。

获取Stylish

Stylish的下载地址分别是:

Stylish For Chrome

Stylish For Firefox

下载安装就不必说了。

添加样式

如果你想实现上图的效果,请先下载这个风格样式到本地。如果你不想,可以直接看最后面的。在添加安装样式时,Chrome和Firefox的操作大致相同。

Chrome

在插件选项主页选择左侧添加样式,名称随便,勾选已启用,并把下载的文件的内容粘贴进去,选择【应用到】【以指定地址开始】并输入https://plus.google.com,最后确定点击【添加新节】即可。

九大方法在Google+上找到要圈的人

现在Google+上已经有了不少人的身影,可是也许你会感到困惑,你会发现仍然有大量的用户分享的内容是空白的,既然圈养人数有5000的限制,那么就需要了解到底Google+上哪些人真正值得被圈养?

事实上你有不少方法可以发现这些值得被圈养的人,不论是基于位置,职位,职业和类型,或者是使用第三方网站,你都会发现找到有价值的信息总是这么容易。

现在就介绍一些找到你值得圈养的人的方法。

Google plus search

其实你何不通过自己感兴趣的话题发现圈养者呢?如果你想要获得圈养的相关建议,到Google plus search去搜索。这个网站提供众多语言,在你对感兴趣的话题进行搜索时,你可以在post和profile标签切换,在发现你感兴趣的帖子或者任务时,就赶紧去圈养他~

google plus search

Recommended Users

jQuery Background Position Animate (jQuery背景位置变换) 插件

弥补jQuery的不足

我们知道jQuery几乎是我们最常用的javascript库了,不过尽管他自己本身拥有大量的特效,但却仍然缺少一些动画效果。除了上次提到的jQuery Color Animate (jQuery 颜色变换动画) 插件以外,还介绍一款背景位置变换(background position animte)插件。通过背景位置的动态变换,你甚至可以做出像是用flash作出的精湛动画效果。我们可以通过这一插件实现。

有一个例子是Google.com搜索结果页的+1按钮。当鼠标移上去时,你可以看到一道闪光闪过。这其实就只是background position变换而已。

其背景图片是: 

现在你可以理解为什么可以靠背景变换实现出现一道闪光的效果了。

使用方法

首先您肯定需要引用jQuery文件。推荐使用Google jQuery API,这样比较快一点。然后要在后面引用这个插件文件:

请先到这里下载此文件(jqBackgroundPositionAnimate.js),然后再合适位置引用他:

<script type="text/javascript" src="jqBackgroundPositionAnimate.js">
</script>

这之后便可以使用了。大致方法和其他的jQuery略有不同,要注意了:

$(selector).animate(

{  backgroundPosition:"1px 1px"  },

{  duration:speed,  complete: function(){}

});

其中,红色部分是可修改的,分别是选择器、背景位置、花费时间毫秒、callback函数。当然,后两者是可选的。

一个在线Demo

jqeury background position animate plugin demo由于页面比较复杂,所以不直接把他搬到这里来了,我把它放到这里了,请到这里参观。

jQuery Color Animate (jQuery 颜色变换动画) 插件

弥补jQuery的不足

我们知道jQuery几乎是我们最常用的javascript库了,不过尽管他自己本身拥有大量的特效,但却仍然缺少一些动画效果。比如说,颜色、背景颜色的变换。弥补这一不足的方法给大家提供两个:

1、jQuery UI 库

jQuery是一款强大的jQuery插件性的特效库,通过jQuery UI可是实现下属功能:

Interactions

Complex behaviors like drag and drop, resizing, selection and sorting.

你可以点击上面的链接查看在线demo。其中就包含color animate

color animate

附上jQuery UI API:

http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js

2、Edwin Martin提供的jQuery color animate插件

如果你只是需要颜色变换功能,也不必去花费时间装载一个和jQuery本身几乎一样大的插件。我就没有这么做。好在Edwin Martin为我们提供了单独的jQuery Color Animate插件,js本身很小,只有几行。实现效果可以有:

修改 Chrome 默认的 Google 搜索域名

如果你肉身不在美帝,Google会根据你的IP将Chrome里的搜索引擎由Google.com变成本地的Google搜索,比如对于景德镇人民来说就是Google.com.hk的简体中文版。但其实大家更喜欢用Google.com,因为很多新功能都是首先部署在这里的,要切换使用Google.com,你可以点击Google.com.hk页面下方的Google.com in English或者直接进入Google.com/ncr。早期的Chrome会首先查看你本地的cookies来决定搜索结果用谁来呈现,而现在不是了,它就看你的IP,那我们怎么强制让Chrome用Google.com搜索呢?

chrome local state file

聪明的你想到了新建一个使用Google.com的自定义搜索引擎,但这样你就没法通过Chrome的地址栏获得搜索建议了,所以最佳解决方案还是修改Chrome默认的搜索域名:

  1. 关闭所有的Chrome窗口
  2. 进入Chrome的用户设置文件夹,对于Windows Vista和Windows 7用户来说就是“%LOCALAPPDATA%\Google\Chrome\User Data\”
  3. 用记事本打开Local State文件
  4. 找到“"last_known_google_url” 和 “last_prompted_google_url”这两行,修改为Google.com,或者其它你想用的Google本地化搜索域名,如上图
  5. 保存文件,重新打开Chrome
  6. 如果Chrome问你是否切换你的本地域名还是保持Google.com,当然就是选择后者

开始享受默认的Google.com搜索引擎吧。

CSS Transition (变换动画)

最近学习CSS的过程中,发现了不少有用的东西。包括一些神奇的,纯CSS的特效,只需简单的几笔即可完成jQuery实现的效果。

CSS 3 中提供了一种属性,Transition(变换),这种属性能够实现在元素的某些属性的数值发生改变时产生过渡的效果。比如长度增加,能产生类似拉长的动画效果;颜色改变时,也可以利用Transition产生一种颜色渐变的效果。

浏览器支持情况

CSS Transition受到浏览器的广泛支持。CSS3 Transition Browser Support

Chrome 2+(-webkit-transition)
Firefox3.7+(-moz-transition)
Safari 3.1+(-webkit-transition)
Opera 10.5+(-o-transition)

From:axiu.me

不过经过我的观察,现在IE还是不能支持,即使是在IE9中。不过也没有关系,至少并不会出现什么令人感觉糟糕的结果。

CSS变换的由来

CSS Transition曾经是只属于Apple Safari Webkit的东西,仅能由Safari UI实现的动画效果。

可是W3C有部分工作人员认为变换动画是脚本该做的事情而不是CSS,不过去年三月份,来自Apple、Mozilla开始将CSS变换模块添加到CSS 3特性里面,非常接近原来Safari Webkit的效果。由此得来CSS Transition。

书写方法

在CSS代码中,要使用Transition属性需要这么书写:

-moz-transition: // Firefox

-webkit-transition: // Safari、Chrome

-o-transition: // Opera

transition: //官方标准

建议在书写时,将上述全写上。

效果之:颜色变换

使用Transition可以实现颜色的变换,比如一个锚链接的鼠标移上产生颜色渐变动画:

Chrome的最强Google+扩展大集合

chrome浏览器g+插件大整合(配上了图片),共计16款

也欢迎你分享给身边的朋友

前言:没装谷歌chrome浏览器的童鞋趕緊装一个,chrome是我用过最快的浏览器,也是使用G+體驗最佳的!使用g+也具有先天优势,各种方便!

1. +Comment Toggle

可以收回已展开的评论或文章,相信以后google会出这样的功能,现阶段装这个插件非常实用。

Comment Toggle

https://chrome.google.com/webstore/detail/mnhiknfpdlpmmgmecadnffgmgpgaldlo

2. Replies and more for Google+

非常實用的一個,省去了麻烦的+人动作。在每条信息和评论下面增加一个“回复给作者”的按钮,点击可直接提及作者的账号;有新通知的时候会在标签显示数量,也可以设置推送到桌面。

repliesmore

https://chrome.google.com/webstore/detail/fgmhgfecnmeljhchgcjlfldjiepcfpea

敬请继续阅读》》