jQuery Scroll Path 滚插视图酷炫

jQuery Scroll Path是一个jQuery的滚动路径插件，可以让你自定义滚动路径。该插件是使用canvas flavored的语法来绘制路径。可以通过鼠标滚轮上/下箭头键和空格键来查看路径效果；空格键的查看速度会比鼠标滚动的效果快；当你按住Shift键的时候再按空格键时，路径将会向后滚动。除此之外，我们还可以通过这个插件来自定义滚动条。
在滚动路径的时候我们还可以结合使用css来进行变换，使页面可以发生丰富的变换效果。在有些浏览器中，是不支持css变换效果，那所有的旋转切换将会忽略不计，但仍然遵循自定义的路径。

1,下载jQuery Scroll Path的框架

开源中国中下载

https://www.oschina.net/p/scrollpath

2,在自己的html中导入框架

link:

<link rel="stylesheet" type="text/css" href="style/style.css" />
<link rel="stylesheet" type="text/css" href="style/scrollpath.css" />
<link href="http://fonts.googleapis.com/css?family=Terminal+Dosis&subset=latin" rel="stylesheet" type="text/css">

 

script

先引入jQuery

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>

 

再引入其他js框架

<script type="text/javascript" src="script/lib/prefixfree.min.js"></script>
<script type="text/javascript" src="script/lib/jquery.easing.js"></script>
<script type="text/javascript" src="script/jquery.scrollpath.js"></script>
<script type="text/javascript" src="script/demo.js"></script>

 

 

不知道什么鬼

<!-- <link href="http://fonts.googleapis.com/css?family=Terminal+Dosis&subset=latin" rel="stylesheet" type="text/css">
-->
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

 

 

 

 

 

内容中可以添加自己需要的东西,也可以圈在一个固定的空间里  达到炫酷的效果

 

 

<!-- 第一个 -->
<div class="settings">
<a href="" class="show-path">Show Path</a>
</div>

<div class="wrapper">
<!-- 标题 -->
<div class="demo">
<h1>jQuery Scroll Path</h1>
<span class="arrow">&darr;</span> A Quick Demo <span class="arrow">&darr;</span>
</div>
<!-- 图一 -->
<div class="description">
<img src="img/01.png" class="big">
</div>

<!-- 图二 -->
<div class="syntax">
<img src="img/02.png" class="big">
</div>

<!-- 图三 -->
<div class="scrollbar">
<img src="img/03.png" class="big">
</div>

<!-- 图四 -->
<div class="rotations">
<img src="img/04.png" class="big">
<span class="upside-down big">in <a href="http://caniuse.com/#feat=transforms2d">supported</a> browsers.</span>
</div>

<!-- 图五 -->
<div class="source">
<img src="img/03.png" class="big">
</div>

<!-- 图六 -->
<div class="follow">
<span class="big">Feel free to <a href="https://twitter.com/JoelBesada">follow me</a> on Twitter. You can also be <span class="count">a kind person and</span> <a href="https://twitter.com/intent/tweet?original_referer=https%3A%2F%2Ftwitter.com%2Fabout%2Fresources%2Fbuttons&source=tweetbutton&text=jQuery%20Scroll%20Path%20Plugin&url=http%3A%2F%2Fjoelb.me%2Fscrollpath%2F&via=JoelBesada" class="tweet">tweet</a> this.</span>
</div>
</div>

 

 

 

 

翻译js代码  demo.jsscript/demo.js

$(document).ready(init);
 
function init() {
    /* ========== DRAWING THE PATH AND INITIATING THE PLUGIN ============= */
 
    $.fn.scrollPath("getPath")
        // 移到 'start' 元素
        .moveTo(400, 50, {name: "start"})
        // 写路径到 'description' 元素
        .lineTo(400, 800, {name: "description"})
        // 弧度和写路径到 'syntax'
        .arc(200, 1200, 400, -Math.PI/2, Math.PI/2, true)
        .lineTo(600, 1600, {
            callback: function() {
                highlight($(".settings"));
            },
            name: "syntax"
        })
        // 继续写路径到 'scrollbar'
        .lineTo(1750, 1600, {
            callback: function() {
                highlight($(".sp-scroll-handle"));
            },
            name: "scrollbar"
        })
        // 画弧，然后旋转
        .arc(1800, 1000, 600, Math.PI/2, 0, true, {rotate: Math.PI/2 })
        //写路径到 'rotations'
        .lineTo(2400, 750, {
            name: "rotations"
        })
        // 旋转到位
        .rotate(3*Math.PI/2, {
            name: "rotations-rotated"
        })
        // 继续画路径到 'source'
        .lineTo(2400, -700, {
            name: "source"
        })
        // 向下的小弧
        .arc(2250, -700, 150, 0, -Math.PI/2, true)
 
        //写路径到 'follow'
        .lineTo(1350, -850, {
            name: "follow"
        })
        // 画弧与旋转返回开始
        .arc(1300, 50, 900, -Math.PI/2, -Math.PI, true, {rotate: Math.PI*2, name: "end"});
 
    //上面完成了路径的设置, 接下来实始化到 wrapper 元素上
    $(".wrapper").scrollPath({drawPath: true, wrapAround: true});
 
    // 给导航链接加上点击滚动事件
    $("nav").find("a").each(function() {
        var target = $(this).attr("href").replace("#", "");
        $(this).click(function(e) {
            e.preventDefault();
             
            //引入 jQuery easing  (http://gsgd.co.uk/sandbox/jquery/easing/)
            // 使用 easing functions 如下
            $.fn.scrollPath("scrollTo", target, 1000, "easeInOutSine");
        });
    });
 
    /* ===================================================================== */
 
    $(".settings .show-path").click(function(e) {
        e.preventDefault();
        $(".sp-canvas").toggle();
    }).toggle(function() {
        $(this).text("隐藏路径");
    }, function() {
        $(this).text("显示路径");
    });
 
    $(".tweet").click(function(e) {
        open(this.href, "", "width=550, height=450");
        e.preventDefault();
    });
 
    }
 
 
function highlight(element) {
    if(!element.hasClass("highlight")) {
        element.addClass("highlight");
        setTimeout(function() { element.removeClass("highlight"); }, 2000);
    }
}
function ordinal(num) {
    return num + (
        (num % 10 == 1 && num % 100 != 11) ? 'st' :
        (num % 10 == 2 && num % 100 != 12) ? 'nd' :
        (num % 10 == 3 && num % 100 != 13) ? 'rd' : 'th'
    );
}

 

posted @ 2017-02-25 21:26  星星**  阅读(732)  评论(0)  编辑  收藏  举报