鼠标滚轮控制页面滚动(模仿苹果官网iPhone5s的滚屏动画实例)

最近发现这种效果很流行,自己也写一个,以后应该能用上。
技术重点应该就是鼠标滚轮的兼容性写法那里,因为jquery没有封装鼠标滚轮事件,用原生JS写的话每个浏览器的标准都不一样,很麻烦。
右侧边栏按钮点击滚动页面的效果就是普通的图片滚动展示效果而已,没什么难度。
下面是代码,我都放在一个页面里面,为了可以直接运行看效果。
Read More

点击页面空白隐藏层

最近发现我之前做这个效果的时候思路是错误的,今天修改了一下方法,因为之前的方法会在按钮上阻止事件冒泡,从而导致一个页面同时存在多个此功能的按钮出现点其他按钮不能隐藏层的bug。
下面的方法才是正确的:
HTML

<span class="search">我是按钮1</span><span><a class="clickme" href="#">我是按钮2</a></span>
<div class="div_d" style="display: none;">我是1那个弹出层</div>
<div class="div_e" style="display: none;">我是那个222222的2弹出层</div>

JS

  	/**
	 * 点击按钮显示层,点击其他地方隐藏层
	 * @param {str} btnName
	 * @param {str} divName
	 */
	var tarClickTip = function(btnName, divName) {
		$('.' + btnName).click(function(e) {
			$('.' + divName).show();
		});
		$(document).on('click', function(e) {
			var e = e ? e : window.event;
			var tar = e.srcElement || e.target;
			var tarClassName = $(tar).attr("class");
			if (tarClassName != btnName && tarClassName != divName) {
				$('.' + divName).hide();
			}
		});
	};
	$('.clickme').click(tarClickTip('clickme', 'div_e'));
	tarClickTip('search', 'div_d');

switch的替代品

曾经有人说过,真正好的程序是没有if..else的,当然switch还不如if..else。JS规范里面是禁止使用switch的。

命令对象(command object)就完美的解决了这个问题。

引用一篇国外的博客提到的:

JavaScript 有着良好的控制流程语句,这些语句往往用花括号包裹着。不过有个例外:switch … case 语句。switch … case 的奇怪之处在于你必须在每个 case 末尾加上关键字 break,以防止流程控制权穿越进入下一个 case 语句中。穿越是指让多条 case 执行的手法,当未遇见预期的 break 时,控制权就自动交到下一句 case 手中。然而,就如同分号与花括号一样,你很有可能会在不经意之间忘了写 break,当这发生时,后期的错误排查就比较痛苦,因为语句本身是没错的。因此,配对地写 case … break 是个好习惯。

我们通常讲,JavaScript 有着优雅的对象字面量与顶级函数,这些都使得特定的方法查询变的非常简单。为方法查询所创建的对象,我们称之为 活动对象(action object) 或 命令对象(command object),它被运用在许多软件设计模式中,包括强大的而有用的命令模式。

实例:

// switch 方法
    function testSwitch(name) {
        switch (name) {
            case '1':
                return 'hack';
                break;
            case '2':
                return 'slash';
                break;
            case '3':
                return 'run';
                break;
            default:
                return false;
                break;
        }
    }
    // 使用命令对象
    function testFn(name) {
        var names = {
            '1': function() {
                return 'hack';
            },
            '2': function() {
                return 'slash';
            },
            '3': function() {
                return 'run';
            }
        };
        if (typeof names[name] !== 'function') {
            return false;
        }
        return names[name]();
    }
    // 测试结果
    var result1 = testSwitch('1');
    var result2 = testFn('2');
    console.info(result1, result2);

js 取地址栏参数

//取地址栏参数
var urlSearch=location.search.slice(1),//取得?后面的数据
searchArr=urlSearch.split('&amp;');
_.each(searchArr, function(searchPart) {
var partArr = searchPart.split('='),
partKey = partArr[0],
partValue = partArr[1];
if (partKey == "enterprise") { //企业号
$('.enterprise', successBoxEl).text('公司帐号:' + partValue + '');
enterpriseVal=partValue;
} else if (partKey == "account") {
$('.account', successBoxEl).text('个人帐号:' + partValue + '');
accountVal=partValue;
} else if (partKey == "pwd") {
$('.pwd', successBoxEl).text('登录密码:' + partValue + '');
}
});

js arguments.callee & caller的用法及区别

在函数内部,arguments.callee该属性是一个指针,指向拥有这个arguments对象的函数;
而函数对象的另一个属性:caller,这个属性保存着调用当前函数的函数的引用,如果是在全局作用域中调用当前函数,它的值为null。
实例代码:

&lt;script type=&quot;text/javascript&quot;&gt;
function inner(){
	alert(arguments.callee);//指向拥有这个arguments对象的函数,即inner()
	alert(arguments.callee.caller);//这个属性保存着调用当前函数的函数的引用,即outer()
}
function outer(){
	inner();
}
outer();
&lt;/script&gt;

算是个简单的js模板吧,记录下来以后会常用

var isJqueryObj = function(obj) {
    return obj instanceof jQuery;
};
/**
 * 构造函数
 * @param {object} opts
 */
var WebDisk = function(opts) {
    opts = $.extend({
        &quot;element&quot;: null //容器可以是JQ对象或样式名
    }, opts || {});
    this.opts = opts;
    if (isJqueryObj(opts.element)) {
        this.element = opts.element;
    } else {
        this.element = $(opts.element);
    }
    this.init(); //初始化
};
$.extend(WebDisk.prototype, {
    init: function() {
        var elEl = this.element;
        var opts = this.opts;
        this.bindEvents(); //事件绑定
    },
    bindEvents: function() {
        var elEl = this.element;
        elEl.on('click', '.xxx', function() {
            $(this).show();
        });
    },
    destroy: function() {
        
    }
});

input文字获取焦点消失离开显示

&lt;input type=&quot;text&quot; value=&quot;请输入数据APPID&quot; data-empty=&quot;请输入数据APPID&quot; class=&quot;form-input-text&quot;&gt;
      /**
         * input文字获取焦点消失离开显示
         */
        var inputTextVal = '';
        $('body').on('focusin', '[data-empty]', function() {
            var fieldEl = $(this);
            var val = $.trim(fieldEl.val()),
                    emptyTip = fieldEl.data('empty');
            if (val == emptyTip) {
                fieldEl.val('');
            }
        }).on('focusout', '[data-empty]', function() {
            var fieldEl = $(this);
            var val = $.trim(fieldEl.val()),
                    emptyTip = fieldEl.data('empty');
            if (val.length == 0) {
                fieldEl.val(emptyTip);
            }
        });