文档章节

类轮播效果的视差滚动滑块

形参思
 形参思
发布于 2014/07/15 23:11
字数 1647
阅读 106
收藏 0

<html class="cufon-active cufon-ready"><head><script async="" type="text/javascript" src="http://www.gstatic.com/pub-config/ca-pub-0608155192548477.js"></script><script src="http://hm.baidu.com/hm.js?244ff9d4fa95dcc8d7e59d2dfaf5b2c4"></script>
        <title>Parallax Slider - 视差滚动滑块</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta name="description" content="Parallax Slider with jQuery">
        <meta name="keywords" content="parallax, jquery, slider, slideshow, rotation, perspective">
        <link rel="shortcut icon" href="../favicon.ico" type="image/x-icon">
        <link rel="stylesheet" type="text/css" href="css/style.css">
        <link rel="stylesheet" href="http://dreamsky.github.io/main/blog/common/init.css">
        <script src="js/cufon-yui.js" type="text/javascript"></script><style type="text/css">cufon{text-indent:0!important;}@media  screen,projection{cufon{display:inline!important;display:inline-block!important;position:relative!important;vertical-align:middle!important;font-size:1px!important;line-height:1px!important;}cufon cufontext{display:-moz-inline-box!important;display:inline-block!important;width:0!important;height:0!important;overflow:hidden!important;text-indent:-10000in!important;}cufon canvas{position:relative!important;}}@media  print{cufon{padding:0!important;}cufon canvas{display:none!important;}}</style>
        <script src="js/ChunkFive_400.font.js" type="text/javascript"></script>
        <script type="text/javascript">
            Cufon.replace('h1',{ textShadow: '1px 1px #000'});
            Cufon.replace('h2',{ textShadow: '1px 1px #000'});
            Cufon.replace('.footer',{ textShadow: '1px 1px #000'});
            Cufon.replace('.pxs_loading',{ textShadow: '1px 1px #000'});
        </script>
    <script src="http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion=390398"></script><link rel="stylesheet" href="http://bdimg.share.baidu.com/static/api/css/slide_share.css?v=0c86db4f.css"></head>
    <body>
        <div class="wrapper">
            <!-- <h1>Parallax Slider </h1> -->
        </div>

        <div id="pxs_container" class="pxs_container" style="margin-top:160px">
            <div class="pxs_bg">
                <div class="pxs_bg1" style="width: 7812px; left: -162.75px; "></div>
                <div class="pxs_bg2" style="width: 7812px; left: -325.5px; "></div>
                <div class="pxs_bg3" style="width: 7812px; left: -651px; "></div>
            </div>
            <div class="pxs_loading" style="display: none; "><cufon class="cufon cufon-canvas" alt="Loading " style="width: 86px; height: 20px; "><canvas width="103" height="22" style="width: 103px; height: 22px; top: -1px; left: 0px; "></canvas><cufontext>Loading </cufontext></cufon><cufon class="cufon cufon-canvas" alt="images..." style="width: 87px; height: 20px; "><canvas width="104" height="22" style="width: 104px; height: 22px; top: -1px; left: 0px; "></canvas><cufontext>images...</cufontext></cufon></div>
            <div class="pxs_slider_wrapper" style="display: block; ">
                <ul class="pxs_slider" style="width: 7812px; left: -1302px; ">
                    <li style="width: 1302px; "><img src="images/1.jpg" alt="First Image"></li>
                    <li style="width: 1302px; "><img src="images/2.jpg" alt="Second Image"></li>
                    <li style="width: 1302px; "><img src="images/3.jpg" alt="Third Image"></li>
                    <li style="width: 1302px; "><img src="images/4.jpg" alt="Forth Image"></li>
                    <li style="width: 1302px; "><img src="images/5.jpg" alt="Fifth Image"></li>
                    <li style="width: 1302px; "><img src="images/6.jpg" alt="Sixth Image"></li>
                </ul>
                <div class="pxs_navigation">
                    <span class="pxs_next" style="right: 274px; "></span>
                    <span class="pxs_prev" style="left: 274px; "></span>
                </div>
                <ul class="pxs_thumbnails" style="width: 760px; margin-left: -380px; ">
                    <li style="left: 62.07142857142857px; -webkit-transform: rotate(-10deg); " class=""><img src="images/thumbs/1.jpg" alt="First Image"></li>
                    <li style="left: 170.64285714285714px; -webkit-transform: rotate(-11deg); " class="selected"><img src="images/thumbs/2.jpg" alt="Second Image"></li>
                    <li style="left: 279.2142857142857px; -webkit-transform: rotate(12deg); "><img src="images/thumbs/3.jpg" alt="Third Image"></li>
                    <li style="left: 387.7857142857143px; -webkit-transform: rotate(-4deg); "><img src="images/thumbs/4.jpg" alt="Forth Image"></li>
                    <li style="left: 496.3571428571429px; -webkit-transform: rotate(-9deg); "><img src="images/thumbs/5.jpg" alt="Fifth Image"></li>
                    <li style="left: 604.9285714285714px; -webkit-transform: rotate(-2deg); "><img src="images/thumbs/6.jpg" alt="Sixth Image"></li>
                </ul>
            </div>
        </div>
        <div class="footer-banner" style="width:728px; margin:30px auto"><ins class="adsbygoogle" style="display:inline-block;width:728px;height:90px" data-ad-client="ca-pub-0608155192548477" data-ad-slot="8305246055" data-adsbygoogle-status="done"><ins style="display:inline-table;border:none;height:90px;margin:0;padding:0;position:relative;visibility:visible;width:728px;background-color:transparent"><ins id="aswift_0_anchor" style="display:block;border:none;height:90px;margin:0;padding:0;position:relative;visibility:visible;width:728px;background-color:transparent"><iframe width="728" height="90" frameborder="0" marginwidth="0" marginheight="0" vspace="0" hspace="0" allowtransparency="true" scrolling="no" allowfullscreen="true" onload="var i=this.id,s=window.google_iframe_oncopy,H=s&amp;&amp;s.handlers,h=H&amp;&amp;H[i],w=this.contentWindow,d;try{d=w.document}catch(e){}if(h&amp;&amp;d&amp;&amp;(!d.body||!d.body.firstChild)){if(h.call){setTimeout(h,0)}else if(h.match){try{h=s.upd(h,i)}catch(e){}w.location.replace(h)}}" id="aswift_0" name="aswift_0" style="left:0;position:absolute;top:0;"></iframe></ins></ins></ins></div>
        <!-- The JavaScript -->
        <script type="text/javascript" src="http://cdn.staticfile.org/jquery/1.4.2/jquery.min.js"></script>
        <script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
        <script type="text/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);
        </script>

        <script type="text/javascript">
            $(function() {
                var $pxs_container    = $('#pxs_container');
                $pxs_container.parallaxSlider();
            });
        </script>
        <script src="http://dreamsky.github.io/main/blog/common/init.js"></script>
    
