酷炫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 相关文章推荐
prototype 1.5 &amp; scriptaculous 1.6.1 学习笔记
Sep 07 Javascript
js几个不错的函数 $$()
Oct 09 Javascript
发两个小东西,ASP/PHP 学习工具。 用JavaScript写的
Apr 12 Javascript
javascript parseInt() 函数的进制转换注意细节
Jan 08 Javascript
jQuery阻止事件冒泡具体实现
Oct 11 Javascript
angularJS 指令封装回到顶部示例详解
Jan 22 Javascript
基于vue实现分页效果
Nov 06 Javascript
基于iview-admin实现动态路由的示例代码
Oct 02 Javascript
微信小程序静默登录的实现代码
Jan 08 Javascript
jQuery实现中奖播报功能(让文本滚动起来) 简单设置数值即可
Mar 20 jQuery
在Vue中使用antv的示例代码
Jun 29 Javascript
如何使用three.js 制作一个三维的推箱子游戏
Jul 29 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
mysql建立外键
2006/11/25 PHP
windows下配置php5.5开发环境及开发扩展
2014/12/25 PHP
非常全面的php日期时间运算汇总
2015/11/04 PHP
visual studio code 调试php方法(图文详解)
2017/09/15 PHP
PHPstorm启用自动换行的方法详解(IDE)
2020/09/17 PHP
深入理解Javascript里的依赖注入
2014/03/19 Javascript
基于jquery实现的可编辑下拉框实现代码
2014/08/02 Javascript
详解JavaScript UTC时间转换方法
2016/01/07 Javascript
7个去伪存真的JavaScript面试题
2016/01/07 Javascript
jQuery easyui的validatebox校验规则扩展及easyui校验框validatebox用法
2016/01/18 Javascript
JS 获取HTML标签内的子节点的方法
2016/09/21 Javascript
Asp.Net之JS生成分页条的方法
2016/11/23 Javascript
JavaScript组成、引入、输出、运算符基础知识讲解
2016/12/08 Javascript
js获取浏览器和屏幕的各种宽度高度
2017/02/22 Javascript
基于input框覆盖掉数字英文的实例讲解
2017/07/21 Javascript
jQuery获取table表中的td标签(实例讲解)
2017/07/28 jQuery
Angular父子组件通过服务传参的示例方法
2018/10/31 Javascript
9102了,你还不会移动端真机调试吗
2019/03/25 Javascript
[01:25]DOTA2超级联赛专访iG 将调整状态找回自己
2013/06/05 DOTA
python实现根据图标提取分类应用程序实例
2014/09/28 Python
python中类的属性和方法介绍
2018/11/27 Python
Python 20行简单实现有道在线翻译的详解
2019/05/15 Python
浅谈Python中(&amp;,|)和(and,or)之间的区别
2019/08/07 Python
python标准库os库的函数介绍
2020/02/12 Python
python解决OpenCV在读取显示图片的时候闪退的问题
2021/02/23 Python
css3实例教程 一款纯css3实现的发光屏幕旋转特效
2014/12/07 HTML / CSS
深入浅析CSS3中的Flex布局整理
2020/04/27 HTML / CSS
英国运动服、设备及配件网站:DW Sports
2019/12/04 全球购物
世界上最好的野生海鲜和有机食品:Vital Choice
2020/01/16 全球购物
本科生详细的自我评价
2013/09/19 职场文书
大学生的四年学习自我评价
2013/12/13 职场文书
监察建议书范文
2014/03/12 职场文书
企业安全生产承诺书
2014/05/22 职场文书
公司演讲稿开场白
2014/08/25 职场文书
求职简历自我评价怎么写
2015/03/10 职场文书
2015年班组工作总结
2015/04/20 职场文书