2013-10-15

利用MWheel插件基于jQuery animate写的一个滚屏效果

前两天我写了一个MWheel插件，一些朋友用了表示很方便，非常感谢大家的捧场。

今天闲着没事，花一个小时写了这个滚屏Demo，利用前两天我写的MWheel插件，结合jQuery的便利选择器以及我最喜欢的ainmate做一个滚屏效果。当然，滚屏效果很简单，无非就是for循环递增递减就能实现，算法简单。

源码

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />  
    <title>滚屏效果 - 琼台博客</title>
    <style type="text/css">
      * { margin:0; padding:0; }
      .box { color:#FFF; text-align:center; font-size:10em; }
    </style>

    <script type="text/javascript" src="jquery-2.0.3.min.js"></script>
    <script type="text/javascript" src="MWheel.js"></script>
    <script type="text/javascript" src="page.js"></script>
    <script type="text/javascript">
      window.onload = function(){
        var element = document.getElementById('scroll');
        $(element).width($(document).width());
        $(element).height($(document).height());

        box(element);
      };  
    </script>
  </head>
  <body>
    <div id="scroll">
      <div class="box" style="background:red;" point="第一个">第一页</div>  
      <div class="box" style="background:black;" point="第二个">第二页</div>    
      <div class="box" style="background:blue;" point="第三个">第三页</div> 
      <div class="box" style="background:green;" point="最后一个">第四页</div>   
    </div>    
  </body>
</html>

...

READ ALL

2013-10-11

一个鼠标滑轮监听插件MWheel

项目中正好用到了鼠标滑轮监听事件，于是干脆把它整理成一个方便的JavaScript插件以便于日后有用。

MWheel.js

(function (window, undefined) {
 
  var list = ['up', 'down'],
      _this;

  var handle = function (event) {  
    var delta = 0, e;  

    e = event || window.event;  

    if (e.preventDefault) {
      e.preventDefault();  
    }

    e.returnValue = false;

    if (e.wheelDelta) {
      delta = e.wheelDelta / 120;  
    } else if (e.detail) {
      delta = -e.detail / 3;
    }

    if (delta) {
      if (delta < 0) {
        if (typeof _this[list[0]] === 'function') {
          _this[list[0]].apply(_this, [e]);
        }
      } else {
        if (typeof _this[list[1]] === 'function') {
          _this[list[1]].apply(_this, [e]);
        }
      }           
    }

  };

  var MWheel = function (element) {
    if (element) {
      return new MWheel.fn.init(element);
    } else {
      return null;
    }
  };

  MWheel.fn = MWheel.prototype = {
    constructor: MWheel,
    init: function (element) {
      var i;
        
      _this = this;
      _this.element = element;
        
      for (i = 0; i < list.length; i++) {
        _this[list[i]] = null;  
      }

      _this.element.addEventListener('DOMMouseScroll', handle, false);  
      _this.element.onmousewheel = handle;
      //a.addEventListener("mousewheel", handle, false);
    }
  };

  MWheel.fn.init.prototype = MWheel.fn;

  MWheel.fn.addEventListener = function (action, fn) {
    var i;
    for (i = 0; i < list.length; i++) {
      if (action === list[i]) {
        _this[list[i]] = fn;    
      }
    }

    return _this;
  };

  MWheel.fn.removeEventListener = function () {
    _this.element.removeEventListener('DOMMouseScroll', handle);
    _this.element.onmousewheel = null;      
  };

  window.MWheel = MWheel;
 
})(window);

...

READ ALL

2013-10-08
修复Chrome拖拽指针变文本状态
前阵子做一个拖拽应用，在测试时惊奇地发现在Chrome下有个怪异的地方，Chrome下拖拽时鼠标指针会变为文本状态，即使你给被拖拽的节点定义鼠标样式也无济于事。
但后来测试，不管是不是拖拽状态，随便打开一个站点在任意的地方只要按住鼠标左键不松开并拖拽鼠标指针都会自动变为文本模式，这在拖拽时显的很难看。
后来找到解决方案，只需要在body中添加添加onmousedown="return false"即可，如:
```
<body onmousedown="return false;">
```
也可以在触发拖拽的时候动态添加上事件，等拖拽事件结束后动态删除也可以，如果body标签中也有onmousedown事件，那么只需要在后面添加return false即可。如:
...
READ ALL
2013-09-26
C释放内存的一点技巧
C语言语法虽然简单，但没有GC，内存需要手动控制。这就造成一个结果，程序员素质不高，软件就会被写的特别烂，程序员要牛逼，软件的表现力会比有GC的效果要好。
在C语言里要申请内存需要使用malloc()函数，反之释放内存使用free()函数，但是如果要释放时，请不要简单的仅仅使用free，如以下例子
```
#include <stdlib.h>
int main ()
{
  int * buffer;
  buffer = (int*) malloc (100 * sizeof(int));

  free(buffer);

  // 此时，虽然free了，但buffer还是指向原来的内存地址
  // 如果你不留意，后边使用了buffer做操作，那么程序很大几率会崩溃

  return 0;
}
```
...
READ ALL

2013-09-21

Java枚举值转字符串数组

在Java中定义了一个类似这样的枚举值

public enum Arrow {
  LEFT,
  TOP,
  BOTTOM,
  RIGHT;
}

如果想要把Arrow转换成字符串数组，可以遍历这个枚举并使用name方法获取枚举值转字符串的方式

public static String[] names() {
  Arrow[] arrows = values();
  String[] names = new String[arrows.length];

  for (int i = 0; i < arrows.length; i++) {
    names[i] = arrows[i].name();
  }

  return names;
}

...

READ ALL

2013-09-10
JavaScript私有变量
如果接触过其它语言的，应该会接触过私有变量这一个概念。所谓私有就是没有受保护，不能修改与访问，只能通过对外接口访问与修改。但是在JavaScript中并没有私有变量这个概念，所有成员都可以通过下标访问与修改，如：
```
var F = function () {};
 
F.prototype.name = 'zhangsan';
 
var a = new F();
 
console.log(a.name); // zhangsan
 
a.name = 'lisi';

console.log(a.name); // lisi
```
...
READ ALL

2013-09-05

DOM API querySelector与querySelectorAll的用法

HTML5引入了与jQuery选择器相似的DOM API querySelectorAll(), 这个API用起来比那个getElement**好多了！废话不多说，直接上实例。

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
  </head>
  <body>
    <div class="box"></div>

    <div class="box">
      <p id="lost"></p>
      <p name="qttc"></p>
    </div>        

    <div></div>

    <div></div>

    <div class="box"></div>
  </body>
</html>

...

READ ALL

2013-08-31
网页加载完后动态更换favicon.ico图标
最近遇到一个需求：网页加载完后动态更换favicon.ico，因为这个favicon.ico是用户动态通过页面上传的并且网页还不能刷新，这不是一个容易实现的需求，因为浏览器的兼容性。根据我当时的初步判断，这个需求应该没有什么难度，只要获取新的地址之后把link的href地址给替换就好！
事实证明并非那么简单就能搞定，后来经过我实践发现这里有浏览器兼容的问题，先给大家看一段示例代码:
favicon.html
```
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <link rel="shortcut icon" href="favicon1.ico" />
  </head>
  <body>
    <p>默认指定favicon1.ico，然后中途使用js更换为favicon2.ico</p>

    <script type="text/javascript">
          
      var changeIcon = function () {    
        var link = document.head.querySelector("link");
        link.href = "favicon2.ico";
      };
    
      changeIcon();
    </script>
  </body>
</html>
```
...
READ ALL
2013-08-26
给Ckeditor添加一个插入code标签的按钮
Ckeditor是一个非常受欢迎的JavaScript编辑器，问世至今走了十年，依然还是市场老大，经得起时间考验就是好程序。
因为经常写一些技术博文，可能有些地方需要插入code标签，而默认Ckeditor不具备插入code标签功能，但它提供的拓展灵活程度让我感觉这就是那么容易。
下载程序
下载地址：http://ckeditor.com/
创建插件目录
目录plugins就是Ckeditor插件目录，所有的插件都集合在里边，在里边创建一个code目录，作为插入code标签功能的插件目录。
编写插件程序
Ckditor插件的规则是在插件目录下创建一个plugin.js文件作为插件主程序处理文件，如果是复杂的插件可能会有N个js文件。
...
READ ALL

2013-08-24

CentOS yum 提示段错误 (core dumped)

今天在yum install或者yum update的时候都提示段错误(core dumped)，然后终止运行了。

[root@lee ~]# yum -y update
Loaded plugins: fastestmirror, refresh-packagekit
Determining fastest mirrors
 * base: mirror.esocc.com
 * extras: mirror.esocc.com
 * soluslabs: mirror.us1.soluslabs.net
 * updates: mirror.esocc.com
base                                                                                                                                           | 3.7 kB     00:00     
base/primary_db                                                                                                                                | 4.4 MB     00:14     
extras                                                                                                                                         | 3.4 kB     00:00     
extras/primary_db                                                                                                                              |  18 kB     00:00     
soluslabs                                                                                                                                      |  951 B     00:00     
soluslabs/primary                                                                                                                              |  11 kB     00:00     
段错误 (core dumped)

...

READ ALL

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57

源码

下载程序

创建插件目录

编写插件程序