jquery动画 -- 3.创建一个带遮罩效果的图片走廊

  1. 云栖社区>
  2. 博客>
  3. 正文

jquery动画 -- 3.创建一个带遮罩效果的图片走廊

bill.kang 2012-08-23 14:20:00 浏览446
展开阅读全文

  今天我们要完成的是一个带有遮罩效果(补间动画)的图片走廊jquery插件:jquery.tranzify.js。我们先看下效果:

  

  好了,现在我们开始讲解这个jquery动画插件如何制作,大家可以再文章最后下载demo,查看详细代码。

  首先开始准备html页面,代码很简单就是一个id为frame的div,里面包含了一些图片。

<div id="frame">
        <img id="image1" src="img/amstrad.jpg" alt="Amstrad CPC 472" />
        <img id="image2" src="img/atari.jpg" alt="Atari TT030" />
        <img id="image3" src="img/commodore16.jpg" alt="Commodore 64" />
        <img id="image4" src="img/commodore128.jpg" alt="Commodore 128" />
        <img id="image5" src="img/spectrum.jpg" alt="Sinclair ZX Spectrum +2" />
        <img id="image6" src="img/msld.jpg" alt="msld" />
    </div>

  接下来我们创建相应的css样式文件,为了方便管理,我们存放在一个单独的css文件中:jquery.tranzify.css。该样式表定义了frame的样式,图片隐藏和显示的样式,上一条/下一条导航的样式,遮罩层的样式。

#frame
{
    position: relative;
    width: 700px;
    height: 400px;
    overflow: hidden;
    z-index: 0;
}
#frame img
{
    width: 700px;
    height: 400px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}
