图片分割左右/上下分离效果

  居于jquery的图片水平或者垂直分割后,设置左右或者上下分离效果。

图片分割左右/上下分离效果

  图片分割左右/上下分离效果源代码如下

<!doctype html>
<title>图片分割左右/上下分离效果</title>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.4.1.min.js"></script>
<style>
    .slider{width:670px;height:560px;overflow:hidden;position:relative;background-repeat:no-repeat}
</style>
<div class="slider">
    <img src="/demo/1.jpg" alt="50音图" />
    <img src="/demo/2.jpg" alt="router"/>
</div>
<script>
    (function ($) {//注意效果图中的图片长宽要统一,并且配置width,height为图片的长宽一致,要不效果不佳,因为是通过背景来实现的
        //*cfg配置
        //width:容器款,默认670px
        //height:容器高度,默认:560
        //splitVertical:图片分割位置,默认false(默认水平)
        //moveVertical:分离移动方向,默认false(默认水平)
        //delay:自动播放间隔,默认6s
        $.fn.splitslider = function (cfg) {
            cfg = $.extend({ width: 670, height: 560, delay: 6 }, cfg);
            return this.each(function () {
                var me = $(this), imgs = me.find('img'), l = imgs.length, dvHalf = $('<div style="position:absolute"></div>')
                    , dvHalf1 = $('<div style="position:absolute"></div>'), timer, now = 0, dist = 0
                    , halfAttr = cfg.moveVertical ? 'top' : 'left', half1Attr = cfg.moveVertical ? 'bottom' : 'right'
                    , oHalfAttr = {}, oHalf1Attr = {};
                oHalfAttr[halfAttr] = 0; oHalf1Attr[half1Attr] = 0;
                imgs.hide();
                /*cfg.splitVertical && cfg.moveVertical ? -cfg.height : !cfg.splitVertical && !cfg.moveVertical ? -cfg.width :
                    -cfg[cfg.splitVertical ? (cfg.moveVertical ? '' : 'height') : (cfg.moveVertical ? 'width' : '')] / 2*/
                if (cfg.splitVertical) {
                    dvHalf.add(dvHalf1).css({ width: '50%', height: '100%' });
                    dvHalf1.css({ 'background-position': '-' + (cfg.width / 2) + 'px 0' });
                    if (cfg.moveVertical) dist = -cfg.height;
                    else dist = -cfg.width/2;
                }
                else {
                    dvHalf.add(dvHalf1).css({ width: '100%', height: '50%' });
                    dvHalf1.css({ 'background-position': '0 -' + (cfg.height / 2) + 'px' });
                    if (cfg.moveVertical) dist = -cfg.height / 2;
                    else dist = -cfg.width;
                }
                dvHalf.css({ top: 0, left: 0 });
                dvHalf1.css({ bottom: 0, right: 0 });
                me.css({ width: cfg.width, height: cfg.height }).add(dvHalf).add(dvHalf1).css('background-image', 'url(' + imgs.eq(0).attr('src') + ')');
                me.append(dvHalf).append(dvHalf1);
                function Moveing() {
                    now++;
                    if (now >= l) now = 0;
                    me.css('background-image', 'url(' + imgs.eq(now).attr('src') + ')');
                    oHalfAttr[halfAttr] = oHalf1Attr[half1Attr] = dist;
                    dvHalf.animate(oHalfAttr);
                    dvHalf1.animate(oHalf1Attr, function () {
                        setTimeout(function () {//1s后重置div的位置
                            oHalfAttr[halfAttr] = oHalf1Attr[half1Attr] = 0;
                            dvHalf.add(dvHalf1).css('background-image', 'url(' + imgs.eq(now).attr('src') + ')');
                            dvHalf.css(oHalfAttr); dvHalf1.css(oHalf1Attr);
                        }, 1000);
                        startTimer(true);
                    });
                }
                function startTimer(start) { start ? timer = setTimeout(Moveing, cfg.delay * 1000) : clearTimeout(timer); }
                if (imgs.length > 1) {
                    startTimer(true);
                    me.mouseenter(function () { startTimer(); }).mouseleave(function () { startTimer(true); });
                }
            });
        }
    })(jQuery);
    $('div.slider').splitslider({ splitVertical: false,moveVertical:false, delay: 3 });
</script>

 


原创文章,转载请注明出处:图片分割左右/上下分离效果

评论(0)Web开发网
阅读(407)喜欢(0)不喜欢(0)JavaScript/Ajax开发技巧