酷炫jQuery全屏3D焦點(diǎn)圖動(dòng)畫效果
這又是一款很不錯(cuò)的jQuery焦點(diǎn)圖動(dòng)畫,它的特點(diǎn)是整個(gè)焦點(diǎn)圖基本是全屏顯示的,非常大氣,而且圖片的傾斜也給整個(gè)焦點(diǎn)圖3D立體的視覺效果,而且焦點(diǎn)圖的圖片切換非常流暢,相當(dāng)實(shí)用。

HTML代碼:
<div class="wrapper"> </div> <div id="pxs_container" class="pxs_container"> <div class="pxs_bg"> <div class="pxs_bg1"></div> <div class="pxs_bg2"></div> <div class="pxs_bg3"></div> </div> <div class="pxs_loading">Loading images...</div> <div class="pxs_slider_wrapper"> <ul class="pxs_slider"> <li><img src="images/1.jpg" alt="First Image" /></li> <li><img src="images/2.jpg" alt="Second Image" /></li> <li><img src="images/3.jpg" alt="Third Image" /></li> <li><img src="images/4.jpg" alt="Forth Image" /></li> <li><img src="images/5.jpg" alt="Fifth Image" /></li> <li><img src="images/6.jpg" alt="Sixth Image" /></li> </ul> <div class="pxs_navigation"> <span class="pxs_next"></span> <span class="pxs_prev"></span> </div> <ul class="pxs_thumbnails"> <li><img src="images/thumbs/1.jpg" alt="First Image" /></li> <li><img src="images/thumbs/2.jpg" alt="Second Image" /></li> <li><img src="images/thumbs/3.jpg" alt="Third Image" /></li> <li><img src="images/thumbs/4.jpg" alt="Forth Image" /></li> <li><img src="images/thumbs/5.jpg" alt="Fifth Image" /></li> <li><img src="images/thumbs/6.jpg" alt="Sixth Image" /></li> </ul> </div> </div>
JavaScript代碼
(function($) {
$.fn.parallaxSlider = function(options) {
var opts = $.extend({}, $.fn.parallaxSlider.defaults, options);
return this.each(function() {
var $pxs_container = $(this),
o = $.meta ? $.extend({}, opts, $pxs_container.data()) : opts;
//the main slider
var $pxs_slider = $('.pxs_slider',$pxs_container),
//the elements in the slider
$elems = $pxs_slider.children(),
//total number of elements
total_elems = $elems.length,
//the navigation buttons
$pxs_next = $('.pxs_next',$pxs_container),
$pxs_prev = $('.pxs_prev',$pxs_container),
//the bg images
$pxs_bg1 = $('.pxs_bg1',$pxs_container),
$pxs_bg2 = $('.pxs_bg2',$pxs_container),
$pxs_bg3 = $('.pxs_bg3',$pxs_container),
//current image
current = 0,
//the thumbs container
$pxs_thumbnails = $('.pxs_thumbnails',$pxs_container),
//the thumbs
$thumbs = $pxs_thumbnails.children(),
//the interval for the autoplay mode
slideshow,
//the loading image
$pxs_loading = $('.pxs_loading',$pxs_container),
$pxs_slider_wrapper = $('.pxs_slider_wrapper',$pxs_container);
//first preload all the images
var loaded = 0,
$images = $pxs_slider_wrapper.find('img');
$images.each(function(){
var $img = $(this);
$('<img/>').load(function(){
++loaded;
if(loaded == total_elems*2){
$pxs_loading.hide();
$pxs_slider_wrapper.show();
//one images width (assuming all images have the same sizes)
var one_image_w = $pxs_slider.find('img:first').width();
/*
need to set width of the slider,
of each one of its elements, and of the
navigation buttons
*/
setWidths($pxs_slider,
$elems,
total_elems,
$pxs_bg1,
$pxs_bg2,
$pxs_bg3,
one_image_w,
$pxs_next,
$pxs_prev);
/*
set the width of the thumbs
and spread them evenly
*/
$pxs_thumbnails.css({
'width' : one_image_w + 'px',
'margin-left' : -one_image_w/2 + 'px'
});
var spaces = one_image_w/(total_elems+1);
$thumbs.each(function(i){
var $this = $(this);
var left = spaces*(i+1) - $this.width()/2;
$this.css('left',left+'px');
if(o.thumbRotation){
var angle = Math.floor(Math.random()*41)-20;
$this.css({
'-moz-transform' : 'rotate('+ angle +'deg)',
'-webkit-transform' : 'rotate('+ angle +'deg)',
'transform' : 'rotate('+ angle +'deg)'
});
}
//hovering the thumbs animates them up and down
$this.bind('mouseenter',function(){
$(this).stop().animate({top:'-10px'},100);
}).bind('mouseleave',function(){
$(this).stop().animate({top:'0px'},100);
});
});
//make the first thumb be selected
highlight($thumbs.eq(0));
//slide when clicking the navigation buttons
$pxs_next.bind('click',function(){
++current;
if(current >= total_elems)
if(o.circular)
current = 0;
else{
--current;
return false;
}
highlight($thumbs.eq(current));
slide(current,
$pxs_slider,
$pxs_bg3,
$pxs_bg2,
$pxs_bg1,
o.speed,
o.easing,
o.easingBg);
});
$pxs_prev.bind('click',function(){
--current;
if(current < 0)
if(o.circular)
current = total_elems - 1;
else{
++current;
return false;
}
highlight($thumbs.eq(current));
slide(current,
$pxs_slider,
$pxs_bg3,
$pxs_bg2,
$pxs_bg1,
o.speed,
o.easing,
o.easingBg);
});
/*
clicking a thumb will slide to the respective image
*/
$thumbs.bind('click',function(){
var $thumb = $(this);
highlight($thumb);
//if autoplay interrupt when user clicks
if(o.auto)
clearInterval(slideshow);
current = $thumb.index();
slide(current,
$pxs_slider,
$pxs_bg3,
$pxs_bg2,
$pxs_bg1,
o.speed,
o.easing,
o.easingBg);
});
/*
activate the autoplay mode if
that option was specified
*/
if(o.auto != 0){
o.circular = true;
slideshow = setInterval(function(){
$pxs_next.trigger('click');
},o.auto);
}
/*
when resizing the window,
we need to recalculate the widths of the
slider elements, based on the new windows width.
we need to slide again to the current one,
since the left of the slider is no longer correct
*/
$(window).resize(function(){
w_w = $(window).width();
setWidths($pxs_slider,$elems,total_elems,$pxs_bg1,$pxs_bg2,$pxs_bg3,one_image_w,$pxs_next,$pxs_prev);
slide(current,
$pxs_slider,
$pxs_bg3,
$pxs_bg2,
$pxs_bg1,
1,
o.easing,
o.easingBg);
});
}
}).error(function(){
alert('here')
}).attr('src',$img.attr('src'));
});
});
};
//the current windows width
var w_w = $(window).width();
var slide = function(current,
$pxs_slider,
$pxs_bg3,
$pxs_bg2,
$pxs_bg1,
speed,
easing,
easingBg){
var slide_to = parseInt(-w_w * current);
$pxs_slider.stop().animate({
left : slide_to + 'px'
},speed, easing);
$pxs_bg3.stop().animate({
left : slide_to/2 + 'px'
},speed, easingBg);
$pxs_bg2.stop().animate({
left : slide_to/4 + 'px'
},speed, easingBg);
$pxs_bg1.stop().animate({
left : slide_to/8 + 'px'
},speed, easingBg);
}
var highlight = function($elem){
$elem.siblings().removeClass('selected');
$elem.addClass('selected');
}
var setWidths = function($pxs_slider,
$elems,
total_elems,
$pxs_bg1,
$pxs_bg2,
$pxs_bg3,
one_image_w,
$pxs_next,
$pxs_prev){
/*
the width of the slider is the windows width
times the total number of elements in the slider
*/
var pxs_slider_w = w_w * total_elems;
$pxs_slider.width(pxs_slider_w + 'px');
//each element will have a width = windows width
$elems.width(w_w + 'px');
/*
we also set the width of each bg image div.
The value is the same calculated for the pxs_slider
*/
$pxs_bg1.width(pxs_slider_w + 'px');
$pxs_bg2.width(pxs_slider_w + 'px');
$pxs_bg3.width(pxs_slider_w + 'px');
/*
both the right and left of the
navigation next and previous buttons will be:
windowWidth/2 - imgWidth/2 + some margin (not to touch the image borders)
*/
var position_nav = w_w/2 - one_image_w/2 + 3;
$pxs_next.css('right', position_nav + 'px');
$pxs_prev.css('left', position_nav + 'px');
}
$.fn.parallaxSlider.defaults = {
auto : 0, //how many seconds to periodically slide the content.
//If set to 0 then autoplay is turned off.
speed : 1000,//speed of each slide animation
easing : 'jswing',//easing effect for the slide animation
easingBg : 'jswing',//easing effect for the background animation
circular : true,//circular slider
thumbRotation : true//the thumbs will be randomly rotated
};
//easeInOutExpo,easeInBack
})(jQuery);
調(diào)用插件的JavaScript代碼
$(function() {
var $pxs_container = $('#pxs_container');
$pxs_container.parallaxSlider();
});
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家學(xué)習(xí)jquery程序設(shè)計(jì)有所幫助。
- jQuery實(shí)現(xiàn)的3D版圖片輪播示例【滑動(dòng)輪播】
- jQuery插件slicebox實(shí)現(xiàn)3D動(dòng)畫圖片輪播切換特效
- 基于Jquery和html5實(shí)現(xiàn)炫酷的3D焦點(diǎn)圖動(dòng)畫
- 基于jquery的圖片輪播 tab切換組件
- jQuery插件實(shí)現(xiàn)帶圓點(diǎn)的焦點(diǎn)圖片輪播切換
- jQuery圖片輪播滾動(dòng)切換代碼分享
- jQuery插件Flexslider實(shí)現(xiàn)圖片輪播、圖文結(jié)合滑動(dòng)切換效果
- jquery帶有索引按鈕且自動(dòng)輪播切換特效代碼分享
- jquery實(shí)現(xiàn)左右輪播切換效果
- jQuery實(shí)現(xiàn)經(jīng)典的網(wǎng)頁(yè)3D輪播圖封裝功能【附源碼下載】
相關(guān)文章
jQuery中借助deferred來(lái)請(qǐng)求及判斷AJAX加載的實(shí)例講解
deferred對(duì)象的延遲功能對(duì)jQuery的ajax操作是一個(gè)很大的幫助,尤其是回調(diào)控制,下面我們就來(lái)看一下對(duì)jQuery中借助deferred來(lái)請(qǐng)求及判斷AJAX加載的實(shí)例講解2016-05-05
jQuery ctrl+Enter shift+Enter實(shí)現(xiàn)代碼
jQuery中對(duì)鍵盤事件進(jìn)行了修正 調(diào)用函數(shù)的時(shí)候傳入事件即可。2010-02-02
jQuery ajax MD5實(shí)現(xiàn)用戶注冊(cè)即時(shí)驗(yàn)證功能
這篇文章主要為大家詳細(xì)介紹了JQuery AJAX MD5實(shí)現(xiàn)用戶注冊(cè)即時(shí)驗(yàn)證功能,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-10-10
JQuery記住用戶名和密碼的具體實(shí)現(xiàn)
這篇文章主要介紹了JQuery實(shí)現(xiàn)記住用戶名和密碼的方法,需要的朋友可以參考下2014-04-04