#frame img.visible
{
    z-index: 2;
}
#frame a
{
    display: block;
    width: 50%;
    height: 100%;
    position: absolute;
    top: 0;
    z-index: 10;
    color: transparent;
    background-image: url(transparent.gif);
    filter: alpha(opacity = 0);
    text-align: center;
    text-decoration: none;
    font: 90px "Palatino Linotype" , "Book Antiqua" , Palatino, serif;
    line-height: 400%;
}
#frame a:hover
{
    color: #fff;
    text-shadow: 0 0 5px #000;
    filter: alpha(opacity = 100);
    filter: Shadow(Color=#000, Direction=0);
}
#frame a:focus
{
    outline: none;
}
#prev
{
    left: 0;
}
#next
{
    right: 0;
}
#overlay
{
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 3;
}
#overlay div
{
    position: absolute;
}

  接下来介绍jquery.tranzify.js插件如何制作,该部分以讲解为主,插件的详细代码和如何使用,还是参照demo。

  第一步是搭建插件的骨架:

(function ($) {
    $.tranzify = {
        defaults: { //默认配置
            transitionWidth: 40,    //遮罩层每一小片段的宽度
            transitionHeight: '100%',   //遮罩层每一小片段高度
            containerID: 'overlay', //遮罩层id
            transitionType: 'venetian',//默认遮罩层动画效果
            prevID: 'prev',//上一条导航ID
            nextID: 'next',//下一条导航ID
            visibleClass: 'visible' //可见性class
        },
        //插件初始化操作
        createUI: function (config) {
        },
        //创建遮罩层
        createOverlay: function (config) {
        },
        //运行动画效果
        runTransition: function (config) {
        }
    };

    $.fn.extend({
        //创建插件函数
        tranzify: function (options) {return this;
        }
    });
})(jQuery);

  基本骨架有了,我们先来实现插件函数tranzify的实现。代码还是很简单的,就是获取当前的dom对象,对其创建相关html元素和相应事件,最后把this返回回去,实现链式模式,代码如下:

//创建插件函数
tranzify: function (options) {
  //扩展配置
  var config = $.extend($.tranzify.defaults, options);
  //获取当前dom对象,传给config.selector
  config.selector = "#" + this.attr('id');
  //计算出我们需要创建的遮罩层片段数
  config.multi = parseInt(this.width()) / config.transitionWidth;
  //创建插件
  $.tranzify.createUI(config);
  
//返回对象本身,实现链式效果   return this; }

  接下来我们介绍createUI函数。首先获取图片总数:

var imgLength = $(config.selector).find('img').length,

接下来定义‘上一条’和‘下一条’导航,并添加到selector对象上。

prevA = $('<a></a>', {
    id: config.prevID,
    href: '#',
    html: '&laquo;',
    click: function (e) {
        e.preventDefault();
        //隐藏导航
        $(config.selector).find('a').css('display', 'none');
        //创建遮罩
        $.tranzify.createOverlay(config);

        //获取当前显示状态的图片
        var currImg = $('.' + config.visibleClass, $(config.selector));
        //当前图片不是第一张图片
        if (currImg.prev().filter('img').length > 0) {
            //将上一张图片设置为可显示状态
            currImg.removeClass(config.visibleClass).prev().addClass(config.visibleClass);
        } else {
            //设置最后一张图片为可显示状态
            currImg.removeClass(config.visibleClass);
            $(config.selector).find('img').eq(imgLength - 1).addClass(config.visibleClass);
        }

        //运行遮罩效果
        $.tranzify.runTransition(config);
    }
}).appendTo(config.selector),
nextA = $('<a></a>', {
    id: config.nextID,
    href: '#',
    html: '&raquo;',
    click: function (e) {
        e.preventDefault();
        //隐藏导航
        $(config.selector).find('a').css('display', 'none');
        //创建遮罩
        $.tranzify.createOverlay(config);

        //获取当前显示状态的图片
        var currImg = $('.' + config.visibleClass, $(config.selector));
        //当前图片不是最后一张图片
        if (currImg.next().filter('img').length > 0) {
            //将下一张图片设置为可显示状态
            currImg.removeClass(config.visibleClass).next().addClass(config.visibleClass);
        } else {
            //设置第一张图片为可显示状态
            currImg.removeClass(config.visibleClass);
            $(config.selector).find('img').eq(0).addClass(config.visibleClass);
        }

        //运行遮罩效果
        $.tranzify.runTransition(config);
    }
}).appendTo(config.selector);

  最后别忘记把第一张图片设置为显示状态。

 $(config.selector).find('img').eq(0).addClass(config.visibleClass);

 

  下面介绍创建遮罩层的代码。主要思路是:创建一组div,div的背景就是当前显示的图片,通过设置各个div css的left值,背景的backgroundPosition值,使这组div组成一个完整的图片效果。还是看代码吧,一看就一目了然了。

//div left的偏移量
var posLeftMarker = 0,
//div 背景position的偏移量
bgHorizMarker = 0,
//遮罩层总的包装对象
overlay = $('<div></div>', {
    id: config.containerID
});

//循环,确定需要创造的片段数
for (var i = 0; i < config.multi; i++) {
    //创造片段,每个片段只包含当前显示图片的一部分图片
    $('<div></div>', {
        //设置宽度
        width: config.transitionWidth,
        //设置高度
        height: config.transitionHeight,
        css: {
            //设置背景图片,来源就是当前处于显示状态的图片
            backgroundImage: 'url(' + $('.' + config.visibleClass, $(config.selector)).attr('src') + ')',
            //设置背景图片大小,让他们和外部容器高度、宽度一致。
            //这样无论你图片的大小,都会和容易大小匹配
            backgroundSize: $(config.selector).width() + 'px ' + $(config.selector).height() + 'px',
            //设置背景偏移量
            backgroundPosition: bgHorizMarker + 'px 0',
            //设置left值
            left: posLeftMarker,
            top: 0
        }
    }).appendTo(overlay);//添加到遮罩层容器

    //重新计算偏移量
    bgHorizMarker -= config.transitionWidth;
    posLeftMarker += config.transitionWidth;
}
//遮罩层容器添加到页面
overlay.insertBefore('#' + config.prevID);

 

   ok, 只剩运行遮罩层的代码了。这段代码也很简单,就是获取遮罩层容易下面的各个div,对他们添加动画效果,逐个让他们的高度或者宽度变为0,等整个动画结束后,移出遮罩层容器。

//获取遮罩层容器
var transOverlay = $('#' + config.containerID),
//获取遮罩层容器下各div
transEls = transOverlay.children(),
len = transEls.length - 1;

//根据配置运行不懂得动画效果
switch (config.transitionType) {
    case 'venetian':
        transEls.each(function (i) {
            transEls.eq(i).animate({
                width: 0
            }, 'slow', function () {
                if (i === len) {
                    transOverlay.remove();
                    $(config.selector).find('a').css('display', 'block');
                }
            });
        });
        break;
    case 'strip':
        var counter = 0;
        function strip() {
            transEls.eq(counter).animate({
                height: 0
            }, 150, function () {
                if (counter === len) {
                    transOverlay.remove();
                    $(config.selector).find("a").css("display", "block");
                } else {
                    counter++;
                    strip();
                }
            });
        }
        strip();
        break;
}

  好了,内容讲完了,把代码拼接起来就可以运行最终效果了。希望这篇文章对你有帮助。

 

  demo下载地址:jQuery.animation.tranzify.zip

adpics.aspx?source=kbh1983&sourcesuninfo

网友评论

登录后评论
0/500
评论
bill.kang
+ 关注