摘要:代码如下:#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 p { position: absolute; }

脚本宝典收集整理的这篇文章主要介绍了

js实例教程-jquery动画之如何创建一个带遮罩效果的图片走廊

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。

小宝典致力于为广大程序猿(媛)提供高品质的代码服务,请大家多多光顾小站,小宝典在此谢过。

代码如下:

#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 p
{
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: '«',
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: '»',
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);

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

. 代码如下:

//p left的偏移量
var posLeftMarker = 0,
//p 背景position的偏移量
bgHorizMarker = 0,
//遮罩层总的包装对象
overlay = $('<p></p>', {
id: config.containerID
});
//循环,确定需要创造的片段数
for (var i = 0; i < config.multi; i++) {
//创造片段,每个片段只包含当前显示图片的一部分图片
$('<p></p>', {
//设置宽度
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, 只剩运行遮罩层的代码了。这段代码也很简单,就是获取遮罩层容易下面的各个p,对他们添加动画效果,逐个让他们的高度或者宽度变为0,等整个动画结束后,移出遮罩层容器。

. 代码如下:

//获取遮罩层容器
var transOverlay = $('#' + config.containerID),
//获取遮罩层容器下各p
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;
}

好了,内容讲完了,把代码拼接起来就可以运行最终效果了。

代码如下:

#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 p
{
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: '«',
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: '»',
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);

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

. 代码如下:

//p left的偏移量
var posLeftMarker = 0,
//p 背景position的偏移量
bgHorizMarker = 0,
//遮罩层总的包装对象
overlay = $('<p></p>', {
id: config.containerID
});
//循环,确定需要创造的片段数
for (var i = 0; i < config.multi; i++) {
//创造片段,每个片段只包含当前显示图片的一部分图片
$('<p></p>', {
//设置宽度
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, 只剩运行遮罩层的代码了。这段代码也很简单,就是获取遮罩层容易下面的各个p,对他们添加动画效果,逐个让他们的高度或者宽度变为0,等整个动画结束后,移出遮罩层容器。

. 代码如下:

//获取遮罩层容器
var transOverlay = $('#' + config.containerID),
//获取遮罩层容器下各p
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;
}

好了,内容讲完了,把代码拼接起来就可以运行最终效果了。

觉得可用,就经常来吧!Javascript技巧 脚本宝典 欢迎评论哦! js技巧,巧夺天工,精雕玉琢。小宝典献丑了!

总结

以上是脚本宝典为你收集整理的

js实例教程-jquery动画之如何创建一个带遮罩效果的图片走廊

全部内容,希望文章能够帮你解决

js实例教程-jquery动画之如何创建一个带遮罩效果的图片走廊

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过