Category: Javascript /Jquery / React / Bootstrap / Web

下载：20130709125708248 原文：jquery ui仿腾讯web qq界面desktop酷炫特效… Read More

用法： <script src="js/jquery.vmap.js"></script> <script src="js/jquery.vmap.world.js"></script> <script src="js/jquery.vmap.sampledata.js"></script> <script> jQuery('#vmap').vectorMap({ map: 'world_en', backgroundColor: null, color: '#ffffff', hoverOpacity: 0.7, selectedColor:… Read More

  1. anti-adblock-killer 原文：https://github.com/reek/anti-adblock-killer 下载：anti-adblock-killer-master 2.  FuckAdBlock 原文：https://github.com/sitexw/FuckAdBlock 下载：FuckAdBlock-master   DEMO：http://sources.ikeepstudying.com/anti-adblock-killer/ 更多参考： 网页检测 AdBlock 的 6 种方法 用JavaScript探测页面上的广告是否被AdBlock屏蔽了的方法 站… Read More

  如果你玩过Google+，看到过YouTube的新界面，便会体验到这个HTML5的新功能。使用pushState + Ajax（pjax），可以实现网页的ajax加载，同时又能完成URL的改变而没有网页跳转刷新的迹象，就像是改变了网页的hash（＃）一样。   效果如下：实例DEMO 1   |   实例DEMO 2    |   实例DEMO 3     旧的解决方案 曾说SEO和ajax是天敌。此前从Twitter开始流行Ajax+hash的方式调用内容，Google给出的解决方案是“#!~string”自动转换为“?_excaped_fragment_=~string”来抓取动… Read More

URL中的hash，也就是网址井号后面的部分，其实是一块宝地，它能创建浏览历史，也能存储一些简单数据。从Twitter开始Hash被用来定义Ajax内容，虽然如今已被HTML5的pushState所替代。这里介绍jQuery Hash 插件，可以帮助你完成简单数据的存储。 Hash存储数据有什么用 首先传统URL传递数据的弊端是，对搜索引擎不友好，搜索引擎会认为 /example和/example?key=val是不同的网址，然而hash则不同，搜索引擎认为 /example 和 /exmaple#;key=val 会是两个完全相同的网页。此外，用hash存储数据也不必刷新页面。 hash可以作为一种本地临时存储… Read More

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

有些网页上充斥着令人厌恶的广告，这些广告不仅阻碍了信息的获取，有的还严重影响了浏览者的心情。特别是某些毫不相关的多媒体广告和弹出式窗口，不仅让人感到被骚扰，还很容易误点到，浪费宝贵的时间。由此便诞生了大名鼎鼎的跨平台 AdBlock 插件，在任何主流浏览器上都有它的扩展或插件，用户可以安装它并屏蔽绝大多数的广告。 既然 AdBlock 有检测广告并屏蔽它们的方法，作为网页制作者，其实也有反过来检测 AdBlock 的方法。 为什么要检测 AdBlock 这是一个有争论的问题：用户有选择不看广告、在浏览器页面上销毁广告的权利，网站也有捆绑广告和信息一同派发给你并收取广告商展示费用的自由。这两者都不能互相干预，并且在… Read More

Bootstrap是Twitter推出的一个开源的用于前端开发的工具包。它由Twitter的设计师Mark Otto和 Jacob Thornton合作开发，是一个CSS/HTML框架。Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言 Less 下载：bootstrap3_manual   原文：bootstrap3 中文手册 [下载]… Read More

以下任意均可： 1. jQuery模拟原生态App上拉刷新下拉加载效果代码，鼠标上拉时会显示loading字样，并且会模拟加载一条静态数据，支持触屏设备使用。 DEMO：http://sources.ikeepstudying.com/drop-more/ 下载：jQuery模拟原生态App上拉刷新下拉加载效果代码   2.  jquery iscroll上拉 下拉加载内容 DEMO：http://sources.ikeepstudying.com/cubiq-iscroll/ 下载：jquery-iscroll  | 简约版： cubiq-iscroll   3. 移动端下拉刷新、上拉加载更多 Zept… Read More

前言 js的正则表达式是前端中比较重要的部分，加入你要去面试，正则的题目必不可少。我之前的这篇文章中提及过。具体可以看：http://www.haorooms.com/post/qianduan_mianshi 正则表达式规则 一、普通字符 字母、数字、汉字、下划线、以及后边章节中没有特殊定义的标点符号，都是”普通字符”。表达式中的普通字符，在匹配一个字符串的时候，匹配与之相同的一个字符。 举例： 表达式 “o”，在匹配字符串 “haorooms” 时，匹配结果是：成功；匹配到的内容是：”o”；匹配到的位置是：开始于… Read More

前言 网页顶部加载进度条，近年来很流行，很多网站都采用了这种加载方式。网上也有这样类似的插件，今天我们总结一下网页顶部线性页面加载进度条。 头部LoadingBar线性进度条总结 上面的代码只是静态效果，没有和网页加载联系在一起，要和网页加载联系在一起，今天推荐几个插件。 插件一：LoadingBar LoadingBar.js的地址是：http://www.onextrapixel.com/2013/09/02/loadingbar-js-adding-a-youtube-like-loading-bar-to-your-website/ 用ajax方式读取页面内容，然后加载。 插件二：NProgress… Read More

webtouch（webapp）页面，防苹果手机safari浏览器，网上滑动，底部导航消失，滑动到底部又出现。向下滑动，底部导航出现。 遇到问题 1、我一开始用swipeup和swipedown来做，发现因为有滚动条，不会触发。因此只能判断滚动条是上滚下滚等。关于手机手势，后面的文章会介绍，欢迎关注！ 2、通过上滚下滚来让底部导航显示或者因此，安卓上面的浏览器都可以，但是苹果safari会一闪一闪，原因是苹果safari自动有个弹跳效果，导致事件重复执行，解决办法是给上滚下滚一个距离，滚动到一定距离后返回是上滚还是下滚。 单纯判断滚动条方向 function scroll( fn ) { var beforeScr… Read More

Description This is a cross platform jQuery library to create a QRcode reader for HTML5 compatible browser. The decoder used for the QRcode reading is from LazarSoft https://github.com/LazarSoft/jsqrcode Demo See a demo here http://dwa012.github.io/html5-qrcode/ Usage Include html5_qrcode.min.js in the lib directory. Create a basic <div>… Read More

一、功能简述 正是微博如火如荼的时节，其中各个微博的分享功能是网站推广产品的好东东啊，此时如何方便快捷的使用微博的分享功能就显得比较重要了。我的站点每篇文章的底部有一些分享的链接： 不过我觉得这些分享基本上就是聋子的耳朵——摆设。除非这篇文章惊天地、泣鬼神，痛彻心扉，穿越前世今生。但是，如果有更加方便快捷的分享方式，这种冷淡得让人结冰的场面或许就不会经常出现。 一般翻译软件都有划词翻译功能，例如有道桌面词典的桌面划词翻译功能： 启用后，随便选中那个软件的一段文字，就会出现类似这样子的浮动提示框： 在web页面上，我们也是可以实现类似的效果的：划词→显示提示→分享。这就是本文要展示的内容。 二、效果与dem… Read More