独孤九剑

昨天各大平台收到通知，需要首页以黑白效果来展示，高级浏览器有一个简单的属性，全局设置一下，就可以满足：-webkit-filter: grayscale(100%);filter: grayscale(100%);在低级浏览器可以借助grayscale.js插件来实现。原理，简单来说就是递归DOM结构，判断节点的类型，如果是文本直接更改其颜色值，如果是图片，通过canvas来更改...

*{ margin:0; padding:0; } !(function(doc){ function Snowflake(elem){

/* * @Author: Mark* @Date: 2015-08-06 13:54:01* @Last Modified by: Mark* @Last Modified time: 2015-08-17 11:49:27*/var tmover=(function(){ function tim(opt){ _this=this;//保存当

r.js是requireJS的优化（Optimizer）工具，可以实现前端文件的压缩与合并，在requireJS异步按需加载的基础上进一步提供前端优化，减小前端文件大小、减少对服务器的文件请求。要使用r.js需下载r.js文件（ 点我下载 ），将其放到你的项目根目录；还需要安装nodeJS（ 点我下载），以便通过命令行来执行r.js功能。下面是我项目 幸福来敲门的目录结

var contains=(function(){ if(typeof document.documentElement.contains){ return function(refNode,otherNode){ return refNode.contains(otherNod

分享一个判断浏览器是否支持的函数，然后有牵扯到了一个懒性加载的概念。var iscss3=(function(){ var _style=document.createElement("div").style; return 'transition' in _style||'mozTransition' in _style||'webkitT

一个跟着鼠标方向动态进行移动的效果。

周末在家的时候，接到后端的一个电话，说领导有这个这样的需求。刚开始我理解错了。以为需要做一个省市区三级联动的，稀里哗啦的在网上找了数据。然后谢了出来。结果沟通才知道。需求理解错了，需要电商网站填写个人收货地址的需求。简化用户点击次数，选择完省，市自动出来，选择市，县自动出来，接着再如果需要四级联动，就单独封装函数AJAX四级城镇请求出来：代码为：

我之前在网上看过一个插件叫做出JScolor   颜色拾取器  说白了就是通过1*1PX的DOM设置颜色值通过JS来获取当前鼠标点击位置DOM的颜色值。自从HTML5 画布出来之后。就有更好的方法来获取了，比如郭阿里巴巴ICON矢量库 用的SVG和渐变来进行绘制:我昨天用Canvas来绘制了一下，因为Canvas有现成的方法getImageData(x,y,width,height

*{ margin:0; padding:0; } .ab{ width:1px; height:1px; background: #000; position: absolute; } .m

很久没写博客了 昨天在写页面的时候 突然想起一个页面预加载的东西 试试，刚好有朋友经常接触微信活动页面  就聊了一下思路。页面资源加载就是三个 图片 CSS JS现在最方便的就是判断图片加载完毕来计算进度（JS也可以计算CSS 和JS 文件是否加载完毕了，考虑loading页面等待时间不能太长，所以忽略了CSS和JS，只判断load页面的下一个页面所需要的图片加载完毕来计算进度）img

scrollIntoView方法有两个参数 布尔值 true 和 false  使用true或者空会让调用这个方法的元素和浏览器顶部对齐 出现在可视区，使用参数false 也会出现可视区，但是不会和顶部对齐，它会和顶部有一段的距离。调用方法：document.getElementsByTagName("ul")[0].scrollIntoView(true);ul就会出现在可视区，省去

上代码 Document *{ margin:0; padding:0; } #chenkbox{ margin: 100px auto; width: 500px; position: relative;

*{ margin:0; padding:0; } .center{ text-align: center; }

demo *{ margin:0; padding:0; } div{ float:left; } .box{

demo修改内容:修改了缩放或者扩大后元素溢出边框的BUG,获取了缩放或者扩大的区间值进行计算,具体差别可以看上一篇博客对比一下代码就知道了。 222 *{ margin:0; padding:0; -webkit-perspe

demo 朋友圈照片红包效果 *{ margin:0; padding:0; } .pic{ width: 854px; height: 569px;

常用的属性和方法 都中文注释了 相信大家一看就会明白。可以复制代码到本地直接运行看到效果 *{margin:0;padding:0;} .box{width:300px;height:200px;overflow: auto;}

我们做过微信的应该都知道，微信自带的返回上一页，就是重新打开页面。并不是返回历史页面。我们PC端的浏览器是返回历史页面。点击返回页面之后 上一个页面的scrollTop还是之前没有进入新页面的位置。我看了下京东的微信网站。果然和我想到的方法一样。利用sessionStorage HTML5本地存储 进行存储位置scrollTop以及加载了多少次ajax次数 微信返回上一页（当前页面）之后。就会

函数节流，之前在用一些onscroll,onresize这种容易频繁触发的事件。都没有做节流，可以说缺乏这个意识，突然在群里看到有朋友提问，我自己也想到了。确实要处理，不能狗频繁触发。频繁触发的话，浏览器的负载会越来越大的。比如scroll每滚动一下，浏览器就会处理里面的逻辑。如果我们每隔一段时间在处理逻辑。这样浏览器就不会有这么大的负载了。对不。两个逻辑。延迟定时器。和时间戳。resiz

我们之前说过了call和apply两者的区别仅仅是第二参数的不同，call对的第二个参数 可以是任意字符，apply的第二个参数必须是数组。当然，第二个参数视需求而定，是可选的。今天本来想写一个放大镜的效果，再找参考资料的时候 无意发现了一个bind方法，看到解释让我甚是感兴趣，改变函数对象内部的this指向。IE8以下不兼容："use strict"; var pi

桌面============================================IE  而IE各个版本典型的userAgent如下：  Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.0)  Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.2)  Mozill

function getpos(ev){ var scrilltop=document.documentElement.scrollTop||document.body.scrollTop; var scrillLeft=document.documentElement.scrollLeft||document.body.scrollLeft;

随行笔记怕忘了。和字符串有关的三个编码方法:decodeURIComponent和encodeURIComponent以及encodeURI;decodeURIComponent解码的 ：var str="http://www.abc.com/index.html?imgurl=http%3A%2F%2Fimg.abc.com%2Fa.jpg&mobile=1380000000"

RunJS sssssss sssssss sssssss sssssss sssssss var odiv=document.getElementsByTagName("div")[0]; function setText(element,text){ if(typeof element.textCon

关于call和apply。 function a(names){ this.name=names; } a.prototype.show=function(){ alert(this.name); } function b(name1){ this

这两天在苦苦钻研闭包，因为之前对闭包的接触并不多，于是大量在网上找资料。怕遗忘，登陆博客，记录下来。什么是闭包，记得刚学习JS的时候，说闭包就是外部调用内部函数的变量。楼主当时比较浮躁，就以为是个很简单的东西，也就没有深究，但是随着，写的代码多了，感觉闭包真的非常有用。到目前为止，用的最后就是匿名函数自调用。首先看我的两个案例，作用域和执行顺序。 for (var i=0;

上一篇写了一个无缝幻灯片。但是一个朋友说。我那个只适合做纯效果。如果在上面有一些操作，就会报错。比如说:oul.getElementsByTagName(“li”)[0].这个时候没3秒钟返回的节点是一样的。在变化。针对这个需求，我就重新了一个。希望对大家有帮助。 *{ margin:0;

代码的效果可以直接看文章底部的演示地址，之前的滑动幻灯片我写的有一个小小的bug就是当到了最后一个节点，又需要重新回到第一个节点。从最后回到第一个节点。这个过程浪费了时间。并且不友好。现在我每执行一次，就把写个回调函数，DOM操作把第一个放在最后一个，这样就变成无缝幻灯片了。 *{ margin:

var aee3=[31,42,13,19,5,11,8,13,40,39,1,8,44,15,3]; Array.prototype.unqu2=function(){ this.sort(); var arr2=[this[0]]; for (var j = 1; j < this.length; j++) {

刚刚帮朋友写一个样式加载数据的时候，用到了这样的一个语句，document.documentElement.clientHeight，

nodeValue看到value我们就知道是值了,nodeType看到Type就知道是类型了   nodevalue是取得文本值  当nodeType==3的时候才有会返回值。不然会返回一个null值（或者经常按照我们编码的习惯，会产生一个空格 空格在JS里面nodeType==3是返回true）。 1111

/**字符串之间的对比***/ function test(){ alert(1<3);//true; /**字符串数字之间的对比，会先转化成数字**/ alert("1"<"3");//true /**纯字符串比较 会先转成ascii码**/ alert("a"<"b");//true /

*{ margin:0; padding:0; } ul{ text-align: center; margin: 100px auto; overflow: hidden; } ul li{

div{ text-align: center; } .cj{ z-index: 2; -webkit-transform:translate3d(0,327px,0); cursor: pointer; position: relative;

之前和一个同事做一个项目的时候遇到了一个变量提升的问题，明明已经定义了但是会弹出undefined.后来查了一下，因为是变量提升的原因才导致的。 var V="Hello World"; (function(){ alert(V); var V="111" })()这个时候你会弹出一个undefined，按照我们本来的思路应该是弹出一个H

function hasClass(node,oclass){ var oname=node.className.split(/\s+/); for (var i = 0; i < oname.length; i++) { if(oname[i]==oclass){

效果简介：滚到那个栏目 一个fixed元素的栏目名就变色。 html{ height: 2000px; } ul li{ width:100%; height:200px; margin-bottom:10

var shake=4000, last_update=0, count=0, x=y=z=last_x=last_y=last_z=0; if(window.DeviceMotionEvent){ window.addEventListener("devicemotion",deviceM

document.compatMode== 'BackCompat' //不是标准声明 document.compatMode== 'CSS1Compat ' //标准声明  这两个模式下面 对应的获取可视区宽高也是不一样的。标准的声明 可以document.documentElement.clientWidth这样获取宽度非