欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

酷炫jQuery全屏3D焦点图动画效果_jquery

程序员文章站 2022-03-20 19:29:15
...
这又是一款很不错的jQuery焦点图动画,它的特点是整个焦点图基本是全屏显示的,非常大气,而且图片的倾斜也给整个焦点图3D立体的视觉效果,而且焦点图的图片切换非常流畅,相当实用。

酷炫jQuery全屏3D焦点图动画效果_jquery

HTML代码:



Loading images...
  • 酷炫jQuery全屏3D焦点图动画效果_jquery
  • 酷炫jQuery全屏3D焦点图动画效果_jquery
  • 酷炫jQuery全屏3D焦点图动画效果_jquery
  • 酷炫jQuery全屏3D焦点图动画效果_jquery
  • 酷炫jQuery全屏3D焦点图动画效果_jquery
  • 酷炫jQuery全屏3D焦点图动画效果_jquery
  • 酷炫jQuery全屏3D焦点图动画效果_jquery
  • 酷炫jQuery全屏3D焦点图动画效果_jquery
  • 酷炫jQuery全屏3D焦点图动画效果_jquery
  • 酷炫jQuery全屏3D焦点图动画效果_jquery
  • 酷炫jQuery全屏3D焦点图动画效果_jquery
  • 酷炫jQuery全屏3D焦点图动画效果_jquery

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);
  $('酷炫jQuery全屏3D焦点图动画效果_jquery').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 

调用插件的JavaScript代码

$(function() {
 var $pxs_container = $('#pxs_container');
 $pxs_container.parallaxSlider();
});

以上就是本文的全部内容,希望对大家学习jquery程序设计有所帮助。