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


Posted in Javascript onMarch 22, 2016

这又是一款很不错的jQuery焦点图动画,它的特点是整个焦点图基本是全屏显示的,非常大气,而且图片的倾斜也给整个焦点图3D立体的视觉效果,而且焦点图的图片切换非常流畅,相当实用。

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

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);

调用插件的JavaScript代码

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

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

Javascript 相关文章推荐
关于jquery css的使用介绍
Apr 18 Javascript
js中回调函数的学习笔记
Jul 31 Javascript
web前端设计师们常用的jQuery特效插件汇总
Dec 07 Javascript
易被忽视的js事件问题总结
May 14 Javascript
JS锚点的设置与使用方法
Sep 05 Javascript
javascript cookie用法基础教程(概念,设置,读取及删除)
Sep 20 Javascript
input框中自动展示当前日期yyyy/mm/dd的实现方法
Jul 06 Javascript
angular内置provider之$compileProvider详解
Sep 27 Javascript
在create-react-app中使用sass的方法示例
Oct 01 Javascript
vue实现分页组件
Jun 16 Javascript
解决vue-cli webpack打包开启Gzip 报错问题
Jul 24 Javascript
JS实现电脑虚拟键盘的操作
Jun 24 Javascript
浅析C/C++,Java,PHP,JavaScript,Json数组、对象赋值时最后一个元素后面是否可以带逗号
Mar 22 #Javascript
使用struts2+Ajax+jquery验证用户名是否已被注册
Mar 22 #Javascript
使用getBoundingClientRect方法实现简洁的sticky组件的方法
Mar 22 #Javascript
Node.js文件操作方法汇总
Mar 22 #Javascript
浅谈Sticky组件的改进实现
Mar 22 #Javascript
使用Sticky组件实现带sticky效果的tab导航和滚动导航的方法
Mar 22 #Javascript
关于JS中match() 和 exec() 返回值和属性的测试
Mar 21 #Javascript
You might like
一个SQL管理员的web接口
2006/10/09 PHP
PHP中使用foreach()遍历二维数组的简单实例
2016/06/13 PHP
jQuery内置的AJAX功能和JSON的使用实例
2014/07/27 Javascript
javascript实现可拖动变色并关闭层窗口实例
2015/05/15 Javascript
AngularJS路由切换实现方法分析
2017/03/17 Javascript
JavaScript 事件流、事件处理程序及事件对象总结
2017/04/01 Javascript
jQuery实现锚点向下平滑滚动特效示例
2017/08/29 jQuery
jQuery 实现鼠标画框并对框内数据选中的实例代码
2017/08/29 jQuery
JS实现可用滑块滑动的缓动图代码
2019/09/01 Javascript
layui 上传文件_批量导入数据UI的方法
2019/09/23 Javascript
Vue3 源码导读(推荐)
2019/10/14 Javascript
解决Vue 给mapState中定义的属性赋值报错的问题
2020/06/22 Javascript
Python处理字符串之isspace()方法的使用
2015/05/19 Python
Python提取网页中超链接的方法
2016/09/18 Python
Django中ORM表的创建和增删改查方法示例
2017/11/15 Python
tensorflow实现softma识别MNIST
2018/03/12 Python
python判断字符串或者集合是否为空的实例
2019/01/23 Python
Python OpenCV中的resize()函数的使用
2019/06/20 Python
anaconda中更改python版本的方法步骤
2019/07/14 Python
Pycharm 文件更改目录后,执行路径未更新的解决方法
2019/07/19 Python
一篇文章弄懂Python中的可迭代对象、迭代器和生成器
2019/08/12 Python
使用python模拟命令行终端的示例
2019/08/13 Python
python 下 CMake 安装配置 OPENCV 4.1.1的方法
2019/09/30 Python
Python内存映射文件读写方式
2020/04/24 Python
Python2.6版本pip安装步骤解析
2020/08/17 Python
如何使用canvas绘制可移动网格的示例代码
2020/12/14 HTML / CSS
为有想象力的人提供的生活方式商店:Firebox
2018/06/04 全球购物
Amcal中文官网:澳洲综合性连锁药房
2019/03/28 全球购物
PatPat德国:妈妈的每日优惠
2019/10/02 全球购物
Delphi工程师笔试题
2013/09/21 面试题
超市活动计划书
2014/04/24 职场文书
低碳日宣传活动总结
2014/07/09 职场文书
党员反对四风问题思想汇报
2014/09/12 职场文书
Apache Linkis 中间件架构及快速安装步骤
2022/03/16 Servers
Nginx的基本概念和原理
2022/03/21 Servers
create-react-app开发常用配置教程
2022/06/25 Javascript