<div class="top-banner clearfix"><div class="fl"><a href="http://dreamsky.github.io/main/blog/page-transitions/" target="_blank">&lt;&lt;太赞了!一组动感的页面切换动画效果</a></div><div class="fr"><a href="http://dreamsky.github.io/main/blog/sidebar-transitions/" target="_blank">创意无限!一组超炫的边栏过渡动画&gt;&gt;</a></div></div><div class="bdshare-slide-button-box bdshare-slide-style-r1" style="top: 100px; width: 0px; right: 0px; " data-bd-bind="1405436892462"><a href="#" onclick="return false;" class="bdshare-slide-button" style="left: -24px; "></a><div class="bdshare-slide-list-box" style="width: 0px; display: none; "><div class="bdshare-slide-top">分享到</div><div class="bdshare-slide-list"><ul class="bdshare-slide-list-ul" style="width: 226px; "></ul></div><div class="bdshare-slide-bottom" style="width: 226px; "><a href="#" onclick="return false;" class="slide-more" data-cmd="more">更多...</a></div></div></div><iframe id="google_osd_static_frame_2026656656526" name="google_osd_static_frame" style="display: none; width: 0px; height: 0px; "></iframe></body></html>

本文转载自:http://dreamsky.github.io/main/blog/parallax-slider/

