酷炫jQuery全屏3D焦點圖動畫效果
這又是一款很不錯的jQuery焦點圖動畫,它的特點是整個焦點圖基本是全屏顯示的,非常大氣,而且圖片的傾斜也給整個焦點圖3D立體的視覺效果,而且焦點圖的圖片切換非常流暢,相當(dāng)實用。
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(); });
以上就是本文的全部內(nèi)容,希望對大家學(xué)習(xí)jquery程序設(shè)計有所幫助。
- jQuery實現(xiàn)的3D版圖片輪播示例【滑動輪播】
- jQuery插件slicebox實現(xiàn)3D動畫圖片輪播切換特效
- 基于Jquery和html5實現(xiàn)炫酷的3D焦點圖動畫
- 基于jquery的圖片輪播 tab切換組件
- jQuery插件實現(xiàn)帶圓點的焦點圖片輪播切換
- jQuery圖片輪播滾動切換代碼分享
- jQuery插件Flexslider實現(xiàn)圖片輪播、圖文結(jié)合滑動切換效果
- jquery帶有索引按鈕且自動輪播切換特效代碼分享
- jquery實現(xiàn)左右輪播切換效果
- jQuery實現(xiàn)經(jīng)典的網(wǎng)頁3D輪播圖封裝功能【附源碼下載】
相關(guān)文章
jQuery-onload讓第一次頁面加載時圖片是淡入方式顯示
第一次打開一個頁面時,讓加載好的圖片先隱藏,然后再執(zhí)行動畫fadeIn,這里的load事件:當(dāng)所有子元素已經(jīng)被完全加載完成時,load事件被發(fā)送到這個元素2012-05-05Jquery實現(xiàn)遮罩層的簡單實例(就是彈出DIV周圍都灰色不能操作)
下面小編就為大家?guī)硪黄狫query實現(xiàn)遮罩層的簡單實例(就是彈出DIV周圍都灰色不能操作)。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-07-07easyUI實現(xiàn)類似搜索框關(guān)鍵詞自動提示功能示例代碼
本篇文章主要介紹了easyUI實現(xiàn)類似搜索框關(guān)鍵詞自動提示功能示例代碼,具有一定的參考價值,感興趣的小伙伴們可以參考一下。2016-12-12ASP.NET jQuery 實例2 (表單中使用回車在TextBox之間向下移動)
每次當(dāng)用戶在一個文本框輸入完數(shù)據(jù)后,更希望在敲入回車鍵后,焦點會自動移動到下一個文本框2012-01-01基于jquery實現(xiàn)的鼠標(biāo)滑過按鈕改變背景圖片
基于jquery實現(xiàn)的鼠標(biāo)滑過按鈕改變背景圖片,發(fā)現(xiàn)用CSS用時IE6不兼容,所以就用見JQ實現(xiàn)。2011-07-07