撕拉广告

js代码

var sila = (function(){
    return {
        silaCss : 'position:absolute; top:0; right:0; overflow:hidden',
        closeCss :'position:absolute; 20px; heigth:20px; bottom:0; left:0; overflow:hidden',
        smallSize : 80,
        smallPic : 'images/small.jpg',
        bigSize : 300,
        bigPic : 'images/big.jpg',
        href : 'http://bianyuan.me',
        //获取参数方法
        getParameter : function(){
            var scripts = document.getElementsByTagName('script'),
                script = scripts[scripts.length - 1];
            return {
                sila : script.getAttribute('sila')
            }
        },
        //逐渐展开与收缩方法
        showBig : function(el, allW){
            var currentW = el.offsetWidth;
            function slideShow(){
                if(currentW < allW){
                    currentW += 20;
                    el.style.width = currentW + 'px';
                    el.style.height = currentW + 'px';
                    var setSlideShow = setTimeout(slideShow, 20);
                }else{
                    el.style.width = allW + 'px';
                    el.style.height = allW + 'px';
                    clearTimeout(setSlideShow);
                }
            }
            slideShow();
        },
        showSmall : function(el, btnW, callBackF){
            var currentW = el.offsetWidth;
            function slideHide(){
                if(currentW > btnW){
                    currentW -= 20;
                    el.style.width = currentW + 'px';
                    el.style.height = currentW + 'px';
                    var setSlideHide = setTimeout(slideHide, 20);
                }else{
                    el.style.width = btnW + 'px';
                    el.style.height = btnW + 'px';
                    clearTimeout(setSlideHide);
                    callBackF();
                }
            }
            slideHide();
        }
    }
})();
function createSila(){
    //获取参数
    if (sila.getParameter().sila == null){
        var divSmallSize = sila.smallSize,
            smallSrc = sila.smallPic,
            divBigSize = sila.bigSize,
            biglSrc = sila.bigPic,
            href = sila.href;
    }else{
        var silaObject = eval('('+sila.getParameter().sila+')'),
            divSmallSize = silaObject.smallSize || sila.smallSize,
            smallSrc = silaObject.smallSrc || sila.smallPic,
            divBigSize = silaObject.bigSize || sila.bigSize,
            biglSrc = silaObject.bigSrc || sila.bigPic,
            href = silaObject.href || sila.href;
    }
    //创建撕拉div
    var divSila = document.createElement('div');
    divSila.style.cssText = sila.silaCss;
    divSila.style.width = divSmallSize + 'px';
    divSila.style.height = divSmallSize + 'px';
    //创建撕拉图片
    var    silaImg = document.createElement('img');
    silaImg.src = smallSrc;
    silaImg.style.cursor = 'pointer';
    //创建关闭图片
    var    closeImg = document.createElement('img');
    closeImg.style.cssText = sila.closeCss;
    closeImg.src = 'images/close.gif';
    closeImg.style.cursor = 'pointer';
    closeImg.style.display = 'none';
    divSila.appendChild(closeImg);
    //添加到页面
    divSila.appendChild(silaImg);
    document.body.appendChild(divSila);
    //图片点击
    silaImg.onclick = function(){
        if (silaImg.src.indexOf(smallSrc) !== -1){
            silaImg.src = biglSrc;
            sila.showBig(divSila, divBigSize);
            closeImg.style.display = 'block';
        }else{
            window.open(href);
        }
    }
    //关闭点击
    function reNormal(){
        silaImg.src = smallSrc;
        closeImg.style.display = 'none';
    }
    closeImg.onclick = function(){
        sila.showSmall(divSila, divSmallSize, reNormal);
    }
}
createSila();

页面调用方法

<script type="text/javascript" src="js/sila.js" sila="{smallSize:120,smallSrc:'images/small2.jpg',bigSize:400,bigSrc:'images/big2.jpg',href:'http://www.google.com'}"></script>

参数说明
sila为josn对象，属性均可选（可改js源码，也可自行配置）
smallSize：小图片的宽和高（正方形），默认值为80
smallSrc：小图路径，默认为images/small.jpg
bigSize：大图的宽和高（正方形），默认为300
bigSrc：大图路径，默认为images/big.jpg
href：大图连接，默认http://bianyuan.me