现在位置首页 / 前端开发 /正文

jQuery Scroll Path自定义轨迹路径插件--制作圆形动画循环组合导航菜单

作者: IT小兵 | 2014年3月9日| 热度:℃ | 评论: |参与:

今天介绍一个自定义轨迹插件及一个实例。

jQuery Scroll Path是一个jQuery的滚动路径插件,可以让你自定义滚动路径。该插件是使用canvas flavored的语法来绘制路径。可以通过鼠标滚轮上/下箭头键和空格键来查看路径效果;空格键的查看速度会比鼠标滚动的效果快;当你按住Shift键的时候再按空格键时,路径将会向后滚动。除此之外,我们还可以通过这个插件来自定义滚动条。 

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

JQUERY SCROLL PATH自定义滚动路径插件下载

圆形菜单

jQuery制作圆形动画循环组合导航菜单

用法简介:






jQuery制作圆形动画循环组合导航菜单。

jquery代码: 

   $(function() {
 
   /* when page loads animate the about section by default */
    //move($('#about'),2000,2);
    $('#menu > a').mouseover(
    function(){
        var $this = $(this);
        move($this,800,1);
    }
);
    /*
    function to animate / show one circle.
    speed is the time it takes to show the circle
    turns is the turns the circle gives around the big circle
     */
    function move($elem,speed,turns){
        var id = $elem.attr('id');
        var $circle = $('#circle_'+id);
        /* if hover the same one nothing happens */
        if($circle.css('opacity')==1)
            return;
        /* change the image */
        $('#image_'+id).stop(true,true).fadeIn(650).siblings().not(this).fadeOut(650);
        /*
        if there's a circle already, then let's remove it:
        either animate it in a circular movement or just fading out,
		depending on the current position of it
         */
        $('#content .circle').each(function(i){
            var $theCircle = $(this);
            if($theCircle.css('opacity')==1)
                $theCircle.stop()
            .animate({
                path : new $.path.arc({
                    center  : [409,359],
                    radius  : 257,
                    start   : 65,
                    end     : -110,
                    dir : -1
                }),
                opacity: '0'
            },1500);
            else
                $theCircle.stop()
            .animate({opacity: '0'},200);
        });
        /* make the circle appear in a circular movement */
        var end = 65 - 360 * (turns-1);
        $circle.stop()
        .animate({
            path : new $.path.arc({
                center  : [409,359],
                radius  : 257,
                start   : 180,
                end     : end,
                dir     : -1
            }),
            opacity: '1'
        },speed);
    }
});


点击阅读本文所属分类的更多文章: 前端开发 。和高手一起交流:346717337
友荐云推荐

未注明转发、原文均为本站原创。分享本文请注明 原文链接

给您更多信息和帮助

在这里您可以找到更多:

技术交流群:346717337 Jquery插件交流

投稿:suchso@vip.qq.com

承接:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/业务咨询

抢天猫双11红包
推荐使用阿里云服务器
echarts教程系列
本月最热文章

微信扫一扫,徜徉悠嘻网,您的休闲乐园

微信公众号:快乐每一天

随机文章
标签

技术交流群:346717337

投稿:suchso@vip.qq.com

专业专注:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/付费问题咨询