共有 人打赏支持
形参思
粉丝 7
博文 35
码字总数 10466
作品 0
广安
程序员
私信 提问
2013 年最好的 20 款免费 jQuery 插件

互联网上面有很多 jQuery 插件,这里我们收集的是 2013 年最好的 20 款免费 jQuery 插件,这些插件对设计者和开发者都有很大的帮助,希望大家能够喜欢:) 现今互联网市场上提供很多 jQuery...

oschina
2014/01/11
12.9K
24
4.22、Bootstrap V4自学之路-----内容---轮播

示例 <div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> <ol class="carousel-indicators"> <li data-target="#carousel-example-generic" data-slide-to="......

Asktao
2016/03/25
105
0
Angular material2 扩展组件库 - NgMaterial2

NgMaterial2 angular material2 扩展组件 English 贡献说明 我们欢迎 material2 使用者来参与这个插件的开发,作为一个贡献者,请您遵循以下原则: 代码提交规范,参考 Git Commit Message C...

左华栋
2018/11/30
0
0
Notadd/ng-material2

NgMaterial2 angular material2 扩展组件 English 贡献说明 我们欢迎 material2 使用者来参与这个插件的开发,作为一个贡献者,请您遵循以下原则: 代码提交规范,参考 Git Commit Message C...

Notadd
2018/12/02
0
0
8 个让人印象深刻的网站 JS 视觉效果

网页设计已经提升到一个整体新的水平,Flash 渐渐失去了地位,逐渐被 HTML/JavaScript/CSS 所超越,而且一样可以实现出 Flash 复杂的特效。 本文介绍 8 个让人印象深刻的网站视觉效果,这些效...

oschina
2012/07/31
8.2K
6

没有更多内容

加载失败,请刷新页面

加载更多

小程序-星星评分

//UI界面 <block wx:for='{{item.rateArray}}' wx:key wx:for-item="i" > <image wx:if='{{ i==0}}' src='../../assets/xing4.png'></image> <image wx:if='{{ i==1}}' src='../../assets/xi......

lsy999
22分钟前
1
0
JavaScript与WebAssembly进行比较

本文由云+社区发表 作者:QQ音乐前端团队 在识别和描述核心元素的过程中,我们分享了构建SessionStack时使用的一些经验法则,这是一个轻量级但健壮且高性能的JavaScript应用程序,以帮助用户...

腾讯云加社区
23分钟前
1
0
如何设计一个 RPC 系统

RPC是一种方便的网络通信编程模型,由于和编程语言的高度结合,大大减少了处理网络数据的复杂度,让代码可读性也有可观的提高。但是RPC本身的构成却比较复杂,由于受到编程语言、网络模型、使...

编程SHA
25分钟前
1
0
API权限控制与安全管理

一、API权限控制范围 1、首先验证web端请求参数: (1)web请求参数:渠道、ServiceName、版本、Airline、时间戳(yyyyMMddhhmmssSSS)、reqXML、Language、签名 (2)请求不能为空,并且格式...

Jack088
25分钟前
2
0
最热门的13个Java微服务框架

曾经的服务器领域有许多不同的芯片架构和操作系统,经过长期发展,Java的“一次编译,到处运行”使得它在服务器领域找到一席之地,成为程序员们的最爱 本文,我们将和大家分享13个可靠的Jav...

java菜分享
26分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部