脚本宝典收集整理的这篇文章主要介绍了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;
}
. 代碼如下:
(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: 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;
}
. 代碼如下:
var imgLength = $(config.selector).find('img').length,
. 代碼如下:
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 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);
. 代碼如下:
//獲取遮罩層容器
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;
}
. 代碼如下:
(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: 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;
}
. 代碼如下:
var imgLength = $(config.selector).find('img').length,
. 代碼如下:
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 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);
. 代碼如下:
//獲取遮罩層容器
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:384754419,请注明来意。