jQuery滚动路径插件jquery scrollpath

所属分类:UI-滚动

 33296  311  查看评论 (2)
分享到微信朋友圈
X
jQuery滚动路径插件jquery scrollpath ie兼容6

这个插件做什么呢?那么,它可以让你定义一个自定义的路径滚动时上下跟随窗口,你也可以抛出旋转到组合。你画与工作完全一样的帆布方法绘制直线和圆弧的方法路径。

为了使它很容易看到你的路径磨磨蹭蹭,我已经添加了一个选项,以显示一个覆盖帆布的路径。启用此同时您建立您的网站,你应该有塑造路径正是你想要的方式没有问题。


=============以下内容由 ⚡轰隆隆☂ 提供=================

在滚动路径的时候我们还可以结合使用css来进行变换,使页面可以发生丰富的变换效果。在旧浏览器中,是不支持css3变换效果,那所有的旋转切换将会忽略不计,但仍然遵循自定义的路径。

使用方法

引入核心文件,jquery.easing.js不必须的,只为增添动画效果。

<script type="text/javascript" src="http://libs.useso.com/js/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="script/lib/jquery.easing.js"></script>
<script type="text/javascript" src="script/jquery.scrollpath.js"></script>

写入html,导航也滚动内容分开写,但需要有相对应的ID

<nav>
    <ul>
    <li><a href="#start">1</a></li>
    <li><a href="#description">2</a></li>
    <li><a href="#syntax">3</a></li>
    <li><a href="#scrollbar">4</a></li>
    <li><a href="#rotations">5</a></li>
    <li><a href="#rotations-rotated">6</a></li>
    <li><a href="#source">7</a></li>
    <li><a href="#follow">8</a></li>
    </ul>
</nav>
 
<div class="wrapper">
  <div class="demo">
    <h1>jQuery Scroll Path</h1>
    <span class="arrow">&darr;</span> 向下滚动演示 <span class="arrow">&darr;</span> </div>
  <div class="description"> <span class="big">这是一个自定义滚动路径的插件。</span> </div>
  <div class="syntax"> <span class="big">它是通过使用canvas来绘制曲线和弧线。</span> </div>
  <div class="scrollbar"> <span class="big">它自带了一个自定义的滚动条。</span> </div>
  <div class="rotations"> <span class="big">同时,它也可以旋转,</span> <span class="upside-down big">但需要浏览器的支持。</span> </div>
  <div class="source"> <span class="big">除了可以用鼠标滚轮上下滚动,还可以用空格键进行较快的滚动。<span> </div>
  <div class="follow"> <span class="big"><a href="http://www.jqcool.net/">jQ酷</a>,是一个专门分享各类jquery插件,并提供详细的jquery插件实例教程、在线预览的网站,目的让站长们更快更轻松的丰富前端效果。本站宗旨:愉快分享,轻松jQ,快速开发!"</span> </div>
</div>

写入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'
    );
}
相关插件-滚动

jQuery横向全屏切换滚动

jQuery横向全屏切换滚动兼容ie6
  滚动
 49878  456

zepto移动端全屏滚动

移动端整屏滚动效果
  滚动
 33031  300

自制高度可定制滚动条插件(原创)

自制原生JS高度可定制化的滚动条插件,高度自定义,轻量化,浏览器兼容良好
  滚动
 32261  423

仿股市表格实时轮播

这是一款简单的不需要任何外部插件的轮播效果图
  滚动
 38025  405

讨论这个项目(2)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    网络部 0
    2017/3/7 17:34:56
    轰隆隆 0
    2015/1/7 16:29:42
    在IE下支持的不是很好! 回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复