返回顶部按钮的实现

标签: JavaScript CSS3

返回顶部的快捷按钮在web页面中普遍存在，不过有些实现得并不理想，滚动条瞬间滚到页面顶部，过程不平滑而影响用户体验。在此列举实现返回顶部的若干方法，并分析优劣。

1. 使用锚点

页面顶部元素设置一个id值，返回顶部用a标签，设置a标签的href值为刚才的顶部元素id值。代码如下：

1 <div id="container">
2   <p>足够使container出现滚动条的内容</p>
3 </div>
4 <a href="#container" id="goToTop">返回顶部</a>

利用浏览器a标签定位锚点功能，可以容易实现返回顶部，但滚动条滚动过程中并不平滑。

阅读全文

HTML5+CSS3实现抽屉菜单

标签: JavaScript HTML5 CSS3

抽屉菜单在手机native应用中很常见。比如下图酷狗手机版界面。左侧为操作菜单，默认不显示。需要时向右滑动界面，操作菜单将从左侧缓缓显示；不需要时向左滑动界面，操作菜单将隐藏在左侧边。操作菜单这种缓入缓出的用户体验非常不错。这里讲采用css3实现上述抽屉菜单效果。

抽屉菜单示例图

阅读全文

使用CSS预处理器注意事项

标签: CSS

CSS处理器的出现极大提高样式代码的模块化、可维护性，但在使用CSS预处理器时需要注意以下几点：

  1. 注意代码重复。尤其当@mixin和@extend联合使用时，CSS代码将成倍增加。
  2. 避免过长的选择器。选择器过长不仅会导致样式文件变大，而且将增加浏览器处理样式的负担。
  3. 嵌套（即后代选择器）不要超过4层。虽然使用嵌套可减少ID和class，但太过详细会降低样式的复用性。
  4. 浏览器调试工具暂不支持调试CSS预处理器的代码，只能先编译成CSS代码后再调试。
阅读全文

将颜色值转换为十六进制

标签: JavaScript CSS

在CSS中，有多种形式表示颜色值，例如红色，可用十六进制：#FF0000，或rgb(255,0,0)，或颜色关键字red等表示。在符合W3C标准的浏览器下，通过函数getComputedStyle()会返回RGB/RGBA形式的颜色值，但在IE9以下浏览器，由于不支持该函数，必须自行实现颜色值的转换。这里举例大神DE的实现。

 1 function toHex(color) {
 2  var body  = createPopup().document.body,
 3      range = body.createTextRange();
 4 
 5  body.style.color = color;
 6  //这里用到非常精妙的技巧！！
 7  //使用TextRange对象的queryCommandValue获取ForeColor值
 8  //可以间接将各种形式颜色值转化成用十进制表示BGR的值
 9  //注意是BGR不是RGB,所以后面需要将BGR再转换成RGB
10  var value = range.queryCommandValue("ForeColor");
11  //这里就是将BGR转换成RGB的代码了
12  value = ((value & 0x0000ff) << 16) | (value & 0x00ff00) | ((value & 0xff0000) >>> 16);
13  //将十进制RGB转换成十六进制RGB
14  value = value.toString(16);
15 
16  //这里是给十六进制值RGB前面添加必要的前缀
17  return "#000000".slice(0, 7 - value.length) + value;
18 };
阅读全文

遍历DOM精简实现

标签: JavaScript JavaScript DOM

在不用框架/库（jQuery/mootools）前提下，用比较精简代码实现遍历DOM树。

 1 function travel(node, fn){
 2     var next = node.firstChild;
 3     while ((node = next)) {
 4         fn && fn(node);
 5         next = node.firstChild || node.nextSibling;
 6         while (!next && (node = node.parentNode)){
 7             next = node.nextSibling;
 8         }
 9     }
10 }
11 //打印出所有的p标签
12 travel(document.body, function(node){
13     if(node.nodeName.toLowerCase() == 'p'){ 
14         console.log(p);
15     }
16 });
17 //模拟getElementsByTagName
18 function getElementsByTagName(node, tagName){
19     var  i = 0,
20          result, 
21          elements = [], 
22          everyTag = !tagName || (tagName === '*');
23 
24     !everyTag && (tagName = tagName.toLowerCase()); 
25     travel(node, function(node){
26         if(node.nodeType === 1 && everyTag 
27                || node.nodeName.toLowerCase() === tagName){
28             elements[i++] =  node;
29         }
30     });
31 
32     result = elements.slice(0);//拷贝一份
33     elements = null;//因travel函数形成一个闭包引用到elements,所以应该将elements设置为null,防止内存泄露
34     return result;
35 }
阅读全文

execScript与eval区别

标签: JavaScript

详细分析execScript与eval异同。

  • 相同点
    1. execScript与eval接收一个字符串，若是表达式expression，则执行时求得该表达式的值并返回；若是一个或多个语句statements，则执行时运行这些语句。
  • 不同点
    1. execScript是IE浏览器独有；eval则是所有浏览器都支持。
    2. execScript无论是在global或local作用域内被调用，它所接受到的表达式expression或语句statements字符串都将在全局作用域global内执行；eval则是在它被调用时所在的作用域内运行它所接受到的表达式expression或语句statements字符串。
先看eval例子：
1 eval('var global = "global";');//全局作用域内调用eval,则var global = "global";是在全局作用域内被运行的，最终是得到一个global全局变量
2 (function(){
3   //这个匿名函数块内生成了一个局部作用域
4   eval('var local = "local";');//局部作用域内调用eval，则var local = "local";是在局部作用域内被运行的，最终是得到一个local局部变量
5   console.log(local);//输出local
6   console.log(global);//输出global,因为它是全局变量
7 })();
8 console.log(global);//输出global
9 console.log(local);//报错,提示local为声明,因为local是局部变量,外部无法访问
阅读全文

神奇JavaScript之正则

标签: JavaScript RegExp

今朝在技术群里，碰到有人问这样一个问题：使用正则去掉字符串中相邻的重复字符，比如字符串"ddssssaaaadkslsls"，去除相邻重复字符后，结果为"dsadksls"。

仔细琢磨后，实现如下：

1 'ddssssaaaadkslsls'.replace(/(\w+?)(?:\1+)/g, '$1');//运行结果为dsadksls
阅读全文

神奇的JavaScript之Function

标签: JavaScript Function

众所周知，在JavaScript中，内置对象有constructor属性指向它的构造函数，如:

1 ([]).constructor === Array;//true
2 ({}).constructor === Object;//true
3 (/\./).constructor === RegExp;//true

这个很好理解，但是不知是否注意到Function不仅是构造函数，而且是对象，所以Function也有constructor属性，并且

1 Function.constructor === Function;//true

按上面等式得知：对象Function是构造函数Function的实例!

阅读全文