ltre.js/display/libiao/libiao.js

Personal Javascript Libs Store

;window.Ltrelib = window.Ltrelib || {};//使用一个生僻的名称作为全局变量，以存储自定义的库，防止与其它变量冲突

Ltrelib.libiao = function(opt){
    var loc = $(opt.loc);
    var downSrc = opt.downSrc;
    var upSrc = opt.upSrc;
    var width = opt.width;
    var height = opt.height;
    loc.css({
        position: 'relative',
        width: width + 'px',
        height: height + 'px'
    });
    loc.append('<img class="down-pic" src="' + downSrc + '" width="' + width + '" height="' + height + '" style="position:absolute">');
    loc.append('<img class="up-pic" src="' + upSrc + '" width="' + width + '" height="' + height + '" style="position:absolute">');
    var downPic = loc.children('.down-pic').first();
    var upPic = loc.children('.up-pic').first();
    downPic.css('clip', 'rect(auto 0 auto auto)');
    loc[0].onmouseover = loc[0].onmousemove = function(){
        console.log(event.offsetX);
        downPic.css('clip', 'rect(auto ' + event.offsetX + 'px auto auto)');
        upPic.css('clip', 'rect(auto auto auto ' + event.offsetX + 'px)');
    };
    loc[0].onmouseout = function(){
        downPic.css('clip', 'rect(auto 0 auto auto)');
        upPic.css('clip', 'auto');
    };
};

new function(){
    //测试用例：现有 <div></div>，将其渲染为里表图
    function testCase(){        
        libiao({
            loc: 'div:first',
            downSrc: 'http://res.miku.us/res/img/default/2016/07/30/122923-963-hex20b.gif',
            upSrc: 'http://res.miku.us/res/img/default/2016/07/30/122738-858-hex69.gif',
            width: 250,
            height: 250
        });
    }
};

module.exports = Ltrelib.libiao;